@ethlete/cdk 3.3.1 → 3.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/esm2022/lib/components/button/components/query-button/query-button.component.mjs +4 -4
  3. package/esm2022/lib/components/button/directives/query-button/query-button.directive.mjs +37 -7
  4. package/esm2022/lib/components/forms/components/select/components/combobox/components/combobox/combobox.component.mjs +33 -470
  5. package/esm2022/lib/components/forms/components/select/components/combobox/directives/combobox/combobox.directive.mjs +466 -8
  6. package/esm2022/lib/components/forms/components/select/components/combobox/directives/combobox-option-template/index.mjs +2 -0
  7. package/esm2022/lib/components/forms/components/select/components/combobox/directives/combobox-selected-option-template/index.mjs +2 -0
  8. package/esm2022/lib/components/forms/components/select/components/combobox/partials/combobox-body/combobox-body.component.mjs +2 -2
  9. package/esm2022/lib/components/forms/components/select/components/combobox/partials/combobox-option/combobox-option.component.mjs +2 -2
  10. package/esm2022/lib/components/forms/components/selection-list/directives/selection-list-option/selection-list-option.directive.mjs +1 -2
  11. package/fesm2022/ethlete-cdk.mjs +243 -197
  12. package/fesm2022/ethlete-cdk.mjs.map +1 -1
  13. package/lib/components/button/components/query-button/query-button.component.d.ts +1 -1
  14. package/lib/components/button/directives/query-button/query-button.directive.d.ts +13 -1
  15. package/lib/components/forms/components/select/components/combobox/components/combobox/combobox.component.d.ts +7 -71
  16. package/lib/components/forms/components/select/components/combobox/directives/combobox/combobox.directive.d.ts +76 -4
  17. package/lib/components/forms/components/select/components/combobox/directives/combobox-option-template/index.d.ts +1 -0
  18. package/lib/components/forms/components/select/components/combobox/directives/combobox-selected-option-template/index.d.ts +1 -0
  19. package/lib/components/forms/components/select/components/combobox/partials/combobox-body/combobox-body.component.d.ts +1 -1
  20. package/lib/components/forms/components/select/components/combobox/partials/combobox-option/combobox-option.component.d.ts +1 -1
  21. package/package.json +2 -2
