@ethlete/cdk 3.5.0 → 3.5.2

package/fesm2022/ethlete-cdk.mjs

@@ -4,7 +4,7 @@ import { AsyncPipe, NgIf, NgClass, NgTemplateOutlet, NgForOf, JsonPipe, formatDa
 import * as i0 from '@angular/core';
 import { Component, ViewEncapsulation, ChangeDetectionStrategy, Directive, InjectionToken, booleanAttribute, Input, ContentChild, ContentChildren, inject, ElementRef, Injector, HostBinding, isDevMode, Injectable, TemplateRef, ViewContainerRef, forwardRef, ViewChild, LOCALE_ID, numberAttribute, EventEmitter, Output, signal, computed, Optional, Inject, SkipSelf, HostListener, NgZone, NgModule, 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, AT_LEAST_ONE_REQUIRED, equal, ResizeObserverService, createFlipAnimation, RuntimeError, AnimatedOverlayDirective, SelectionModel, ActiveSelectionModel, isEmptyArray, isObjectArray, isPrimitiveArray, ClickOutsideDirective, ANIMATED_LIFECYCLE_TOKEN, AnimatedLifecycleDirective, ObserveContentDirective, clamp, nextFrame, DELAYABLE_TOKEN, ObserveResizeDirective, SmartBlockScrollStrategy, RouterStateService, ClickObserverService, FocusVisibleService, ViewportService, scrollToElement, getElementVisibleStates, IS_ACTIVE_ELEMENT, IS_ELEMENT, CursorDragScrollDirective, ObserveScrollStateDirective, IsElementDirective, IsActiveElementDirective, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
+import { LetDirective, createDestroy, ScrollObserverFirstElementDirective, ScrollObserverLastElementDirective, Memo, createReactiveBindings, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, AT_LEAST_ONE_REQUIRED, equal, ResizeObserverService, createFlipAnimation, RuntimeError, AnimatedOverlayDirective, SelectionModel, ActiveSelectionModel, KeyPressManager, isEmptyArray, isObjectArray, isPrimitiveArray, ClickOutsideDirective, ANIMATED_LIFECYCLE_TOKEN, AnimatedLifecycleDirective, ObserveContentDirective, clamp, nextFrame, DELAYABLE_TOKEN, ObserveResizeDirective, SmartBlockScrollStrategy, RouterStateService, ClickObserverService, FocusVisibleService, ViewportService, scrollToElement, getElementVisibleStates, IS_ACTIVE_ELEMENT, IS_ELEMENT, CursorDragScrollDirective, ObserveScrollStateDirective, IsElementDirective, IsActiveElementDirective, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
 import { BehaviorSubject, startWith, map, switchMap, combineLatest, pairwise, tap, takeUntil, skip, of, Subject, debounceTime, filter, distinctUntilChanged, withLatestFrom, take, skipWhile, catchError, throwError, firstValueFrom, fromEvent, merge, timer, skipUntil, defer, partition, 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, FocusKeyManager, InputModalityDetector, AriaDescriber, 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, A, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, SPACE, hasModifierKey, PAGE_DOWN, PAGE_UP, END, HOME } from '@angular/cdk/keycodes';
+import { BACKSPACE, 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';
@@ -3730,8 +3730,6 @@ class ComboboxDirective {
     set selectedOptionComponent(component) {
         this._selectedOptionComponent$.next(component);
     }
-    //#endregion
-    //#region Members
     get _currentFilter() {
         return this._currentFilter$.value;
     }
@@ -3764,10 +3762,15 @@ class ComboboxDirective {
         //#endregion
         //#region Outputs
         this.filterChange = new EventEmitter();
+        //#endregion
+        //#region Members
+        this._shouldIgnoreNextBlurEvent = false;
+        this._deletedSearchWithKeyPress = false;
         this._currentFilter$ = new BehaviorSubject('');
         this._isOpen$ = this._animatedOverlay.isMounted$;
         this._selectionModel = new SelectionModel();
         this._activeSelectionModel = new ActiveSelectionModel();
+        this._backspaceKeyPressManager = new KeyPressManager(BACKSPACE);
         this.selectedOptions$ = this._selectionModel.selection$;
         this.multiple$ = this._selectionModel.allowMultiple$;
         this.options$ = this._selectionModel.filteredOptions$;
@@ -3848,6 +3851,9 @@ class ComboboxDirective {
             return;
         this._animatedOverlay.unmount();
     }
+    focus() {
+        this._input.nativeInputRef?.element.nativeElement.focus();
+    }
     selectInputAndOpen() {
         if (this._input.disabled)
             return;
@@ -3878,6 +3884,9 @@ class ComboboxDirective {
     }
     //#endregion
     //#region Protected Methods
+    _ignoreNextBlurEvent() {
+        this._shouldIgnoreNextBlurEvent = true;
+    }
     _processKeydownEvent(event) {
         const keyCode = event.keyCode;
         const isOpen = this._isOpen;
@@ -3885,6 +3894,8 @@ class ComboboxDirective {
         const canAddCustomValue = this.allowCustomValues;
         const value = event.target.value;
         const hasFilterValue = !!value;
+        const selection = this._selectionModel.selection;
+        const isBackspacePressed = this._backspaceKeyPressManager.isPressed(event);
         const result = {};
         if (keyCode === ENTER) {
             event.preventDefault();
@@ -3930,6 +3941,21 @@ class ComboboxDirective {
             result.overlayOperation = 'close';
             return this._interpretKeyHandlerResult(result);
         }
+        if (keyCode === BACKSPACE) {
+            if (isBackspacePressed && value) {
+                this._deletedSearchWithKeyPress = true;
+            }
+            if (!hasFilterValue && isMultiple && selection.length && !this._deletedSearchWithKeyPress) {
+                result.optionAction = { type: 'remove', option: selection[selection.length - 1] };
+                return this._interpretKeyHandlerResult(result);
+            }
+            if (!isBackspacePressed) {
+                this._deletedSearchWithKeyPress = false;
+            }
+        }
+        else {
+            this._deletedSearchWithKeyPress = false;
+        }
         if (!isOpen) {
             result.overlayOperation = 'open';
         }
@@ -3940,11 +3966,18 @@ class ComboboxDirective {
         }
         return this._interpretKeyHandlerResult(result);
     }
+    _processKeyupEvent() {
+        this._backspaceKeyPressManager.clear();
+    }
     _processInputEvent(event) {
         const value = event.target.value;
         this._updateFilter(value);
     }
     _handleBlurEvent() {
+        if (this._shouldIgnoreNextBlurEvent) {
+            this._shouldIgnoreNextBlurEvent = false;
+            return;
+        }
         this._input._markAsTouched();
         this._input._setShouldDisplayError(true);
         if (this._selectionModel.allowMultiple) {
@@ -4172,9 +4205,13 @@ class ComboboxOptionComponent {
             return;
         }
         this.combobox.writeValueFromOption(this.option);
+        this.combobox.focus();
+    }
+    ignoreBlur() {
+        this.combobox._ignoreNextBlurEvent();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ComboboxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ComboboxOptionComponent, isStandalone: true, selector: "et-combobox-option", inputs: { option: "option" }, host: { listeners: { "click": "selectOption()" }, classAttribute: "et-combobox-option" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ComboboxOptionComponent, isStandalone: true, selector: "et-combobox-option", inputs: { option: "option" }, host: { listeners: { "mousedown": "ignoreBlur()", "click": "selectOption()" }, classAttribute: "et-combobox-option" }, providers: [
             {
                 provide: COMBOBOX_OPTION_TOKEN,
                 useExisting: ComboboxOptionComponent,
@@ -4185,6 +4222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
             type: Component,
             args: [{ selector: 'et-combobox-option', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'et-combobox-option',
+                        '(mousedown)': 'ignoreBlur()',
                         '(click)': 'selectOption()',
                     }, imports: [AsyncPipe, NgIf, NgTemplateOutlet, NgComponentOutlet], hostDirectives: [], providers: [
                         {
@@ -4219,7 +4257,7 @@ class ComboboxBodyComponent {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ComboboxBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ComboboxBodyComponent, isStandalone: true, selector: "et-combobox-body", host: { classAttribute: "et-combobox-body et-with-default-animation" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ComboboxBodyComponent, isStandalone: true, selector: "et-combobox-body", host: { attributes: { "tabindex": "-1" }, classAttribute: "et-combobox-body et-with-default-animation" }, providers: [
             {
                 provide: COMBOBOX_BODY_TOKEN,
                 useExisting: ComboboxBodyComponent,
@@ -4230,6 +4268,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
             type: Component,
             args: [{ selector: 'et-combobox-body', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'et-combobox-body et-with-default-animation',
+                        tabindex: '-1',
                     }, imports: [
                         NgTemplateOutlet,
                         NgFor,
@@ -4256,7 +4295,7 @@ class ComboboxComponent extends DecoratedInputBase {
         this.combobox.setBodyComponent(ComboboxBodyComponent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ComboboxComponent, isStandalone: true, selector: "et-combobox", host: { listeners: { "click": "combobox.selectInputAndOpen()" }, classAttribute: "et-combobox" }, usesInheritance: true, hostDirectives: [{ directive: i1$1.AnimatedOverlayDirective }, { directive: InputDirective }, { directive: ComboboxDirective, inputs: ["options", "options", "initialValue", "initialValue", "filterInternal", "filterInternal", "loading", "loading", "error", "error", "emptyText", "emptyText", "placeholder", "placeholder", "multiple", "multiple", "bindLabel", "bindLabel", "bindValue", "bindValue", "allowCustomValues", "allowCustomValues", "selectedOptionComponent", "selectedOptionComponent", "optionComponent", "optionComponent"], outputs: ["filterChange", "filterChange"] }], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<ng-content select=\"[etInputPrefix]\" />\n\n<div class=\"et-combobox-wrapper\">\n  <ul *ngIf=\"combobox.multiple$ | async\" class=\"et-combobox-selected-options\">\n    <li\n      *ngFor=\"let item of combobox.selectedOptions$ | async; trackBy: combobox.trackByOptionKeyFn\"\n      class=\"et-combobox-selected-option\"\n    >\n      <ng-container\n        *ngIf=\"\n          combobox.customSelectedOptionTpl$ | async as customSelectedOptionTpl;\n          else compOrDefaultSelectedOptionLabelTpl\n        \"\n      >\n        <ng-container *ngTemplateOutlet=\"customSelectedOptionTpl; context: { option: item }\" />\n      </ng-container>\n\n      <ng-template #compOrDefaultSelectedOptionLabelTpl>\n        <ng-container\n          *ngIf=\"combobox.customSelectedOptionComponent$ | async as comp; else defaultSelectedOptionLabelTpl\"\n        >\n          <ng-container *ngComponentOutlet=\"comp; inputs: { option: item }\"></ng-container>\n        </ng-container>\n        <ng-template #defaultSelectedOptionLabelTpl>\n          {{ combobox.getOptionLabel(item) | async }}\n        </ng-template>\n      </ng-template>\n\n      <span\n        (click)=\"combobox.removeSelectedOption(item); $event.stopPropagation()\"\n        class=\"et-combobox-selected-option-remove\"\n        tabindex=\"-1\"\n      >\n        x\n      </span>\n    </li>\n    <li class=\"et-combobox-muliple-input\">\n      <ng-container *ngTemplateOutlet=\"inputTpl\" />\n    </li>\n  </ul>\n\n  <ng-template #inputTpl>\n    <input\n      (keydown)=\"combobox._processKeydownEvent($event)\"\n      (click)=\"combobox.open()\"\n      (blur)=\"combobox._handleBlurEvent()\"\n      (input)=\"combobox._processInputEvent($event)\"\n      type=\"text\"\n      etNativeInputRef\n    />\n  </ng-template>\n\n  <ng-container *ngIf=\"(combobox.multiple$ | async) === false\">\n    <ng-container *ngTemplateOutlet=\"inputTpl\" />\n  </ng-container>\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[et-floating-placement^=top] .et-combobox-body-container{transform-origin:bottom}.et-combobox-body.et-with-default-animation[et-floating-placement^=bottom] .et-combobox-body-container{transform-origin:top}.et-combobox-body-container{display:block;background-color:#3d3d3d;color:#fff;max-height:min(200px,var(--et-floating-max-height, 200px));overflow:auto}@supports (overflow: overlay){.et-combobox-body-container{overflow:overlay}}.et-combobox-body{width:100%;display:grid;transform:var(--et-floating-translate);will-change:transform}.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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ComboboxComponent, isStandalone: true, selector: "et-combobox", host: { listeners: { "click": "combobox.selectInputAndOpen()" }, classAttribute: "et-combobox" }, usesInheritance: true, hostDirectives: [{ directive: i1$1.AnimatedOverlayDirective }, { directive: InputDirective }, { directive: ComboboxDirective, inputs: ["options", "options", "initialValue", "initialValue", "filterInternal", "filterInternal", "loading", "loading", "error", "error", "emptyText", "emptyText", "placeholder", "placeholder", "multiple", "multiple", "bindLabel", "bindLabel", "bindValue", "bindValue", "allowCustomValues", "allowCustomValues", "selectedOptionComponent", "selectedOptionComponent", "optionComponent", "optionComponent"], outputs: ["filterChange", "filterChange"] }], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<ng-content select=\"[etInputPrefix]\" />\n\n<div class=\"et-combobox-wrapper\">\n  <ul *ngIf=\"combobox.multiple$ | async\" class=\"et-combobox-selected-options\">\n    <li\n      *ngFor=\"let item of combobox.selectedOptions$ | async; trackBy: combobox.trackByOptionKeyFn\"\n      class=\"et-combobox-selected-option\"\n    >\n      <ng-container\n        *ngIf=\"\n          combobox.customSelectedOptionTpl$ | async as customSelectedOptionTpl;\n          else compOrDefaultSelectedOptionLabelTpl\n        \"\n      >\n        <ng-container *ngTemplateOutlet=\"customSelectedOptionTpl; context: { option: item }\" />\n      </ng-container>\n\n      <ng-template #compOrDefaultSelectedOptionLabelTpl>\n        <ng-container\n          *ngIf=\"combobox.customSelectedOptionComponent$ | async as comp; else defaultSelectedOptionLabelTpl\"\n        >\n          <ng-container *ngComponentOutlet=\"comp; inputs: { option: item }\"></ng-container>\n        </ng-container>\n        <ng-template #defaultSelectedOptionLabelTpl>\n          {{ combobox.getOptionLabel(item) | async }}\n        </ng-template>\n      </ng-template>\n\n      <span\n        (click)=\"combobox.removeSelectedOption(item); $event.stopPropagation()\"\n        class=\"et-combobox-selected-option-remove\"\n        tabindex=\"-1\"\n      >\n        x\n      </span>\n    </li>\n    <li class=\"et-combobox-muliple-input\">\n      <ng-container *ngTemplateOutlet=\"inputTpl\" />\n    </li>\n  </ul>\n\n  <ng-template #inputTpl>\n    <input\n      (keydown)=\"combobox._processKeydownEvent($event)\"\n      (keyup)=\"combobox._processKeyupEvent()\"\n      (click)=\"combobox.open()\"\n      (blur)=\"combobox._handleBlurEvent()\"\n      (input)=\"combobox._processInputEvent($event)\"\n      type=\"text\"\n      etNativeInputRef\n    />\n  </ng-template>\n\n  <ng-container *ngIf=\"(combobox.multiple$ | async) === false\">\n    <ng-container *ngTemplateOutlet=\"inputTpl\" />\n  </ng-container>\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[et-floating-placement^=top] .et-combobox-body-container{transform-origin:bottom}.et-combobox-body.et-with-default-animation[et-floating-placement^=bottom] .et-combobox-body-container{transform-origin:top}.et-combobox-body-container{display:block;background-color:#3d3d3d;color:#fff;max-height:min(200px,var(--et-floating-max-height, 200px));overflow:auto}@supports (overflow: overlay){.et-combobox-body-container{overflow:overlay}}.et-combobox-body{width:100%;display:grid;transform:var(--et-floating-translate);will-change:transform}.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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
@@ -4295,7 +4334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                             // eslint-disable-next-line @angular-eslint/no-outputs-metadata-property
                             outputs: ['filterChange'],
                         },
-                    ], template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<ng-content select=\"[etInputPrefix]\" />\n\n<div class=\"et-combobox-wrapper\">\n  <ul *ngIf=\"combobox.multiple$ | async\" class=\"et-combobox-selected-options\">\n    <li\n      *ngFor=\"let item of combobox.selectedOptions$ | async; trackBy: combobox.trackByOptionKeyFn\"\n      class=\"et-combobox-selected-option\"\n    >\n      <ng-container\n        *ngIf=\"\n          combobox.customSelectedOptionTpl$ | async as customSelectedOptionTpl;\n          else compOrDefaultSelectedOptionLabelTpl\n        \"\n      >\n        <ng-container *ngTemplateOutlet=\"customSelectedOptionTpl; context: { option: item }\" />\n      </ng-container>\n\n      <ng-template #compOrDefaultSelectedOptionLabelTpl>\n        <ng-container\n          *ngIf=\"combobox.customSelectedOptionComponent$ | async as comp; else defaultSelectedOptionLabelTpl\"\n        >\n          <ng-container *ngComponentOutlet=\"comp; inputs: { option: item }\"></ng-container>\n        </ng-container>\n        <ng-template #defaultSelectedOptionLabelTpl>\n          {{ combobox.getOptionLabel(item) | async }}\n        </ng-template>\n      </ng-template>\n\n      <span\n        (click)=\"combobox.removeSelectedOption(item); $event.stopPropagation()\"\n        class=\"et-combobox-selected-option-remove\"\n        tabindex=\"-1\"\n      >\n        x\n      </span>\n    </li>\n    <li class=\"et-combobox-muliple-input\">\n      <ng-container *ngTemplateOutlet=\"inputTpl\" />\n    </li>\n  </ul>\n\n  <ng-template #inputTpl>\n    <input\n      (keydown)=\"combobox._processKeydownEvent($event)\"\n      (click)=\"combobox.open()\"\n      (blur)=\"combobox._handleBlurEvent()\"\n      (input)=\"combobox._processInputEvent($event)\"\n      type=\"text\"\n      etNativeInputRef\n    />\n  </ng-template>\n\n  <ng-container *ngIf=\"(combobox.multiple$ | async) === false\">\n    <ng-container *ngTemplateOutlet=\"inputTpl\" />\n  </ng-container>\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[et-floating-placement^=top] .et-combobox-body-container{transform-origin:bottom}.et-combobox-body.et-with-default-animation[et-floating-placement^=bottom] .et-combobox-body-container{transform-origin:top}.et-combobox-body-container{display:block;background-color:#3d3d3d;color:#fff;max-height:min(200px,var(--et-floating-max-height, 200px));overflow:auto}@supports (overflow: overlay){.et-combobox-body-container{overflow:overlay}}.et-combobox-body{width:100%;display:grid;transform:var(--et-floating-translate);will-change:transform}.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"] }]
+                    ], template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<ng-content select=\"[etInputPrefix]\" />\n\n<div class=\"et-combobox-wrapper\">\n  <ul *ngIf=\"combobox.multiple$ | async\" class=\"et-combobox-selected-options\">\n    <li\n      *ngFor=\"let item of combobox.selectedOptions$ | async; trackBy: combobox.trackByOptionKeyFn\"\n      class=\"et-combobox-selected-option\"\n    >\n      <ng-container\n        *ngIf=\"\n          combobox.customSelectedOptionTpl$ | async as customSelectedOptionTpl;\n          else compOrDefaultSelectedOptionLabelTpl\n        \"\n      >\n        <ng-container *ngTemplateOutlet=\"customSelectedOptionTpl; context: { option: item }\" />\n      </ng-container>\n\n      <ng-template #compOrDefaultSelectedOptionLabelTpl>\n        <ng-container\n          *ngIf=\"combobox.customSelectedOptionComponent$ | async as comp; else defaultSelectedOptionLabelTpl\"\n        >\n          <ng-container *ngComponentOutlet=\"comp; inputs: { option: item }\"></ng-container>\n        </ng-container>\n        <ng-template #defaultSelectedOptionLabelTpl>\n          {{ combobox.getOptionLabel(item) | async }}\n        </ng-template>\n      </ng-template>\n\n      <span\n        (click)=\"combobox.removeSelectedOption(item); $event.stopPropagation()\"\n        class=\"et-combobox-selected-option-remove\"\n        tabindex=\"-1\"\n      >\n        x\n      </span>\n    </li>\n    <li class=\"et-combobox-muliple-input\">\n      <ng-container *ngTemplateOutlet=\"inputTpl\" />\n    </li>\n  </ul>\n\n  <ng-template #inputTpl>\n    <input\n      (keydown)=\"combobox._processKeydownEvent($event)\"\n      (keyup)=\"combobox._processKeyupEvent()\"\n      (click)=\"combobox.open()\"\n      (blur)=\"combobox._handleBlurEvent()\"\n      (input)=\"combobox._processInputEvent($event)\"\n      type=\"text\"\n      etNativeInputRef\n    />\n  </ng-template>\n\n  <ng-container *ngIf=\"(combobox.multiple$ | async) === false\">\n    <ng-container *ngTemplateOutlet=\"inputTpl\" />\n  </ng-container>\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[et-floating-placement^=top] .et-combobox-body-container{transform-origin:bottom}.et-combobox-body.et-with-default-animation[et-floating-placement^=bottom] .et-combobox-body-container{transform-origin:top}.et-combobox-body-container{display:block;background-color:#3d3d3d;color:#fff;max-height:min(200px,var(--et-floating-max-height, 200px));overflow:auto}@supports (overflow: overlay){.et-combobox-body-container{overflow:overlay}}.et-combobox-body{width:100%;display:grid;transform:var(--et-floating-translate);will-change:transform}.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 []; } });
 
 const ComboboxImports = [