@ethlete/cdk 4.65.0 → 4.66.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ethlete/cdk
 
+## 4.66.0
+
+### Minor Changes
+
+- [`798686e`](https://github.com/ethlete-io/ethdk/commit/798686e8e36209438be073f0a7b7116e7394f263) Thanks [@TomTomB](https://github.com/TomTomB)! - Add userInteraction output to select and combobox
+
 ## 4.65.0
 
 ### Minor Changes

package/fesm2022/ethlete-cdk.mjs

@@ -10047,6 +10047,7 @@ class ComboboxDirective {
         //#region Outputs
         this.filterChange = new EventEmitter();
         this.optionClick = new EventEmitter();
+        this.userInteraction = new EventEmitter();
         //#endregion
         //#region Members
         this._shouldIgnoreNextBlurEvent = false;
@@ -10397,7 +10398,9 @@ class ComboboxDirective {
                 if (type === 'toggle') {
                     this._selectionModel.toggleSelectedOption(option);
                 }
+                this.optionClick.emit(option);
             }
+            this.userInteraction.emit();
         }
     }
     _initDispatchFilterChanges() {
@@ -10475,7 +10478,7 @@ class ComboboxDirective {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: ComboboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.2", type: ComboboxDirective, isStandalone: true, inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: false, isRequired: false, transformFunction: null }, filterInternal: { classPropertyName: "filterInternal", publicName: "filterInternal", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: false, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, bodyEmptyText: { classPropertyName: "bodyEmptyText", publicName: "bodyEmptyText", isSignal: false, isRequired: false, transformFunction: null }, bodyMoreItemsHintText: { classPropertyName: "bodyMoreItemsHintText", publicName: "bodyMoreItemsHintText", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: false, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: false, isRequired: false, transformFunction: null }, bindKey: { classPropertyName: "bindKey", publicName: "bindKey", isSignal: false, isRequired: false, transformFunction: null }, bindDisabled: { classPropertyName: "bindDisabled", publicName: "bindDisabled", isSignal: false, isRequired: false, transformFunction: null }, allowCustomValues: { classPropertyName: "allowCustomValues", publicName: "allowCustomValues", isSignal: false, isRequired: false, transformFunction: null }, showBodyMoreItemsHint: { classPropertyName: "showBodyMoreItemsHint", publicName: "showBodyMoreItemsHint", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, optionComponent: { classPropertyName: "optionComponent", publicName: "optionComponent", isSignal: true, isRequired: false, transformFunction: null }, optionComponentInputs: { classPropertyName: "optionComponentInputs", publicName: "optionComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, selectedOptionComponent: { classPropertyName: "selectedOptionComponent", publicName: "selectedOptionComponent", isSignal: true, isRequired: false, transformFunction: null }, bodyErrorComponentInputs: { classPropertyName: "bodyErrorComponentInputs", publicName: "bodyErrorComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, bodyErrorComponent: { classPropertyName: "bodyErrorComponent", publicName: "bodyErrorComponent", isSignal: true, isRequired: false, transformFunction: null }, selectedOptionComponentInputs: { classPropertyName: "selectedOptionComponentInputs", publicName: "selectedOptionComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, bodyLoadingComponent: { classPropertyName: "bodyLoadingComponent", publicName: "bodyLoadingComponent", isSignal: true, isRequired: false, transformFunction: null }, bodyLoadingComponentInputs: { classPropertyName: "bodyLoadingComponentInputs", publicName: "bodyLoadingComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, bodyEmptyComponent: { classPropertyName: "bodyEmptyComponent", publicName: "bodyEmptyComponent", isSignal: true, isRequired: false, transformFunction: null }, bodyEmptyComponentInputs: { classPropertyName: "bodyEmptyComponentInputs", publicName: "bodyEmptyComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, bodyMoreItemsHintComponent: { classPropertyName: "bodyMoreItemsHintComponent", publicName: "bodyMoreItemsHintComponent", isSignal: true, isRequired: false, transformFunction: null }, bodyMoreItemsHintComponentInputs: { classPropertyName: "bodyMoreItemsHintComponentInputs", publicName: "bodyMoreItemsHintComponentInputs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", optionClick: "optionClick" }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.2", type: ComboboxDirective, isStandalone: true, inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: false, isRequired: false, transformFunction: null }, filterInternal: { classPropertyName: "filterInternal", publicName: "filterInternal", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: false, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, bodyEmptyText: { classPropertyName: "bodyEmptyText", publicName: "bodyEmptyText", isSignal: false, isRequired: false, transformFunction: null }, bodyMoreItemsHintText: { classPropertyName: "bodyMoreItemsHintText", publicName: "bodyMoreItemsHintText", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: false, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: false, isRequired: false, transformFunction: null }, bindKey: { classPropertyName: "bindKey", publicName: "bindKey", isSignal: false, isRequired: false, transformFunction: null }, bindDisabled: { classPropertyName: "bindDisabled", publicName: "bindDisabled", isSignal: false, isRequired: false, transformFunction: null }, allowCustomValues: { classPropertyName: "allowCustomValues", publicName: "allowCustomValues", isSignal: false, isRequired: false, transformFunction: null }, showBodyMoreItemsHint: { classPropertyName: "showBodyMoreItemsHint", publicName: "showBodyMoreItemsHint", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, optionComponent: { classPropertyName: "optionComponent", publicName: "optionComponent", isSignal: true, isRequired: false, transformFunction: null }, optionComponentInputs: { classPropertyName: "optionComponentInputs", publicName: "optionComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, selectedOptionComponent: { classPropertyName: "selectedOptionComponent", publicName: "selectedOptionComponent", isSignal: true, isRequired: false, transformFunction: null }, bodyErrorComponentInputs: { classPropertyName: "bodyErrorComponentInputs", publicName: "bodyErrorComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, bodyErrorComponent: { classPropertyName: "bodyErrorComponent", publicName: "bodyErrorComponent", isSignal: true, isRequired: false, transformFunction: null }, selectedOptionComponentInputs: { classPropertyName: "selectedOptionComponentInputs", publicName: "selectedOptionComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, bodyLoadingComponent: { classPropertyName: "bodyLoadingComponent", publicName: "bodyLoadingComponent", isSignal: true, isRequired: false, transformFunction: null }, bodyLoadingComponentInputs: { classPropertyName: "bodyLoadingComponentInputs", publicName: "bodyLoadingComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, bodyEmptyComponent: { classPropertyName: "bodyEmptyComponent", publicName: "bodyEmptyComponent", isSignal: true, isRequired: false, transformFunction: null }, bodyEmptyComponentInputs: { classPropertyName: "bodyEmptyComponentInputs", publicName: "bodyEmptyComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, bodyMoreItemsHintComponent: { classPropertyName: "bodyMoreItemsHintComponent", publicName: "bodyMoreItemsHintComponent", isSignal: true, isRequired: false, transformFunction: null }, bodyMoreItemsHintComponentInputs: { classPropertyName: "bodyMoreItemsHintComponentInputs", publicName: "bodyMoreItemsHintComponentInputs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", optionClick: "optionClick", userInteraction: "userInteraction" }, providers: [
             {
                 provide: COMBOBOX_TOKEN,
                 useExisting: ComboboxDirective,
@@ -10531,6 +10534,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImpor
                 type: Output
             }], optionClick: [{
                 type: Output
+            }], userInteraction: [{
+                type: Output
             }], optionTemplate: [{
                 type: ContentChild,
                 args: [COMBOBOX_OPTION_TEMPLATE_TOKEN, { read: TemplateRef }]
@@ -10584,6 +10589,7 @@ class ComboboxOptionComponent {
         this.combobox.writeValueFromOption(this.option());
         this.combobox.focus();
         this.combobox.optionClick.emit(this.option());
+        this.combobox.userInteraction.emit();
     }
     _ignoreBlur() {
         this.combobox._ignoreNextBlurEvent();
@@ -10683,7 +10689,7 @@ class ComboboxComponent extends DecoratedInputBase {
         this.combobox.setBodyComponent(ComboboxBodyComponent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.2", type: ComboboxComponent, isStandalone: true, selector: "et-combobox", host: { listeners: { "click": "combobox.selectInputAndOpen()" }, classAttribute: "et-combobox" }, providers: [provideIcons(CHEVRON_ICON, TIMES_ICON)], usesInheritance: true, hostDirectives: [{ directive: i1.AnimatedOverlayDirective }, { directive: OverlayCloseBlockerDirective }, { directive: InputDirective, inputs: ["placeholder", "placeholder"] }, { directive: ComboboxDirective, inputs: ["options", "options", "initialValue", "initialValue", "filterInternal", "filterInternal", "loading", "loading", "error", "error", "emptyText", "emptyText", "placeholder", "placeholder", "multiple", "multiple", "bindLabel", "bindLabel", "bindValue", "bindValue", "bindDisabled", "bindDisabled", "allowCustomValues", "allowCustomValues", "selectedOptionComponent", "selectedOptionComponent", "optionComponent", "optionComponent", "bodyErrorComponent", "bodyErrorComponent", "bodyLoadingComponent", "bodyLoadingComponent", "bodyEmptyComponent", "bodyEmptyComponent", "bodyMoreItemsHintComponent", "bodyMoreItemsHintComponent", "showBodyMoreItemsHint", "showBodyMoreItemsHint", "bodyEmptyText", "bodyEmptyText", "bodyMoreItemsHintText", "bodyMoreItemsHintText", "optionComponentInputs", "optionComponentInputs", "selectedOptionComponentInputs", "selectedOptionComponentInputs", "bodyErrorComponentInputs", "bodyErrorComponentInputs", "bodyLoadingComponentInputs", "bodyLoadingComponentInputs", "bodyEmptyComponentInputs", "bodyEmptyComponentInputs", "bodyMoreItemsHintComponentInputs", "bodyMoreItemsHintComponentInputs"], outputs: ["filterChange", "filterChange", "optionClick", "optionClick"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<div>\n  @if (combobox.multiple$ | async) {\n    <div class=\"et-combobox-selected-options\">\n      @for (item of combobox.selectedOptions$ | async; track combobox.trackByOptionKeyFn($index, item)) {\n        <div class=\"et-combobox-selected-option\" aria-hidden=\"true\">\n          @if (combobox.customSelectedOptionTpl$ | async; as customSelectedOptionTpl) {\n            <ng-container *ngTemplateOutlet=\"customSelectedOptionTpl; context: { option: item }\" />\n          } @else {\n            @if (combobox.selectedOptionComponent(); as comp) {\n              <ng-container\n                *ngComponentOutlet=\"comp; inputs: combobox.combineSelectedOptionWithComponentInputs(item)\"\n              />\n            } @else {\n              {{ combobox.getOptionLabel(item) | async }}\n            }\n          }\n\n          <button\n            [disabled]=\"input.disabled\"\n            (click)=\"combobox.removeSelectedOption(item); $event.stopPropagation(); combobox.focus()\"\n            class=\"et-combobox-selected-option-remove\"\n            tabindex=\"-1\"\n            type=\"button\"\n          >\n            x\n          </button>\n        </div>\n      }\n      <div class=\"et-combobox-muliple-input\">\n        <ng-container *ngTemplateOutlet=\"inputTpl\" />\n      </div>\n    </div>\n  }\n\n  <ng-template #inputTpl>\n    <input\n      [disabled]=\"input.disabled\"\n      [attr.id]=\"input.id\"\n      [attr.aria-required]=\"(input.required$ | async) || null\"\n      [attr.aria-disabled]=\"(input.disabled$ | async) || null\"\n      [attr.aria-invalid]=\"(input.invalid$ | async) || null\"\n      [attr.aria-expanded]=\"combobox.isOpen$ | async\"\n      [attr.aria-describedby]=\"input.describedBy$ | async\"\n      [attr.placeholder]=\"input.placeholder || null\"\n      [attr.aria-activedescendant]=\"combobox.activeOptionId$ | async\"\n      [attr.aria-controls]=\"(combobox.selectBodyId$ | async) || null\"\n      [attr.aria-owns]=\"(combobox.selectBodyId$ | async) || null\"\n      (keydown)=\"combobox._processKeydownEvent($event)\"\n      (keyup)=\"combobox._processKeyupEvent()\"\n      (click)=\"combobox.open()\"\n      (blur)=\"combobox._handleBlurEvent()\"\n      (input)=\"combobox._processInputEvent($event)\"\n      class=\"et-combobox-wrapper\"\n      autocomplete=\"off\"\n      aria-haspopup=\"listbox\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      type=\"text\"\n      value=\"{{ combobox.currentFilter }}\"\n      etNativeInputRef\n    />\n  </ng-template>\n\n  @if ((combobox.multiple$ | async) === false) {\n    <ng-container *ngTemplateOutlet=\"inputTpl\" />\n  }\n\n  @if (\n    ((combobox.multiple$ | async) === false && combobox.currentFilter) || (combobox.selectedOptions$ | async)?.length\n  ) {\n    <button\n      [disabled]=\"input.disabled\"\n      (click)=\"combobox.clearValue(); $event.stopPropagation(); combobox.focus()\"\n      class=\"et-combobox-clear\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i class=\"et-combobox-clear-icon\" etIcon=\"et-times\"></i>\n    </button>\n  }\n  <i class=\"et-combobox-chevron\" etIcon=\"et-chevron\"></i>\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}.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}:where(.et-combobox-clear){display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:40px;inset-block-start:7px;background-color:transparent;border:none;color:#fff;padding:0}:where(.et-combobox-clear) .et-times-icon{display:block;inline-size:15px;block-size:15px}\n"], dependencies: [{ kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "allowHardcodedColor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.2", type: ComboboxComponent, isStandalone: true, selector: "et-combobox", host: { listeners: { "click": "combobox.selectInputAndOpen()" }, classAttribute: "et-combobox" }, providers: [provideIcons(CHEVRON_ICON, TIMES_ICON)], usesInheritance: true, hostDirectives: [{ directive: i1.AnimatedOverlayDirective }, { directive: OverlayCloseBlockerDirective }, { directive: InputDirective, inputs: ["placeholder", "placeholder"] }, { directive: ComboboxDirective, inputs: ["options", "options", "initialValue", "initialValue", "filterInternal", "filterInternal", "loading", "loading", "error", "error", "emptyText", "emptyText", "placeholder", "placeholder", "multiple", "multiple", "bindLabel", "bindLabel", "bindValue", "bindValue", "bindDisabled", "bindDisabled", "allowCustomValues", "allowCustomValues", "selectedOptionComponent", "selectedOptionComponent", "optionComponent", "optionComponent", "bodyErrorComponent", "bodyErrorComponent", "bodyLoadingComponent", "bodyLoadingComponent", "bodyEmptyComponent", "bodyEmptyComponent", "bodyMoreItemsHintComponent", "bodyMoreItemsHintComponent", "showBodyMoreItemsHint", "showBodyMoreItemsHint", "bodyEmptyText", "bodyEmptyText", "bodyMoreItemsHintText", "bodyMoreItemsHintText", "optionComponentInputs", "optionComponentInputs", "selectedOptionComponentInputs", "selectedOptionComponentInputs", "bodyErrorComponentInputs", "bodyErrorComponentInputs", "bodyLoadingComponentInputs", "bodyLoadingComponentInputs", "bodyEmptyComponentInputs", "bodyEmptyComponentInputs", "bodyMoreItemsHintComponentInputs", "bodyMoreItemsHintComponentInputs"], outputs: ["filterChange", "filterChange", "optionClick", "optionClick", "userInteraction", "userInteraction"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<div>\n  @if (combobox.multiple$ | async) {\n    <div class=\"et-combobox-selected-options\">\n      @for (item of combobox.selectedOptions$ | async; track combobox.trackByOptionKeyFn($index, item)) {\n        <div class=\"et-combobox-selected-option\" aria-hidden=\"true\">\n          @if (combobox.customSelectedOptionTpl$ | async; as customSelectedOptionTpl) {\n            <ng-container *ngTemplateOutlet=\"customSelectedOptionTpl; context: { option: item }\" />\n          } @else {\n            @if (combobox.selectedOptionComponent(); as comp) {\n              <ng-container\n                *ngComponentOutlet=\"comp; inputs: combobox.combineSelectedOptionWithComponentInputs(item)\"\n              />\n            } @else {\n              {{ combobox.getOptionLabel(item) | async }}\n            }\n          }\n\n          <button\n            [disabled]=\"input.disabled\"\n            (click)=\"combobox.removeSelectedOption(item); $event.stopPropagation(); combobox.focus()\"\n            class=\"et-combobox-selected-option-remove\"\n            tabindex=\"-1\"\n            type=\"button\"\n          >\n            x\n          </button>\n        </div>\n      }\n      <div class=\"et-combobox-muliple-input\">\n        <ng-container *ngTemplateOutlet=\"inputTpl\" />\n      </div>\n    </div>\n  }\n\n  <ng-template #inputTpl>\n    <input\n      [disabled]=\"input.disabled\"\n      [attr.id]=\"input.id\"\n      [attr.aria-required]=\"(input.required$ | async) || null\"\n      [attr.aria-disabled]=\"(input.disabled$ | async) || null\"\n      [attr.aria-invalid]=\"(input.invalid$ | async) || null\"\n      [attr.aria-expanded]=\"combobox.isOpen$ | async\"\n      [attr.aria-describedby]=\"input.describedBy$ | async\"\n      [attr.placeholder]=\"input.placeholder || null\"\n      [attr.aria-activedescendant]=\"combobox.activeOptionId$ | async\"\n      [attr.aria-controls]=\"(combobox.selectBodyId$ | async) || null\"\n      [attr.aria-owns]=\"(combobox.selectBodyId$ | async) || null\"\n      (keydown)=\"combobox._processKeydownEvent($event)\"\n      (keyup)=\"combobox._processKeyupEvent()\"\n      (click)=\"combobox.open()\"\n      (blur)=\"combobox._handleBlurEvent()\"\n      (input)=\"combobox._processInputEvent($event)\"\n      class=\"et-combobox-wrapper\"\n      autocomplete=\"off\"\n      aria-haspopup=\"listbox\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      type=\"text\"\n      value=\"{{ combobox.currentFilter }}\"\n      etNativeInputRef\n    />\n  </ng-template>\n\n  @if ((combobox.multiple$ | async) === false) {\n    <ng-container *ngTemplateOutlet=\"inputTpl\" />\n  }\n\n  @if (\n    ((combobox.multiple$ | async) === false && combobox.currentFilter) || (combobox.selectedOptions$ | async)?.length\n  ) {\n    <button\n      [disabled]=\"input.disabled\"\n      (click)=\"combobox.clearValue(); $event.stopPropagation(); combobox.focus()\"\n      class=\"et-combobox-clear\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i class=\"et-combobox-clear-icon\" etIcon=\"et-times\"></i>\n    </button>\n  }\n  <i class=\"et-combobox-chevron\" etIcon=\"et-chevron\"></i>\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}.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}:where(.et-combobox-clear){display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:40px;inset-block-start:7px;background-color:transparent;border:none;color:#fff;padding:0}:where(.et-combobox-clear) .et-times-icon{display:block;inline-size:15px;block-size:15px}\n"], dependencies: [{ kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "allowHardcodedColor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
@@ -10725,7 +10731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImpor
                                 'bodyEmptyComponentInputs',
                                 'bodyMoreItemsHintComponentInputs',
                             ],
-                            outputs: ['filterChange', 'optionClick'],
+                            outputs: ['filterChange', 'optionClick', 'userInteraction'],
                         },
                     ], providers: [provideIcons(CHEVRON_ICON, TIMES_ICON)], template: "<ng-content select=\"[etInputPrefix]\" />\n\n<div>\n  @if (combobox.multiple$ | async) {\n    <div class=\"et-combobox-selected-options\">\n      @for (item of combobox.selectedOptions$ | async; track combobox.trackByOptionKeyFn($index, item)) {\n        <div class=\"et-combobox-selected-option\" aria-hidden=\"true\">\n          @if (combobox.customSelectedOptionTpl$ | async; as customSelectedOptionTpl) {\n            <ng-container *ngTemplateOutlet=\"customSelectedOptionTpl; context: { option: item }\" />\n          } @else {\n            @if (combobox.selectedOptionComponent(); as comp) {\n              <ng-container\n                *ngComponentOutlet=\"comp; inputs: combobox.combineSelectedOptionWithComponentInputs(item)\"\n              />\n            } @else {\n              {{ combobox.getOptionLabel(item) | async }}\n            }\n          }\n\n          <button\n            [disabled]=\"input.disabled\"\n            (click)=\"combobox.removeSelectedOption(item); $event.stopPropagation(); combobox.focus()\"\n            class=\"et-combobox-selected-option-remove\"\n            tabindex=\"-1\"\n            type=\"button\"\n          >\n            x\n          </button>\n        </div>\n      }\n      <div class=\"et-combobox-muliple-input\">\n        <ng-container *ngTemplateOutlet=\"inputTpl\" />\n      </div>\n    </div>\n  }\n\n  <ng-template #inputTpl>\n    <input\n      [disabled]=\"input.disabled\"\n      [attr.id]=\"input.id\"\n      [attr.aria-required]=\"(input.required$ | async) || null\"\n      [attr.aria-disabled]=\"(input.disabled$ | async) || null\"\n      [attr.aria-invalid]=\"(input.invalid$ | async) || null\"\n      [attr.aria-expanded]=\"combobox.isOpen$ | async\"\n      [attr.aria-describedby]=\"input.describedBy$ | async\"\n      [attr.placeholder]=\"input.placeholder || null\"\n      [attr.aria-activedescendant]=\"combobox.activeOptionId$ | async\"\n      [attr.aria-controls]=\"(combobox.selectBodyId$ | async) || null\"\n      [attr.aria-owns]=\"(combobox.selectBodyId$ | async) || null\"\n      (keydown)=\"combobox._processKeydownEvent($event)\"\n      (keyup)=\"combobox._processKeyupEvent()\"\n      (click)=\"combobox.open()\"\n      (blur)=\"combobox._handleBlurEvent()\"\n      (input)=\"combobox._processInputEvent($event)\"\n      class=\"et-combobox-wrapper\"\n      autocomplete=\"off\"\n      aria-haspopup=\"listbox\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      type=\"text\"\n      value=\"{{ combobox.currentFilter }}\"\n      etNativeInputRef\n    />\n  </ng-template>\n\n  @if ((combobox.multiple$ | async) === false) {\n    <ng-container *ngTemplateOutlet=\"inputTpl\" />\n  }\n\n  @if (\n    ((combobox.multiple$ | async) === false && combobox.currentFilter) || (combobox.selectedOptions$ | async)?.length\n  ) {\n    <button\n      [disabled]=\"input.disabled\"\n      (click)=\"combobox.clearValue(); $event.stopPropagation(); combobox.focus()\"\n      class=\"et-combobox-clear\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i class=\"et-combobox-clear-icon\" etIcon=\"et-times\"></i>\n    </button>\n  }\n  <i class=\"et-combobox-chevron\" etIcon=\"et-chevron\"></i>\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}.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}:where(.et-combobox-clear){display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:40px;inset-block-start:7px;background-color:transparent;border:none;color:#fff;padding:0}:where(.et-combobox-clear) .et-times-icon{display:block;inline-size:15px;block-size:15px}\n"] }]
         }], ctorParameters: () => [] });
@@ -10958,6 +10964,7 @@ class SelectOptionDirective {
         this._select.writeValueFromOption(this);
         this._select.focus();
         this._select.optionClick.emit(this.value);
+        this._select.userInteraction.emit();
     }
     _updateViewValue() {
         this._viewValue$.next(this._elementRef.nativeElement.textContent?.trim() ?? '');
@@ -11026,6 +11033,7 @@ class SelectDirective {
         this._selectionModel = new SelectionModel();
         this._activeSelectionModel = new ActiveSelectionModel();
         this.optionClick = new EventEmitter();
+        this.userInteraction = new EventEmitter();
         this._selectOptionsQueryList$ = new BehaviorSubject(null);
         this.selectBodyId$ = this._selectBodyId$.asObservable();
         this.isOpen$ = this._isOpen$.asObservable();
@@ -11250,7 +11258,9 @@ class SelectDirective {
                 if (type === 'toggle') {
                     this._selectionModel.toggleSelectedOption(option);
                 }
+                this.optionClick.emit(option.value);
             }
+            this.userInteraction.emit();
         }
     }
     _closeBodyOnDisable() {
@@ -11263,7 +11273,7 @@ class SelectDirective {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: SelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.2", type: SelectDirective, isStandalone: true, inputs: { multiple: "multiple", emptyText: "emptyText" }, outputs: { optionClick: "optionClick" }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.2", type: SelectDirective, isStandalone: true, inputs: { multiple: "multiple", emptyText: "emptyText" }, outputs: { optionClick: "optionClick", userInteraction: "userInteraction" }, providers: [
             {
                 provide: SELECT_TOKEN,
                 useExisting: SelectDirective,
@@ -11288,6 +11298,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImpor
                 type: Input
             }], optionClick: [{
                 type: Output
+            }], userInteraction: [{
+                type: Output
             }], _selectOptionsQueryList: [{
                 type: ContentChildren,
                 args: [SELECT_OPTION_TOKEN, { descendants: true }]
@@ -11387,7 +11399,7 @@ class SelectComponent extends DecoratedInputBase {
         this.select.setSelectBody({ component: SelectBodyComponent, template: this.selectBodyTpl });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.2", type: SelectComponent, isStandalone: true, selector: "et-select", host: { classAttribute: "et-select" }, providers: [provideIcons(CHEVRON_ICON, TIMES_ICON)], viewQueries: [{ propertyName: "selectBodyTpl", first: true, predicate: ["selectBodyTpl"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: InputDirective }, { directive: SelectDirective, inputs: ["multiple", "multiple", "emptyText", "emptyText"], outputs: ["optionClick", "optionClick"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<div class=\"et-select-wrapper\">\n  <div\n    #inputElement\n    [attr.id]=\"input.id\"\n    [attr.aria-labelledby]=\"select.labelledBy$ | async\"\n    [attr.aria-describedby]=\"input.describedBy$ | async\"\n    [attr.tabindex]=\"(input.disabled$ | async) ? -1 : 0\"\n    [attr.aria-required]=\"(input.required$ | async) || null\"\n    [attr.aria-disabled]=\"(input.disabled$ | async) || null\"\n    [attr.aria-invalid]=\"(input.invalid$ | async) || null\"\n    [attr.aria-controls]=\"(select.selectBodyId$ | async) || null\"\n    [attr.aria-owns]=\"(select.owns$ | async) || null\"\n    [attr.aria-expanded]=\"select.isOpen$ | async\"\n    [attr.aria-activedescendant]=\"select.activeDescendant$ | async\"\n    (click)=\"select.open()\"\n    (keydown)=\"select._processKeydownEvent($event)\"\n    (blur)=\"select._controlTouched()\"\n    class=\"et-select-input et-select-input--static\"\n    aria-haspopup=\"listbox\"\n    role=\"combobox\"\n    aria-autocomplete=\"none\"\n  >\n    <span\n      [attr.id]=\"select.selectCurrentValueId\"\n      [class.cdk-visually-hidden]=\"select._selectionModel.allowMultiple && select.ariaViewValue()\"\n      class=\"et-select-current-value\"\n    >\n      @if (select.ariaViewValue()) {\n        {{ select.ariaViewValue() }}\n      } @else {\n        {{ select.emptyText }}\n      }\n    </span>\n\n    @if (select._selectionModel.allowMultiple) {\n      @if (select._selectionModel.selection$ | async; as selectedOptions) {\n        @if (selectedOptions.length) {\n          <ul class=\"et-select-selected-options\" aria-hidden=\"true\">\n            @for (opt of selectedOptions; track select.trackByFn($index, opt)) {\n              <li class=\"et-select-selected-option\">\n                {{ opt.viewValue$ | async }}\n                <button\n                  [disabled]=\"input.disabled\"\n                  (click)=\"$event.stopPropagation(); select.removeOptionFromSelection(opt); select.focus()\"\n                  class=\"et-select-selected-option-remove\"\n                  tabindex=\"-1\"\n                  type=\"button\"\n                ></button>\n              </li>\n            }\n          </ul>\n        }\n      }\n    }\n  </div>\n\n  @if (select.ariaViewValue() || (select._selectionModel.selection$ | async)?.length) {\n    <button\n      [disabled]=\"input.disabled\"\n      (click)=\"select.clearValue(); $event.stopPropagation(); select.focus()\"\n      class=\"et-select-clear\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i class=\"et-select-clear-icon\" etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <i class=\"et-select-chevron\" etIcon=\"et-chevron\"></i>\n</div>\n\n<ng-content select=\"[etInputSuffix]\" />\n\n<ng-template #selectBodyTpl>\n  <ng-content />\n</ng-template>\n", styles: [".et-select{display:block;border:1px solid #ccc;padding:15px;position:relative}.et-select-input{position:absolute;inset:0}.et-select-option{display:block}.et-select-chevron{transform:rotate(180deg);display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:15px;inset-block-start:7px}:where(.et-select-clear){display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:40px;inset-block-start:7px;background-color:transparent;border:none;color:#fff;padding:0}:where(.et-select-clear) .et-times-icon{display:block;inline-size:15px;block-size:15px}.et-select-option--active{background-color:#1f1f1f}.et-select-option--selected{font-weight:700}.et-select-selected-options{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:5px}\n"], dependencies: [{ kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "allowHardcodedColor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.2", type: SelectComponent, isStandalone: true, selector: "et-select", host: { classAttribute: "et-select" }, providers: [provideIcons(CHEVRON_ICON, TIMES_ICON)], viewQueries: [{ propertyName: "selectBodyTpl", first: true, predicate: ["selectBodyTpl"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: InputDirective }, { directive: SelectDirective, inputs: ["multiple", "multiple", "emptyText", "emptyText"], outputs: ["optionClick", "optionClick", "userInteraction", "userInteraction"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<div class=\"et-select-wrapper\">\n  <div\n    #inputElement\n    [attr.id]=\"input.id\"\n    [attr.aria-labelledby]=\"select.labelledBy$ | async\"\n    [attr.aria-describedby]=\"input.describedBy$ | async\"\n    [attr.tabindex]=\"(input.disabled$ | async) ? -1 : 0\"\n    [attr.aria-required]=\"(input.required$ | async) || null\"\n    [attr.aria-disabled]=\"(input.disabled$ | async) || null\"\n    [attr.aria-invalid]=\"(input.invalid$ | async) || null\"\n    [attr.aria-controls]=\"(select.selectBodyId$ | async) || null\"\n    [attr.aria-owns]=\"(select.owns$ | async) || null\"\n    [attr.aria-expanded]=\"select.isOpen$ | async\"\n    [attr.aria-activedescendant]=\"select.activeDescendant$ | async\"\n    (click)=\"select.open()\"\n    (keydown)=\"select._processKeydownEvent($event)\"\n    (blur)=\"select._controlTouched()\"\n    class=\"et-select-input et-select-input--static\"\n    aria-haspopup=\"listbox\"\n    role=\"combobox\"\n    aria-autocomplete=\"none\"\n  >\n    <span\n      [attr.id]=\"select.selectCurrentValueId\"\n      [class.cdk-visually-hidden]=\"select._selectionModel.allowMultiple && select.ariaViewValue()\"\n      class=\"et-select-current-value\"\n    >\n      @if (select.ariaViewValue()) {\n        {{ select.ariaViewValue() }}\n      } @else {\n        {{ select.emptyText }}\n      }\n    </span>\n\n    @if (select._selectionModel.allowMultiple) {\n      @if (select._selectionModel.selection$ | async; as selectedOptions) {\n        @if (selectedOptions.length) {\n          <ul class=\"et-select-selected-options\" aria-hidden=\"true\">\n            @for (opt of selectedOptions; track select.trackByFn($index, opt)) {\n              <li class=\"et-select-selected-option\">\n                {{ opt.viewValue$ | async }}\n                <button\n                  [disabled]=\"input.disabled\"\n                  (click)=\"$event.stopPropagation(); select.removeOptionFromSelection(opt); select.focus()\"\n                  class=\"et-select-selected-option-remove\"\n                  tabindex=\"-1\"\n                  type=\"button\"\n                ></button>\n              </li>\n            }\n          </ul>\n        }\n      }\n    }\n  </div>\n\n  @if (select.ariaViewValue() || (select._selectionModel.selection$ | async)?.length) {\n    <button\n      [disabled]=\"input.disabled\"\n      (click)=\"select.clearValue(); $event.stopPropagation(); select.focus()\"\n      class=\"et-select-clear\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i class=\"et-select-clear-icon\" etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <i class=\"et-select-chevron\" etIcon=\"et-chevron\"></i>\n</div>\n\n<ng-content select=\"[etInputSuffix]\" />\n\n<ng-template #selectBodyTpl>\n  <ng-content />\n</ng-template>\n", styles: [".et-select{display:block;border:1px solid #ccc;padding:15px;position:relative}.et-select-input{position:absolute;inset:0}.et-select-option{display:block}.et-select-chevron{transform:rotate(180deg);display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:15px;inset-block-start:7px}:where(.et-select-clear){display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:40px;inset-block-start:7px;background-color:transparent;border:none;color:#fff;padding:0}:where(.et-select-clear) .et-times-icon{display:block;inline-size:15px;block-size:15px}.et-select-option--active{background-color:#1f1f1f}.et-select-option--selected{font-weight:700}.et-select-selected-options{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:5px}\n"], dependencies: [{ kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "allowHardcodedColor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -11395,7 +11407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImpor
                         class: 'et-select',
                     }, imports: [AsyncPipe, IconDirective], hostDirectives: [
                         { directive: InputDirective },
-                        { directive: SelectDirective, inputs: ['multiple', 'emptyText'], outputs: ['optionClick'] },
+                        { directive: SelectDirective, inputs: ['multiple', 'emptyText'], outputs: ['optionClick', 'userInteraction'] },
                     ], providers: [provideIcons(CHEVRON_ICON, TIMES_ICON)], template: "<ng-content select=\"[etInputPrefix]\" />\n\n<div class=\"et-select-wrapper\">\n  <div\n    #inputElement\n    [attr.id]=\"input.id\"\n    [attr.aria-labelledby]=\"select.labelledBy$ | async\"\n    [attr.aria-describedby]=\"input.describedBy$ | async\"\n    [attr.tabindex]=\"(input.disabled$ | async) ? -1 : 0\"\n    [attr.aria-required]=\"(input.required$ | async) || null\"\n    [attr.aria-disabled]=\"(input.disabled$ | async) || null\"\n    [attr.aria-invalid]=\"(input.invalid$ | async) || null\"\n    [attr.aria-controls]=\"(select.selectBodyId$ | async) || null\"\n    [attr.aria-owns]=\"(select.owns$ | async) || null\"\n    [attr.aria-expanded]=\"select.isOpen$ | async\"\n    [attr.aria-activedescendant]=\"select.activeDescendant$ | async\"\n    (click)=\"select.open()\"\n    (keydown)=\"select._processKeydownEvent($event)\"\n    (blur)=\"select._controlTouched()\"\n    class=\"et-select-input et-select-input--static\"\n    aria-haspopup=\"listbox\"\n    role=\"combobox\"\n    aria-autocomplete=\"none\"\n  >\n    <span\n      [attr.id]=\"select.selectCurrentValueId\"\n      [class.cdk-visually-hidden]=\"select._selectionModel.allowMultiple && select.ariaViewValue()\"\n      class=\"et-select-current-value\"\n    >\n      @if (select.ariaViewValue()) {\n        {{ select.ariaViewValue() }}\n      } @else {\n        {{ select.emptyText }}\n      }\n    </span>\n\n    @if (select._selectionModel.allowMultiple) {\n      @if (select._selectionModel.selection$ | async; as selectedOptions) {\n        @if (selectedOptions.length) {\n          <ul class=\"et-select-selected-options\" aria-hidden=\"true\">\n            @for (opt of selectedOptions; track select.trackByFn($index, opt)) {\n              <li class=\"et-select-selected-option\">\n                {{ opt.viewValue$ | async }}\n                <button\n                  [disabled]=\"input.disabled\"\n                  (click)=\"$event.stopPropagation(); select.removeOptionFromSelection(opt); select.focus()\"\n                  class=\"et-select-selected-option-remove\"\n                  tabindex=\"-1\"\n                  type=\"button\"\n                ></button>\n              </li>\n            }\n          </ul>\n        }\n      }\n    }\n  </div>\n\n  @if (select.ariaViewValue() || (select._selectionModel.selection$ | async)?.length) {\n    <button\n      [disabled]=\"input.disabled\"\n      (click)=\"select.clearValue(); $event.stopPropagation(); select.focus()\"\n      class=\"et-select-clear\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i class=\"et-select-clear-icon\" etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <i class=\"et-select-chevron\" etIcon=\"et-chevron\"></i>\n</div>\n\n<ng-content select=\"[etInputSuffix]\" />\n\n<ng-template #selectBodyTpl>\n  <ng-content />\n</ng-template>\n", styles: [".et-select{display:block;border:1px solid #ccc;padding:15px;position:relative}.et-select-input{position:absolute;inset:0}.et-select-option{display:block}.et-select-chevron{transform:rotate(180deg);display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:15px;inset-block-start:7px}:where(.et-select-clear){display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:40px;inset-block-start:7px;background-color:transparent;border:none;color:#fff;padding:0}:where(.et-select-clear) .et-times-icon{display:block;inline-size:15px;block-size:15px}.et-select-option--active{background-color:#1f1f1f}.et-select-option--selected{font-weight:700}.et-select-selected-options{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:5px}\n"] }]
         }], propDecorators: { selectBodyTpl: [{
                 type: ViewChild,