@@ -4,7 +4,7 @@ import { AsyncPipe, NgIf, NgClass, NgTemplateOutlet, NgForOf, JsonPipe, formatDa
4
4
  import * as i0 from '@angular/core';
5
5
  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';
6
6
  import * as i1$1 from '@ethlete/core';
7
- import { LetDirective, createDestroy, ScrollObserverFirstElementDirective, ScrollObserverLastElementDirective, Memo, createReactiveBindings, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, AT_LEAST_ONE_REQUIRED, equal, ResizeObserverService, createFlipAnimation, ClickOutsideDirective, ANIMATED_LIFECYCLE_TOKEN, AnimatedLifecycleDirective, RuntimeError, AnimatedOverlayDirective, SelectionModel, ActiveSelectionModel, 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';
7
+ 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, 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';
8
8
  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';
9
9
  import { trigger, state, style, transition, animate } from '@angular/animations';
10
10
  import { __decorate, __metadata } from 'tslib';
@@ -1098,6 +1098,24 @@ const CLASSES = {
1098
1098
  failure: 'et-query-button--failure',
1099
1099
  };
1100
1100
  class QueryButtonDirective {
1101
+ get skipSuccess() {
1102
+ return this._skipSuccess;
1103
+ }
1104
+ set skipSuccess(value) {
1105
+ this._skipSuccess = value;
1106
+ }
1107
+ get skipFailure() {
1108
+ return this._skipFailure;
1109
+ }
1110
+ set skipFailure(value) {
1111
+ this._skipFailure = value;
1112
+ }
1113
+ get skipLoading() {
1114
+ return this._skipLoading;
1115
+ }
1116
+ set skipLoading(value) {
1117
+ this._skipLoading = value;
1118
+ }
1101
1119
  get query() {
1102
1120
  return this._query$.value;
1103
1121
  }
@@ -1116,7 +1134,7 @@ class QueryButtonDirective {
1116
1134
  return;
1117
1135
  }
1118
1136
  query.state$.pipe(takeUntil(this._destroy$), takeUntil(this._query$.pipe(skip(1)))).subscribe((state) => {
1119
- if (isQueryStateLoading(state)) {
1137
+ if (isQueryStateLoading(state) && !this._skipLoading) {
1120
1138
  this.isLoading$.next(true);
1121
1139
  classList.add(CLASSES.loading);
1122
1140
  }
@@ -1124,11 +1142,11 @@ class QueryButtonDirective {
1124
1142
  this.isLoading$.next(false);
1125
1143
  classList.remove(CLASSES.loading);
1126
1144
  }
1127
- if (isQueryStateSuccess(state)) {
1145
+ if (isQueryStateSuccess(state) && !this._skipSuccess) {
1128
1146
  this.showSuccess$.next(true);
1129
1147
  classList.add(CLASSES.success);
1130
1148
  }
1131
- else if (isQueryStateFailure(state)) {
1149
+ else if (isQueryStateFailure(state) && !this._skipFailure) {
1132
1150
  this.showFailure$.next(true);
1133
1151
  classList.add(CLASSES.failure);
1134
1152
  }
@@ -1157,6 +1175,9 @@ class QueryButtonDirective {
1157
1175
  this.showFailure$ = new BehaviorSubject(false);
1158
1176
  this.didLoadOnce$ = new BehaviorSubject(false);
1159
1177
  this.isLoading$ = new BehaviorSubject(false);
1178
+ this._skipSuccess = false;
1179
+ this._skipFailure = false;
1180
+ this._skipLoading = false;
1160
1181
  this._query$ = new BehaviorSubject(null);
1161
1182
  this._bindings = createReactiveBindings({
1162
1183
  attribute: ['disabled', 'aria-disabled'],
@@ -1183,7 +1204,7 @@ class QueryButtonDirective {
1183
1204
  this._button._removeDisabledBindings();
1184
1205
  }
1185
1206
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: QueryButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1186
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: QueryButtonDirective, isStandalone: true, inputs: { query: "query" }, exportAs: ["etQueryButton"], ngImport: i0 }); }
1207
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: QueryButtonDirective, isStandalone: true, inputs: { skipSuccess: ["skipSuccess", "skipSuccess", booleanAttribute], skipFailure: ["skipFailure", "skipFailure", booleanAttribute], skipLoading: ["skipLoading", "skipLoading", booleanAttribute], query: "query" }, exportAs: ["etQueryButton"], ngImport: i0 }); }
1187
1208
  }
1188
1209
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: QueryButtonDirective, decorators: [{
1189
1210
  type: Directive,
@@ -1191,7 +1212,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
1191
1212
  standalone: true,
1192
1213
  exportAs: 'etQueryButton',
1193
1214
  }]
1194
- }], ctorParameters: function () { return []; }, propDecorators: { query: [{
1215
+ }], ctorParameters: function () { return []; }, propDecorators: { skipSuccess: [{
1216
+ type: Input,
1217
+ args: [{ transform: booleanAttribute }]
1218
+ }], skipFailure: [{
1219
+ type: Input,
1220
+ args: [{ transform: booleanAttribute }]
1221
+ }], skipLoading: [{
1222
+ type: Input,
1223
+ args: [{ transform: booleanAttribute }]
1224
+ }], query: [{
1195
1225
  type: Input
1196
1226
  }] } });
1197
1227
 
@@ -1214,16 +1244,16 @@ class QueryButtonComponent {
1214
1244
  this.queryButton = inject(QueryButtonDirective);
1215
1245
  }
1216
1246
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: QueryButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1217
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: QueryButtonComponent, isStandalone: true, selector: "[et-query-button]", host: { classAttribute: "et-query-button" }, hostDirectives: [{ directive: QueryButtonDirective, inputs: ["query", "query"] }, { directive: ButtonDirective, inputs: ["disabled", "disabled", "type", "type", "pressed", "pressed"] }], ngImport: i0, template: "<ng-container *etLet=\"queryButton.showSuccess$ | async as showSuccess\">\n <ng-container *etLet=\"queryButton.showFailure$ | async as showFailure\">\n <span *etQuery=\"queryButton.query$ | async; loading as loading\" class=\"et-button-content et-query-button-content\">\n <span\n [attr.aria-hidden]=\"loading || showSuccess || showFailure ? 'true' : undefined\"\n class=\"et-button-text et-query-button-text et-query-button-text--default\"\n >\n <ng-content></ng-content>\n </span>\n\n <span *ngIf=\"loading\" class=\"et-query-button-loading\"> </span>\n <span *ngIf=\"loading\" class=\"et-button-text et-query-button-text et-query-button-text--loading\">Loading</span>\n\n <span *ngIf=\"showSuccess\" class=\"et-button-text et-query-button-text et-query-button-text--success\">Success</span>\n <span *ngIf=\"showFailure\" class=\"et-button-text et-query-button-text et-query-button-text--failure\">Failure</span>\n </span>\n </ng-container>\n</ng-container>\n", styles: [".et-query-button .et-button-content{display:grid}.et-query-button .et-query-button-text,.et-query-button .et-query-button-loading{grid-area:1/1/2/2}.et-query-button.et-query-button--loading .et-query-button-text--default,.et-query-button.et-query-button--success .et-query-button-text--default,.et-query-button.et-query-button--failure .et-query-button-text--default{opacity:0;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: QueryDirective, selector: "[etQuery]", inputs: ["etQuery", "etQueryCache"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LetDirective, selector: "[etLet]", inputs: ["etLet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1247
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: QueryButtonComponent, isStandalone: true, selector: "[et-query-button]", host: { classAttribute: "et-query-button" }, hostDirectives: [{ directive: QueryButtonDirective, inputs: ["query", "query", "skipSuccess", "skipSuccess", "skipFailure", "skipFailure", "skipLoading", "skipLoading"] }, { directive: ButtonDirective, inputs: ["disabled", "disabled", "type", "type", "pressed", "pressed"] }], ngImport: i0, template: "<ng-container *etLet=\"queryButton.showSuccess$ | async as showSuccess\">\n <ng-container *etLet=\"queryButton.showFailure$ | async as showFailure\">\n <span *etQuery=\"queryButton.query$ | async; loading as loading\" class=\"et-button-content et-query-button-content\">\n <span\n [attr.aria-hidden]=\"(loading && !queryButton.skipLoading) || showSuccess || showFailure ? 'true' : undefined\"\n class=\"et-button-text et-query-button-text et-query-button-text--default\"\n >\n <ng-content />\n </span>\n\n <span *ngIf=\"loading && !queryButton.skipLoading\" class=\"et-query-button-loading\"> </span>\n <span\n *ngIf=\"loading && !queryButton.skipLoading\"\n class=\"et-button-text et-query-button-text et-query-button-text--loading\"\n >Loading</span\n >\n\n <span *ngIf=\"showSuccess\" class=\"et-button-text et-query-button-text et-query-button-text--success\">Success</span>\n <span *ngIf=\"showFailure\" class=\"et-button-text et-query-button-text et-query-button-text--failure\">Failure</span>\n </span>\n </ng-container>\n</ng-container>\n", styles: [".et-query-button .et-button-content{display:grid}.et-query-button .et-query-button-text,.et-query-button .et-query-button-loading{grid-area:1/1/2/2}.et-query-button.et-query-button--loading .et-query-button-text--default,.et-query-button.et-query-button--success .et-query-button-text--default,.et-query-button.et-query-button--failure .et-query-button-text--default{opacity:0;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: QueryDirective, selector: "[etQuery]", inputs: ["etQuery", "etQueryCache"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LetDirective, selector: "[etLet]", inputs: ["etLet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1218
1248
  }
1219
1249
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: QueryButtonComponent, decorators: [{
1220
1250
  type: Component,
1221
1251
  args: [{ selector: '[et-query-button]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [
1222
- { directive: QueryButtonDirective, inputs: ['query'] },
1252
+ { directive: QueryButtonDirective, inputs: ['query', 'skipSuccess', 'skipFailure', 'skipLoading'] },
1223
1253
  { directive: ButtonDirective, inputs: ['disabled', 'type', 'pressed'] },
1224
1254
  ], imports: [QueryDirective, AsyncPipe, NgIf, LetDirective], host: {
1225
1255
  class: 'et-query-button',
1226
- }, template: "<ng-container *etLet=\"queryButton.showSuccess$ | async as showSuccess\">\n <ng-container *etLet=\"queryButton.showFailure$ | async as showFailure\">\n <span *etQuery=\"queryButton.query$ | async; loading as loading\" class=\"et-button-content et-query-button-content\">\n <span\n [attr.aria-hidden]=\"loading || showSuccess || showFailure ? 'true' : undefined\"\n class=\"et-button-text et-query-button-text et-query-button-text--default\"\n >\n <ng-content></ng-content>\n </span>\n\n <span *ngIf=\"loading\" class=\"et-query-button-loading\"> </span>\n <span *ngIf=\"loading\" class=\"et-button-text et-query-button-text et-query-button-text--loading\">Loading</span>\n\n <span *ngIf=\"showSuccess\" class=\"et-button-text et-query-button-text et-query-button-text--success\">Success</span>\n <span *ngIf=\"showFailure\" class=\"et-button-text et-query-button-text et-query-button-text--failure\">Failure</span>\n </span>\n </ng-container>\n</ng-container>\n", styles: [".et-query-button .et-button-content{display:grid}.et-query-button .et-query-button-text,.et-query-button .et-query-button-loading{grid-area:1/1/2/2}.et-query-button.et-query-button--loading .et-query-button-text--default,.et-query-button.et-query-button--success .et-query-button-text--default,.et-query-button.et-query-button--failure .et-query-button-text--default{opacity:0;-webkit-user-select:none;user-select:none}\n"] }]
1256
+ }, template: "<ng-container *etLet=\"queryButton.showSuccess$ | async as showSuccess\">\n <ng-container *etLet=\"queryButton.showFailure$ | async as showFailure\">\n <span *etQuery=\"queryButton.query$ | async; loading as loading\" class=\"et-button-content et-query-button-content\">\n <span\n [attr.aria-hidden]=\"(loading && !queryButton.skipLoading) || showSuccess || showFailure ? 'true' : undefined\"\n class=\"et-button-text et-query-button-text et-query-button-text--default\"\n >\n <ng-content />\n </span>\n\n <span *ngIf=\"loading && !queryButton.skipLoading\" class=\"et-query-button-loading\"> </span>\n <span\n *ngIf=\"loading && !queryButton.skipLoading\"\n class=\"et-button-text et-query-button-text et-query-button-text--loading\"\n >Loading</span\n >\n\n <span *ngIf=\"showSuccess\" class=\"et-button-text et-query-button-text et-query-button-text--success\">Success</span>\n <span *ngIf=\"showFailure\" class=\"et-button-text et-query-button-text et-query-button-text--failure\">Failure</span>\n </span>\n </ng-container>\n</ng-container>\n", styles: [".et-query-button .et-button-content{display:grid}.et-query-button .et-query-button-text,.et-query-button .et-query-button-loading{grid-area:1/1/2/2}.et-query-button.et-query-button--loading .et-query-button-text--default,.et-query-button.et-query-button--success .et-query-button-text--default,.et-query-button.et-query-button--failure .et-query-button-text--default{opacity:0;-webkit-user-select:none;user-select:none}\n"] }]
1227
1257
  }] });
1228
1258
 
1229
1259
  const ButtonImports = [ButtonComponent, QueryButtonComponent];
@@ -3593,29 +3623,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
3593
3623
  }]
3594
3624
  }] });
3595
3625
 
3596
- const COMBOBOX_DIR_TOKEN = new InjectionToken('ET_COMBOBOX_INPUT_TOKEN');
3597
- class ComboboxDirective {
3598
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ComboboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
3599
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: ComboboxDirective, isStandalone: true, providers: [
3600
- {
3601
- provide: COMBOBOX_DIR_TOKEN,
3602
- useExisting: ComboboxDirective,
3603
- },
3604
- ], ngImport: i0 }); }
3605
- }
3606
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ComboboxDirective, decorators: [{
3607
- type: Directive,
3608
- args: [{
3609
- standalone: true,
3610
- providers: [
3611
- {
3612
- provide: COMBOBOX_DIR_TOKEN,
3613
- useExisting: ComboboxDirective,
3614
- },
3615
- ],
3616
- }]
3617
- }] });
3618
-
3619
3626
  const isOptionDisabled = (opt) => {
3620
3627
  if (typeof opt === 'object' && opt !== null && 'disabled' in opt) {
3621
3628
  return !!opt.disabled;
@@ -3623,112 +3630,7 @@ const isOptionDisabled = (opt) => {
3623
3630
  return false;
3624
3631
  };
3625
3632
 
3626
- const COMBOBOX_OPTION_TOKEN = new InjectionToken('ET_COMBOBOX_OPTION_TOKEN');
3627
- class ComboboxOptionComponent {
3628
- constructor() {
3629
- this.combobox = inject(COMBOBOX_TOKEN);
3630
- this._option$ = new BehaviorSubject(null);
3631
- this.disabled$ = this._option$.pipe(map((opt) => isOptionDisabled(opt)));
3632
- this.selected$ = this._option$.pipe(switchMap((opt) => this.combobox.isOptionSelected(opt)));
3633
- this.active$ = this._option$.pipe(switchMap((opt) => this.combobox.isOptionActive(opt)));
3634
- this._bindings = createReactiveBindings({
3635
- attribute: 'class.et-combobox-option--selected',
3636
- observable: this.selected$,
3637
- }, {
3638
- attribute: 'class.et-combobox-option--disabled',
3639
- observable: this.disabled$,
3640
- }, {
3641
- attribute: 'class.et-combobox-option--active',
3642
- observable: this.active$,
3643
- });
3644
- }
3645
- get option() {
3646
- return this._option$.value;
3647
- }
3648
- set option(value) {
3649
- this._option$.next(value);
3650
- }
3651
- selectOption() {
3652
- if (isOptionDisabled(this.option)) {
3653
- return;
3654
- }
3655
- this.combobox.writeValueFromOption(this.option);
3656
- }
3657
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ComboboxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3658
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ComboboxOptionComponent, isStandalone: true, selector: "et-combobox-option", inputs: { option: "option" }, host: { listeners: { "click": "selectOption()" }, classAttribute: "et-combobox-option" }, providers: [
3659
- {
3660
- provide: COMBOBOX_OPTION_TOKEN,
3661
- useExisting: ComboboxOptionComponent,
3662
- },
3663
- ], ngImport: i0, template: "<ng-container *ngIf=\"combobox.customOptionTpl$ | async as customOptionTpl; else defaultOptionLabelTpl\">\n <ng-container *ngTemplateOutlet=\"customOptionTpl; context: { option }\" />\n</ng-container>\n\n<ng-template #defaultOptionLabelTpl>\n {{ combobox.getOptionLabel(option) | async }}\n</ng-template>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
3664
- }
3665
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ComboboxOptionComponent, decorators: [{
3666
- type: Component,
3667
- args: [{ selector: 'et-combobox-option', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
3668
- class: 'et-combobox-option',
3669
- '(click)': 'selectOption()',
3670
- }, imports: [AsyncPipe, NgIf, NgTemplateOutlet], hostDirectives: [], providers: [
3671
- {
3672
- provide: COMBOBOX_OPTION_TOKEN,
3673
- useExisting: ComboboxOptionComponent,
3674
- },
3675
- ], template: "<ng-container *ngIf=\"combobox.customOptionTpl$ | async as customOptionTpl; else defaultOptionLabelTpl\">\n <ng-container *ngTemplateOutlet=\"customOptionTpl; context: { option }\" />\n</ng-container>\n\n<ng-template #defaultOptionLabelTpl>\n {{ combobox.getOptionLabel(option) | async }}\n</ng-template>\n" }]
3676
- }], propDecorators: { option: [{
3677
- type: Input,
3678
- args: [{ required: true }]
3679
- }] } });
3680
-
3681
- const COMBOBOX_BODY_TOKEN = new InjectionToken('ET_COMBOBOX_BODY_TOKEN');
3682
- class ComboboxBodyComponent {
3683
- constructor() {
3684
- this._destroy$ = createDestroy();
3685
- this._clickOutside = inject(ClickOutsideDirective);
3686
- this.combobox = inject(COMBOBOX_TOKEN);
3687
- this._bindings = createReactiveBindings({
3688
- attribute: 'class.et-combobox-body--loading',
3689
- observable: this.combobox.loading$,
3690
- }, {
3691
- attribute: 'class.et-combobox-body--multiple',
3692
- observable: this.combobox.multiple$,
3693
- });
3694
- this._bodyTemplate = null;
3695
- }
3696
- ngOnInit() {
3697
- this._clickOutside.etClickOutside
3698
- .pipe(takeUntil(this._destroy$), tap(() => this.combobox.close()))
3699
- .subscribe();
3700
- }
3701
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ComboboxBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3702
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ComboboxBodyComponent, isStandalone: true, selector: "et-combobox-body", host: { classAttribute: "et-combobox-body et-with-default-animation" }, providers: [
3703
- {
3704
- provide: COMBOBOX_BODY_TOKEN,
3705
- useExisting: ComboboxBodyComponent,
3706
- },
3707
- ], viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], hostDirectives: [{ directive: i1$1.ClickOutsideDirective }], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/use-track-by-function -->\n<div class=\"et-combobox-body-container\" etAnimatedLifecycle>\n <ng-container *etLet=\"combobox.options$ | async as options\">\n <p *ngIf=\"!options?.length\" class=\"et-combobox-body--empty\">{{ combobox.emptyText }}</p>\n\n <et-combobox-option *ngFor=\"let option of options\" [option]=\"option\" />\n </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ComboboxOptionComponent, selector: "et-combobox-option", inputs: ["option"] }, { kind: "directive", type: LetDirective, selector: "[etLet]", inputs: ["etLet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", exportAs: ["etAnimatedLifecycle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
3708
- }
3709
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ComboboxBodyComponent, decorators: [{
3710
- type: Component,
3711
- args: [{ selector: 'et-combobox-body', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
3712
- class: 'et-combobox-body et-with-default-animation',
3713
- }, imports: [
3714
- NgTemplateOutlet,
3715
- NgFor,
3716
- ComboboxOptionComponent,
3717
- LetDirective,
3718
- AsyncPipe,
3719
- AnimatedLifecycleDirective,
3720
- NgIf,
3721
- ], hostDirectives: [ClickOutsideDirective], providers: [
3722
- {
3723
- provide: COMBOBOX_BODY_TOKEN,
3724
- useExisting: ComboboxBodyComponent,
3725
- },
3726
- ], template: "<!-- eslint-disable @angular-eslint/template/use-track-by-function -->\n<div class=\"et-combobox-body-container\" etAnimatedLifecycle>\n <ng-container *etLet=\"combobox.options$ | async as options\">\n <p *ngIf=\"!options?.length\" class=\"et-combobox-body--empty\">{{ combobox.emptyText }}</p>\n\n <et-combobox-option *ngFor=\"let option of options\" [option]=\"option\" />\n </ng-container>\n</div>\n" }]
3727
- }], propDecorators: { _animatedLifecycle: [{
3728
- type: ViewChild,
3729
- args: [ANIMATED_LIFECYCLE_TOKEN, { static: true }]
3730
- }] } });
3731
-
3633
+ const COMBOBOX_TOKEN = new InjectionToken('ET_COMBOBOX_INPUT_TOKEN');
3732
3634
  const COMBOBOX_ERRORS = {
3733
3635
  1: 'Expected options to be an array of objects. This is due to "bindLabel" and "bindValue" being set.',
3734
3636
  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.',
@@ -3762,9 +3664,12 @@ const ComboboxOptionType = {
3762
3664
  Primitive: 'primitive',
3763
3665
  Object: 'object',
3764
3666
  };
3765
- const COMBOBOX_TOKEN = new InjectionToken('ET_COMBOBOX_TOKEN');
3766
- class ComboboxComponent extends DecoratedInputBase {
3767
- //#endregion
3667
+ function assetComboboxBodyComponentSet(component) {
3668
+ if (!component) {
3669
+ throw new RuntimeError(1, 'Combobox body component is not set');
3670
+ }
3671
+ }
3672
+ class ComboboxDirective {
3768
3673
  //#region Inputs
3769
3674
  get options() {
3770
3675
  return this._selectionModel.getFilteredOptions();
@@ -3838,11 +3743,10 @@ class ComboboxComponent extends DecoratedInputBase {
3838
3743
  //#endregion
3839
3744
  //#region Lifecycle
3840
3745
  constructor() {
3841
- super();
3842
3746
  //#region Injects
3747
+ this._destroy$ = createDestroy();
3843
3748
  this._input = inject(INPUT_TOKEN);
3844
3749
  this._animatedOverlay = inject(AnimatedOverlayDirective);
3845
- this._selectField = inject(SELECT_FIELD_TOKEN);
3846
3750
  this._filterInternal$ = new BehaviorSubject(false);
3847
3751
  this._loading$ = new BehaviorSubject(false);
3848
3752
  this.loading$ = this._loading$.asObservable();
@@ -3863,34 +3767,31 @@ class ComboboxComponent extends DecoratedInputBase {
3863
3767
  this.rawOptions$ = this._selectionModel.options$;
3864
3768
  this._optionTemplate$ = new BehaviorSubject(null);
3865
3769
  this._selectedOptionTemplate$ = new BehaviorSubject(null);
3866
- //#endregion
3867
- //#region Computes
3868
- this.customOptionTpl$ = this._optionTemplate$.asObservable();
3869
- this.customSelectedOptionTpl$ = this._selectedOptionTemplate$.asObservable();
3870
- this._activeSelectionModel.setSelectionModel(this._selectionModel);
3871
- this._animatedOverlay.placement = 'bottom';
3872
- this._animatedOverlay.fallbackPlacements = ['bottom', 'top'];
3873
- this._animatedOverlay.autoResize = true;
3874
- this._bindings.push({
3770
+ this._bindings = createReactiveBindings({
3875
3771
  attribute: 'class.et-combobox--loading',
3876
3772
  observable: this._loading$,
3877
- });
3878
- this._bindings.push({
3773
+ }, {
3879
3774
  attribute: 'class.et-combobox--error',
3880
3775
  observable: this._error$.pipe(map((v) => !!v)),
3881
- });
3882
- this._bindings.push({
3776
+ }, {
3883
3777
  attribute: 'class.et-combobox--open',
3884
3778
  observable: this._isOpen$,
3885
- });
3886
- this._selectField._bindings.push({
3779
+ }, {
3887
3780
  attribute: 'class.et-select-field--multiple',
3888
3781
  observable: this.multiple$,
3889
- });
3890
- this._selectField._bindings.push({
3782
+ }, {
3891
3783
  attribute: 'class.et-select-field--open',
3892
3784
  observable: this._isOpen$,
3893
3785
  });
3786
+ this._comboboxBodyComponent = null;
3787
+ //#endregion
3788
+ //#region Computes
3789
+ this.customOptionTpl$ = this._optionTemplate$.asObservable();
3790
+ this.customSelectedOptionTpl$ = this._selectedOptionTemplate$.asObservable();
3791
+ this._activeSelectionModel.setSelectionModel(this._selectionModel);
3792
+ this._animatedOverlay.placement = 'bottom';
3793
+ this._animatedOverlay.fallbackPlacements = ['bottom', 'top'];
3794
+ this._animatedOverlay.autoResize = true;
3894
3795
  }
3895
3796
  ngOnInit() {
3896
3797
  this._initDispatchFilterChanges();
@@ -3903,12 +3804,15 @@ class ComboboxComponent extends DecoratedInputBase {
3903
3804
  this._setFilterFromInputValue();
3904
3805
  }))
3905
3806
  .subscribe();
3906
- this.input.nativeInputRef$
3807
+ this._input.nativeInputRef$
3907
3808
  .pipe(takeUntil(this._destroy$), debounceTime(0), filter((ref) => !!ref?.element.nativeElement), tap(() => this._updateFilter(this._currentFilter)), take(1))
3908
3809
  .subscribe();
3909
3810
  }
3910
3811
  //#endregion
3911
3812
  //#region Public Methods
3813
+ setBodyComponent(component) {
3814
+ this._comboboxBodyComponent = component;
3815
+ }
3912
3816
  getOptionLabel(option) {
3913
3817
  return this._selectionModel.getLabel$(option);
3914
3818
  }
@@ -3917,36 +3821,30 @@ class ComboboxComponent extends DecoratedInputBase {
3917
3821
  }
3918
3822
  removeSelectedOption(option) {
3919
3823
  this._selectionModel.removeSelectedOption(option);
3920
- this.input._markAsTouched();
3824
+ this._input._markAsTouched();
3921
3825
  }
3922
3826
  open() {
3923
- // if (!this._selectBodyConfig) return;
3924
- if (this._isOpen || this.input.disabled || this._animatedOverlay.isMounting)
3827
+ assetComboboxBodyComponentSet(this._comboboxBodyComponent);
3828
+ if (this._isOpen || this._input.disabled || this._animatedOverlay.isMounting)
3925
3829
  return;
3926
- // this._setSelectedOptionActive();
3927
- const instance = this._animatedOverlay.mount({
3928
- component: ComboboxBodyComponent,
3830
+ this._animatedOverlay.mount({
3831
+ component: this._comboboxBodyComponent,
3929
3832
  mirrorWidth: true,
3930
- // data: { _bodyTemplate: this._selectBodyConfig.template },
3931
3833
  });
3932
- if (!instance)
3933
- return;
3934
- // this._selectBodyId$.next(instance.selectBody.id);
3935
3834
  }
3936
3835
  close() {
3937
3836
  if (!this._isOpen || this._animatedOverlay.isUnmounting)
3938
3837
  return;
3939
3838
  this._animatedOverlay.unmount();
3940
- // this._selectBodyId$.next(null);
3941
3839
  }
3942
3840
  selectInputAndOpen() {
3943
- if (this.input.disabled)
3841
+ if (this._input.disabled)
3944
3842
  return;
3945
- this.input.nativeInputRef?.element.nativeElement.select();
3843
+ this._input.nativeInputRef?.element.nativeElement.select();
3946
3844
  this.open();
3947
3845
  }
3948
3846
  writeValueFromOption(option) {
3949
- this.input._markAsTouched();
3847
+ this._input._markAsTouched();
3950
3848
  if (this._selectionModel.allowMultiple) {
3951
3849
  this._selectionModel.toggleSelectedOption(option);
3952
3850
  }
@@ -3969,7 +3867,7 @@ class ComboboxComponent extends DecoratedInputBase {
3969
3867
  }
3970
3868
  //#endregion
3971
3869
  //#region Protected Methods
3972
- processKeydownEvent(event) {
3870
+ _processKeydownEvent(event) {
3973
3871
  const keyCode = event.keyCode;
3974
3872
  const isOpen = this._isOpen;
3975
3873
  const isMultiple = this._selectionModel.allowMultiple;
@@ -4031,13 +3929,13 @@ class ComboboxComponent extends DecoratedInputBase {
4031
3929
  }
4032
3930
  return this._interpretKeyHandlerResult(result);
4033
3931
  }
4034
- processInputEvent(event) {
3932
+ _processInputEvent(event) {
4035
3933
  const value = event.target.value;
4036
3934
  this._updateFilter(value);
4037
3935
  }
4038
- handleBlurEvent() {
4039
- this.input._markAsTouched();
4040
- this.input._setShouldDisplayError(true);
3936
+ _handleBlurEvent() {
3937
+ this._input._markAsTouched();
3938
+ this._input._setShouldDisplayError(true);
4041
3939
  if (this._selectionModel.allowMultiple) {
4042
3940
  this._updateFilter('');
4043
3941
  return;
@@ -4056,8 +3954,8 @@ class ComboboxComponent extends DecoratedInputBase {
4056
3954
  .subscribe();
4057
3955
  }
4058
3956
  _updateFilter(value) {
4059
- if (this.input.nativeInputRef && this.input.nativeInputRef.element.nativeElement.value !== value) {
4060
- this.input.nativeInputRef.element.nativeElement.value = value;
3957
+ if (this._input.nativeInputRef && this._input.nativeInputRef.element.nativeElement.value !== value) {
3958
+ this._input.nativeInputRef.element.nativeElement.value = value;
4061
3959
  }
4062
3960
  if (this._currentFilter === value)
4063
3961
  return;
@@ -4069,7 +3967,7 @@ class ComboboxComponent extends DecoratedInputBase {
4069
3967
  _setFilterFromInputValue() {
4070
3968
  if (this._selectionModel.allowMultiple)
4071
3969
  return;
4072
- const value = this.input.value;
3970
+ const value = this._input.value;
4073
3971
  if (!value || Array.isArray(value)) {
4074
3972
  this._updateFilter('');
4075
3973
  return;
@@ -4149,25 +4047,30 @@ class ComboboxComponent extends DecoratedInputBase {
4149
4047
  }))
4150
4048
  .subscribe();
4151
4049
  }
4152
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4153
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ComboboxComponent, isStandalone: true, selector: "et-combobox", inputs: { options: "options", initialValue: "initialValue", filterInternal: "filterInternal", loading: "loading", error: "error", emptyText: "emptyText", placeholder: "placeholder", multiple: "multiple", bindLabel: "bindLabel", bindValue: "bindValue", allowCustomValues: "allowCustomValues" }, outputs: { filterChange: "filterChange" }, host: { listeners: { "click": "selectInputAndOpen()" }, classAttribute: "et-combobox" }, providers: [
4050
+ _assetBodyComponent() {
4051
+ if (!this._comboboxBodyComponent) {
4052
+ throw new RuntimeError(1, 'Combobox body component is not set');
4053
+ }
4054
+ }
4055
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ComboboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
4056
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: ComboboxDirective, isStandalone: true, inputs: { options: "options", initialValue: "initialValue", filterInternal: "filterInternal", loading: "loading", error: "error", emptyText: "emptyText", placeholder: "placeholder", multiple: "multiple", bindLabel: "bindLabel", bindValue: "bindValue", allowCustomValues: "allowCustomValues" }, outputs: { filterChange: "filterChange" }, providers: [
4154
4057
  {
4155
4058
  provide: COMBOBOX_TOKEN,
4156
- useExisting: ComboboxComponent,
4059
+ useExisting: ComboboxDirective,
4157
4060
  },
4158
- ], queries: [{ propertyName: "optionTemplate", first: true, predicate: COMBOBOX_OPTION_TEMPLATE_TOKEN, descendants: true, read: TemplateRef }, { propertyName: "selectedOptionTemplate", first: true, predicate: COMBOBOX_SELECTED_OPTION_TEMPLATE_TOKEN, descendants: true, read: TemplateRef }], 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 <ng-container\n *ngIf=\"customSelectedOptionTpl$ | async as customSelectedOptionTpl; else defaultSelectedOptionLabelTpl\"\n >\n <ng-container *ngTemplateOutlet=\"customSelectedOptionTpl; context: { option: item }\" />\n </ng-container>\n\n <ng-template #defaultSelectedOptionLabelTpl>\n {{ getOptionLabel(item) | async }}\n </ng-template>\n\n <span\n (click)=\"removeSelectedOption(item); $event.stopPropagation()\"\n class=\"et-combobox-selected-option-remove\"\n tabindex=\"-1\"\n >\n x\n </span>\n </li>\n <li class=\"et-combobox-muliple-input\">\n <ng-container *ngTemplateOutlet=\"inputTpl\" />\n </li>\n </ul>\n\n <ng-template #inputTpl>\n <input\n (keydown)=\"processKeydownEvent($event)\"\n (click)=\"open()\"\n (blur)=\"handleBlurEvent()\"\n (input)=\"processInputEvent($event)\"\n type=\"text\"\n etNativeInputRef\n />\n </ng-template>\n\n <ng-container *ngIf=\"(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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
4061
+ ], queries: [{ propertyName: "optionTemplate", first: true, predicate: COMBOBOX_OPTION_TEMPLATE_TOKEN, descendants: true, read: TemplateRef }, { propertyName: "selectedOptionTemplate", first: true, predicate: COMBOBOX_SELECTED_OPTION_TEMPLATE_TOKEN, descendants: true, read: TemplateRef }], ngImport: i0 }); }
4159
4062
  }
4160
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ComboboxComponent, decorators: [{
4161
- type: Component,
4162
- args: [{ selector: 'et-combobox', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
4163
- class: 'et-combobox',
4164
- '(click)': 'selectInputAndOpen()',
4165
- }, imports: [NgIf, NativeInputRefDirective, AsyncPipe, ChevronIconComponent, LetDirective, NgFor, NgTemplateOutlet], hostDirectives: [{ directive: InputDirective }, AnimatedOverlayDirective], providers: [
4063
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ComboboxDirective, decorators: [{
4064
+ type: Directive,
4065
+ args: [{
4066
+ standalone: true,
4067
+ providers: [
4166
4068
  {
4167
4069
  provide: COMBOBOX_TOKEN,
4168
- useExisting: ComboboxComponent,
4070
+ useExisting: ComboboxDirective,
4169
4071
  },
4170
- ], 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 <ng-container\n *ngIf=\"customSelectedOptionTpl$ | async as customSelectedOptionTpl; else defaultSelectedOptionLabelTpl\"\n >\n <ng-container *ngTemplateOutlet=\"customSelectedOptionTpl; context: { option: item }\" />\n </ng-container>\n\n <ng-template #defaultSelectedOptionLabelTpl>\n {{ getOptionLabel(item) | async }}\n </ng-template>\n\n <span\n (click)=\"removeSelectedOption(item); $event.stopPropagation()\"\n class=\"et-combobox-selected-option-remove\"\n tabindex=\"-1\"\n >\n x\n </span>\n </li>\n <li class=\"et-combobox-muliple-input\">\n <ng-container *ngTemplateOutlet=\"inputTpl\" />\n </li>\n </ul>\n\n <ng-template #inputTpl>\n <input\n (keydown)=\"processKeydownEvent($event)\"\n (click)=\"open()\"\n (blur)=\"handleBlurEvent()\"\n (input)=\"processInputEvent($event)\"\n type=\"text\"\n etNativeInputRef\n />\n </ng-template>\n\n <ng-container *ngIf=\"(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"] }]
4072
+ ],
4073
+ }]
4171
4074
  }], ctorParameters: function () { return []; }, propDecorators: { options: [{
4172
4075
  type: Input,
4173
4076
  args: [{ required: true }]
@@ -4201,6 +4104,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
4201
4104
  args: [COMBOBOX_SELECTED_OPTION_TEMPLATE_TOKEN, { read: TemplateRef }]
4202
4105
  }] } });
4203
4106
 
4107
+ const COMBOBOX_OPTION_TOKEN = new InjectionToken('ET_COMBOBOX_OPTION_TOKEN');
4108
+ class ComboboxOptionComponent {
4109
+ constructor() {
4110
+ this.combobox = inject(COMBOBOX_TOKEN);
4111
+ this._option$ = new BehaviorSubject(null);
4112
+ this.disabled$ = this._option$.pipe(map((opt) => isOptionDisabled(opt)));
4113
+ this.selected$ = this._option$.pipe(switchMap((opt) => this.combobox.isOptionSelected(opt)));
4114
+ this.active$ = this._option$.pipe(switchMap((opt) => this.combobox.isOptionActive(opt)));
4115
+ this._bindings = createReactiveBindings({
4116
+ attribute: 'class.et-combobox-option--selected',
4117
+ observable: this.selected$,
4118
+ }, {
4119
+ attribute: 'class.et-combobox-option--disabled',
4120
+ observable: this.disabled$,
4121
+ }, {
4122
+ attribute: 'class.et-combobox-option--active',
4123
+ observable: this.active$,
4124
+ });
4125
+ }
4126
+ get option() {
4127
+ return this._option$.value;
4128
+ }
4129
+ set option(value) {
4130
+ this._option$.next(value);
4131
+ }
4132
+ selectOption() {
4133
+ if (isOptionDisabled(this.option)) {
4134
+ return;
4135
+ }
4136
+ this.combobox.writeValueFromOption(this.option);
4137
+ }
4138
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ComboboxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4139
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ComboboxOptionComponent, isStandalone: true, selector: "et-combobox-option", inputs: { option: "option" }, host: { listeners: { "click": "selectOption()" }, classAttribute: "et-combobox-option" }, providers: [
4140
+ {
4141
+ provide: COMBOBOX_OPTION_TOKEN,
4142
+ useExisting: ComboboxOptionComponent,
4143
+ },
4144
+ ], ngImport: i0, template: "<ng-container *ngIf=\"combobox.customOptionTpl$ | async as customOptionTpl; else defaultOptionLabelTpl\">\n <ng-container *ngTemplateOutlet=\"customOptionTpl; context: { option }\" />\n</ng-container>\n\n<ng-template #defaultOptionLabelTpl>\n {{ combobox.getOptionLabel(option) | async }}\n</ng-template>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
4145
+ }
4146
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ComboboxOptionComponent, decorators: [{
4147
+ type: Component,
4148
+ args: [{ selector: 'et-combobox-option', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
4149
+ class: 'et-combobox-option',
4150
+ '(click)': 'selectOption()',
4151
+ }, imports: [AsyncPipe, NgIf, NgTemplateOutlet], hostDirectives: [], providers: [
4152
+ {
4153
+ provide: COMBOBOX_OPTION_TOKEN,
4154
+ useExisting: ComboboxOptionComponent,
4155
+ },
4156
+ ], template: "<ng-container *ngIf=\"combobox.customOptionTpl$ | async as customOptionTpl; else defaultOptionLabelTpl\">\n <ng-container *ngTemplateOutlet=\"customOptionTpl; context: { option }\" />\n</ng-container>\n\n<ng-template #defaultOptionLabelTpl>\n {{ combobox.getOptionLabel(option) | async }}\n</ng-template>\n" }]
4157
+ }], propDecorators: { option: [{
4158
+ type: Input,
4159
+ args: [{ required: true }]
4160
+ }] } });
4161
+
4162
+ const COMBOBOX_BODY_TOKEN = new InjectionToken('ET_COMBOBOX_BODY_TOKEN');
4163
+ class ComboboxBodyComponent {
4164
+ constructor() {
4165
+ this._destroy$ = createDestroy();
4166
+ this._clickOutside = inject(ClickOutsideDirective);
4167
+ this.combobox = inject(COMBOBOX_TOKEN);
4168
+ this._bindings = createReactiveBindings({
4169
+ attribute: 'class.et-combobox-body--loading',
4170
+ observable: this.combobox.loading$,
4171
+ }, {
4172
+ attribute: 'class.et-combobox-body--multiple',
4173
+ observable: this.combobox.multiple$,
4174
+ });
4175
+ this._bodyTemplate = null;
4176
+ }
4177
+ ngOnInit() {
4178
+ this._clickOutside.etClickOutside
4179
+ .pipe(takeUntil(this._destroy$), tap(() => this.combobox.close()))
4180
+ .subscribe();
4181
+ }
4182
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ComboboxBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4183
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ComboboxBodyComponent, isStandalone: true, selector: "et-combobox-body", host: { classAttribute: "et-combobox-body et-with-default-animation" }, providers: [
4184
+ {
4185
+ provide: COMBOBOX_BODY_TOKEN,
4186
+ useExisting: ComboboxBodyComponent,
4187
+ },
4188
+ ], viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], hostDirectives: [{ directive: i1$1.ClickOutsideDirective }], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/use-track-by-function -->\n<div class=\"et-combobox-body-container\" etAnimatedLifecycle>\n <ng-container *etLet=\"combobox.options$ | async as options\">\n <p *ngIf=\"!options?.length\" class=\"et-combobox-body--empty\">{{ combobox.emptyText }}</p>\n\n <et-combobox-option *ngFor=\"let option of options\" [option]=\"option\" />\n </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ComboboxOptionComponent, selector: "et-combobox-option", inputs: ["option"] }, { kind: "directive", type: LetDirective, selector: "[etLet]", inputs: ["etLet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", exportAs: ["etAnimatedLifecycle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
4189
+ }
4190
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ComboboxBodyComponent, decorators: [{
4191
+ type: Component,
4192
+ args: [{ selector: 'et-combobox-body', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
4193
+ class: 'et-combobox-body et-with-default-animation',
4194
+ }, imports: [
4195
+ NgTemplateOutlet,
4196
+ NgFor,
4197
+ ComboboxOptionComponent,
4198
+ LetDirective,
4199
+ AsyncPipe,
4200
+ AnimatedLifecycleDirective,
4201
+ NgIf,
4202
+ ], hostDirectives: [ClickOutsideDirective], providers: [
4203
+ {
4204
+ provide: COMBOBOX_BODY_TOKEN,
4205
+ useExisting: ComboboxBodyComponent,
4206
+ },
4207
+ ], template: "<!-- eslint-disable @angular-eslint/template/use-track-by-function -->\n<div class=\"et-combobox-body-container\" etAnimatedLifecycle>\n <ng-container *etLet=\"combobox.options$ | async as options\">\n <p *ngIf=\"!options?.length\" class=\"et-combobox-body--empty\">{{ combobox.emptyText }}</p>\n\n <et-combobox-option *ngFor=\"let option of options\" [option]=\"option\" />\n </ng-container>\n</div>\n" }]
4208
+ }], propDecorators: { _animatedLifecycle: [{
4209
+ type: ViewChild,
4210
+ args: [ANIMATED_LIFECYCLE_TOKEN, { static: true }]
4211
+ }] } });
4212
+
4213
+ class ComboboxComponent extends DecoratedInputBase {
4214
+ constructor() {
4215
+ super();
4216
+ this.combobox = inject(COMBOBOX_TOKEN);
4217
+ this.combobox.setBodyComponent(ComboboxBodyComponent);
4218
+ }
4219
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4220
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", 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"], outputs: ["filterChange", "filterChange"] }], 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=\"combobox.multiple$ | async\" class=\"et-combobox-selected-options\">\n <li *ngFor=\"let item of combobox.selectedOptions$ | async\" class=\"et-combobox-selected-option\">\n <ng-container\n *ngIf=\"combobox.customSelectedOptionTpl$ | async as customSelectedOptionTpl; else defaultSelectedOptionLabelTpl\"\n >\n <ng-container *ngTemplateOutlet=\"customSelectedOptionTpl; context: { option: item }\" />\n </ng-container>\n\n <ng-template #defaultSelectedOptionLabelTpl>\n {{ combobox.getOptionLabel(item) | async }}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
4221
+ }
4222
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ComboboxComponent, decorators: [{
4223
+ type: Component,
4224
+ args: [{ selector: 'et-combobox', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
4225
+ class: 'et-combobox',
4226
+ '(click)': 'combobox.selectInputAndOpen()',
4227
+ }, imports: [NgIf, NativeInputRefDirective, AsyncPipe, ChevronIconComponent, LetDirective, NgFor, NgTemplateOutlet], hostDirectives: [
4228
+ AnimatedOverlayDirective,
4229
+ { directive: InputDirective },
4230
+ {
4231
+ directive: ComboboxDirective,
4232
+ inputs: [
4233
+ 'options',
4234
+ 'initialValue',
4235
+ 'filterInternal',
4236
+ 'loading',
4237
+ 'error',
4238
+ 'emptyText',
4239
+ 'placeholder',
4240
+ 'multiple',
4241
+ 'bindLabel',
4242
+ 'bindValue',
4243
+ 'allowCustomValues',
4244
+ ],
4245
+ // eslint-disable-next-line @angular-eslint/no-outputs-metadata-property
4246
+ outputs: ['filterChange'],
4247
+ },
4248
+ ], 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=\"combobox.multiple$ | async\" class=\"et-combobox-selected-options\">\n <li *ngFor=\"let item of combobox.selectedOptions$ | async\" class=\"et-combobox-selected-option\">\n <ng-container\n *ngIf=\"combobox.customSelectedOptionTpl$ | async as customSelectedOptionTpl; else defaultSelectedOptionLabelTpl\"\n >\n <ng-container *ngTemplateOutlet=\"customSelectedOptionTpl; context: { option: item }\" />\n </ng-container>\n\n <ng-template #defaultSelectedOptionLabelTpl>\n {{ combobox.getOptionLabel(item) | async }}\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"] }]
4249
+ }], ctorParameters: function () { return []; } });
4250
+
4204
4251
  const ComboboxImports = [
4205
4252
  ComboboxComponent,
4206
4253
  SelectFieldComponent,
@@ -5086,7 +5133,6 @@ class SelectionListOptionDirective {
5086
5133
  this.elementRef.nativeElement.focus();
5087
5134
  }
5088
5135
  getLabel() {
5089
- console.log(this.elementRef.nativeElement.textContent);
5090
5136
  return this.elementRef.nativeElement.textContent || '';
5091
5137
  }
5092
5138
  _onInputInteraction(event) {
@@ -12425,5 +12471,5 @@ const FLOATING_UI_PLACEMENTS = [
12425
12471
  * Generated bundle index. Do not edit.
12426
12472
  */
12427
12473
 
12428
- 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, CDK_MENU, CHECKBOX_FIELD_TOKEN, CHECKBOX_GROUP_CONTROL_TOKEN, CHECKBOX_GROUP_TOKEN, CHECKBOX_TOKEN, COMBOBOX_DIR_TOKEN, COMBOBOX_OPTION_TEMPLATE_TOKEN, COMBOBOX_SELECTED_OPTION_TEMPLATE_TOKEN, COMBOBOX_TOKEN, CdkContextMenuTrigger, CdkMenu, CdkMenuBar, CdkMenuBase, CdkMenuGroup, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuItemSelectable, CdkMenuModule, CdkMenuTrigger, CdkMenuTriggerBase, CdkTargetMenuAim, CellDefDirective, CellDirective, CheckboxComponent, CheckboxDirective, CheckboxFieldComponent, CheckboxFieldDirective, CheckboxGroupComponent, CheckboxGroupControlDirective, CheckboxGroupDirective, CheckboxImports, ChevronIconComponent, ColumnDefDirective, ComboboxComponent, ComboboxDirective, ComboboxImports, ComboboxOptionTemplateDirective, ComboboxSelectedOptionTemplateDirective, ContextMenuTracker, DATE_INPUT_FORMAT_TOKEN, DATE_INPUT_TOKEN, DEFAULT_DATE_INPUT_FORMAT, 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, DateInputComponent, DateInputDirective, DecoratedFormFieldBase, DecoratedInputBase, DefaultValidatorErrorsService, DialogCloseDirective, DialogContainerBaseComponent, DialogContainerComponent, DialogImports, DialogRef, DialogService, DialogServiceBase, DialogTitleDirective, DynamicFormFieldDirective, DynamicFormGroupDirective, DynamicOverlayService, DynamicOverlayTitleDirective, EMAIL_INPUT_TOKEN, EmailInputComponent, EmailInputDirective, ErrorComponent, FLOATING_UI_PLACEMENTS, 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, MENU_AIM, MENU_STACK, MENU_TRIGGER, MasonryComponent, MasonryImports, MasonryItemComponent, MenuStack, 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, PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER, PARENT_OR_NEW_MENU_STACK_PROVIDER, PASSWORD_INPUT_TOKEN, PROGRESS_SPINNER_DEFAULT_OPTIONS, PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY, PaginatedTabHeaderDirective, PaginationComponent, PaginationImports, PasswordInputComponent, PasswordInputDirective, PasswordInputToggleComponent, PictureComponent, PictureDataDirective, PointerFocusTracker, ProgressSpinnerComponent, QUERY_ERROR_TOKEN, QueryButtonComponent, QueryButtonDirective, QueryErrorComponent, QueryErrorDirective, 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, SELECTION_LIST_FIELD, SELECTION_LIST_OPTION, 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, SelectionListFieldComponent, SelectionListFieldDirective, SelectionListImports, SelectionListOptionComponent, SelectionListOptionDirective, 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, TargetMenuAim, 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, convertHttpStatusCodeToMessage, createBottomSheetConfig, createBracketConfig, createDialogConfig, createToggletipConfig, createTooltipConfig, getClosestBottomSheet, getClosestDialog, isOptionDisabled, isUpperBracketMatch, normalizeRoundType, orderRounds, orderRoundsByRoundNumber, paginate, provideBottomSheet, provideBottomSheetDefaultConfig, provideBracketConfig, provideDateFormat, provideDialog, provideDialogDefaultConfig, provideSort, provideToggletipConfig, provideTooltipConfig, provideValidatorErrorsService, tabAnimations };
12474
+ 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, CDK_MENU, CHECKBOX_FIELD_TOKEN, CHECKBOX_GROUP_CONTROL_TOKEN, CHECKBOX_GROUP_TOKEN, CHECKBOX_TOKEN, COMBOBOX_OPTION_TEMPLATE_TOKEN, COMBOBOX_SELECTED_OPTION_TEMPLATE_TOKEN, COMBOBOX_TOKEN, CdkContextMenuTrigger, CdkMenu, CdkMenuBar, CdkMenuBase, CdkMenuGroup, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuItemSelectable, CdkMenuModule, CdkMenuTrigger, CdkMenuTriggerBase, CdkTargetMenuAim, CellDefDirective, CellDirective, CheckboxComponent, CheckboxDirective, CheckboxFieldComponent, CheckboxFieldDirective, CheckboxGroupComponent, CheckboxGroupControlDirective, CheckboxGroupDirective, CheckboxImports, ChevronIconComponent, ColumnDefDirective, ComboboxComponent, ComboboxDirective, ComboboxImports, ComboboxOptionTemplateDirective, ComboboxSelectedOptionTemplateDirective, ContextMenuTracker, DATE_INPUT_FORMAT_TOKEN, DATE_INPUT_TOKEN, DEFAULT_DATE_INPUT_FORMAT, 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, DateInputComponent, DateInputDirective, DecoratedFormFieldBase, DecoratedInputBase, DefaultValidatorErrorsService, DialogCloseDirective, DialogContainerBaseComponent, DialogContainerComponent, DialogImports, DialogRef, DialogService, DialogServiceBase, DialogTitleDirective, DynamicFormFieldDirective, DynamicFormGroupDirective, DynamicOverlayService, DynamicOverlayTitleDirective, EMAIL_INPUT_TOKEN, EmailInputComponent, EmailInputDirective, ErrorComponent, FLOATING_UI_PLACEMENTS, 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, MENU_AIM, MENU_STACK, MENU_TRIGGER, MasonryComponent, MasonryImports, MasonryItemComponent, MenuStack, 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, PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER, PARENT_OR_NEW_MENU_STACK_PROVIDER, PASSWORD_INPUT_TOKEN, PROGRESS_SPINNER_DEFAULT_OPTIONS, PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY, PaginatedTabHeaderDirective, PaginationComponent, PaginationImports, PasswordInputComponent, PasswordInputDirective, PasswordInputToggleComponent, PictureComponent, PictureDataDirective, PointerFocusTracker, ProgressSpinnerComponent, QUERY_ERROR_TOKEN, QueryButtonComponent, QueryButtonDirective, QueryErrorComponent, QueryErrorDirective, 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, SELECTION_LIST_FIELD, SELECTION_LIST_OPTION, 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, SelectionListFieldComponent, SelectionListFieldDirective, SelectionListImports, SelectionListOptionComponent, SelectionListOptionDirective, 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, TargetMenuAim, 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, convertHttpStatusCodeToMessage, createBottomSheetConfig, createBracketConfig, createDialogConfig, createToggletipConfig, createTooltipConfig, getClosestBottomSheet, getClosestDialog, isOptionDisabled, isUpperBracketMatch, normalizeRoundType, orderRounds, orderRoundsByRoundNumber, paginate, provideBottomSheet, provideBottomSheetDefaultConfig, provideBracketConfig, provideDateFormat, provideDialog, provideDialogDefaultConfig, provideSort, provideToggletipConfig, provideTooltipConfig, provideValidatorErrorsService, tabAnimations };
12429
12475
  //# sourceMappingURL=ethlete-cdk.mjs.map