@ethlete/cdk 3.19.2 → 3.20.1
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.
- package/CHANGELOG.md +12 -0
- package/esm2022/lib/components/forms/components/select/components/combobox/components/combobox/combobox.component.mjs +9 -3
- package/esm2022/lib/components/forms/components/select/components/combobox/directives/combobox/combobox.directive.mjs +66 -2
- package/esm2022/lib/components/forms/components/select/components/combobox/partials/combobox-body/combobox-body.component.mjs +8 -4
- package/esm2022/lib/components/forms/components/select/components/combobox/partials/combobox-option/combobox-option.component.mjs +13 -5
- package/esm2022/lib/components/forms/components/select/components/select/directives/select/select.directive.mjs +1 -1
- package/esm2022/lib/components/forms/components/select/components/select/directives/select-option/select-option.directive.mjs +6 -2
- package/fesm2022/ethlete-cdk.mjs +95 -9
- package/fesm2022/ethlete-cdk.mjs.map +1 -1
- package/lib/components/forms/components/select/components/combobox/components/combobox/combobox.component.d.ts +1 -1
- package/lib/components/forms/components/select/components/combobox/directives/combobox/combobox.directive.d.ts +31 -3
- package/lib/components/forms/components/select/components/combobox/partials/combobox-body/combobox-body.component.d.ts +3 -2
- package/lib/components/forms/components/select/components/combobox/partials/combobox-option/combobox-option.component.d.ts +4 -0
- package/lib/components/forms/components/select/components/select/directives/select/select.directive.d.ts +1 -1
- package/lib/components/forms/components/select/components/select/directives/select-option/select-option.directive.d.ts +1 -0
- package/package.json +2 -2
package/fesm2022/ethlete-cdk.mjs
CHANGED
|
@@ -8395,36 +8395,72 @@ class ComboboxDirective {
|
|
|
8395
8395
|
set optionComponent(component) {
|
|
8396
8396
|
this._optionComponent$.next(component);
|
|
8397
8397
|
}
|
|
8398
|
+
get optionComponentInputs() {
|
|
8399
|
+
return this._optionComponentInputs$.value;
|
|
8400
|
+
}
|
|
8401
|
+
set optionComponentInputs(value) {
|
|
8402
|
+
this._optionComponentInputs$.next(value ?? {});
|
|
8403
|
+
}
|
|
8398
8404
|
get selectedOptionComponent() {
|
|
8399
8405
|
return this._selectedOptionComponent$.value;
|
|
8400
8406
|
}
|
|
8401
8407
|
set selectedOptionComponent(component) {
|
|
8402
8408
|
this._selectedOptionComponent$.next(component);
|
|
8403
8409
|
}
|
|
8410
|
+
get selectedOptionComponentInputs() {
|
|
8411
|
+
return this._selectedOptionComponentInputs$.value;
|
|
8412
|
+
}
|
|
8413
|
+
set selectedOptionComponentInputs(value) {
|
|
8414
|
+
this._selectedOptionComponentInputs$.next(value ?? {});
|
|
8415
|
+
}
|
|
8404
8416
|
get bodyErrorComponent() {
|
|
8405
8417
|
return this._bodyErrorComponent$.value;
|
|
8406
8418
|
}
|
|
8407
8419
|
set bodyErrorComponent(value) {
|
|
8408
8420
|
this._bodyErrorComponent$.next(value);
|
|
8409
8421
|
}
|
|
8422
|
+
get bodyErrorComponentInputs() {
|
|
8423
|
+
return this._bodyErrorComponentInputs$.value;
|
|
8424
|
+
}
|
|
8425
|
+
set bodyErrorComponentInputs(value) {
|
|
8426
|
+
this._bodyErrorComponentInputs$.next(value ?? {});
|
|
8427
|
+
}
|
|
8410
8428
|
get bodyLoadingComponent() {
|
|
8411
8429
|
return this._bodyLoadingComponent$.value;
|
|
8412
8430
|
}
|
|
8413
8431
|
set bodyLoadingComponent(value) {
|
|
8414
8432
|
this._bodyLoadingComponent$.next(value);
|
|
8415
8433
|
}
|
|
8434
|
+
get bodyLoadingComponentInputs() {
|
|
8435
|
+
return this._bodyLoadingComponentInputs$.value;
|
|
8436
|
+
}
|
|
8437
|
+
set bodyLoadingComponentInputs(value) {
|
|
8438
|
+
this._bodyLoadingComponentInputs$.next(value ?? {});
|
|
8439
|
+
}
|
|
8416
8440
|
get bodyEmptyComponent() {
|
|
8417
8441
|
return this._bodyEmptyComponent$.value;
|
|
8418
8442
|
}
|
|
8419
8443
|
set bodyEmptyComponent(value) {
|
|
8420
8444
|
this._bodyEmptyComponent$.next(value);
|
|
8421
8445
|
}
|
|
8446
|
+
get bodyEmptyComponentInputs() {
|
|
8447
|
+
return this._bodyEmptyComponentInputs$.value;
|
|
8448
|
+
}
|
|
8449
|
+
set bodyEmptyComponentInputs(value) {
|
|
8450
|
+
this._bodyEmptyComponentInputs$.next(value ?? {});
|
|
8451
|
+
}
|
|
8422
8452
|
get bodyMoreItemsHintComponent() {
|
|
8423
8453
|
return this._bodyMoreItemsHintComponent$.value;
|
|
8424
8454
|
}
|
|
8425
8455
|
set bodyMoreItemsHintComponent(value) {
|
|
8426
8456
|
this._bodyMoreItemsHintComponent$.next(value);
|
|
8427
8457
|
}
|
|
8458
|
+
get bodyMoreItemsHintComponentInputs() {
|
|
8459
|
+
return this._bodyMoreItemsHintComponentInputs$.value;
|
|
8460
|
+
}
|
|
8461
|
+
set bodyMoreItemsHintComponentInputs(value) {
|
|
8462
|
+
this._bodyMoreItemsHintComponentInputs$.next(value ?? {});
|
|
8463
|
+
}
|
|
8428
8464
|
get currentFilter() {
|
|
8429
8465
|
return this._currentFilter$.value;
|
|
8430
8466
|
}
|
|
@@ -8464,15 +8500,22 @@ class ComboboxDirective {
|
|
|
8464
8500
|
this._loading$ = new BehaviorSubject(false);
|
|
8465
8501
|
this.loading$ = this._loading$.asObservable();
|
|
8466
8502
|
this._error$ = new BehaviorSubject(null);
|
|
8503
|
+
this.error$ = this._error$.asObservable();
|
|
8467
8504
|
this._placeholder$ = new BehaviorSubject(null);
|
|
8468
8505
|
this._allowCustomValues$ = new BehaviorSubject(false);
|
|
8469
8506
|
this._showBodyMoreItemsHint$ = new BehaviorSubject(false);
|
|
8470
8507
|
this._optionComponent$ = new BehaviorSubject(this._comboboxConfig?.optionComponent ?? null);
|
|
8508
|
+
this._optionComponentInputs$ = new BehaviorSubject({});
|
|
8471
8509
|
this._selectedOptionComponent$ = new BehaviorSubject(this._comboboxConfig?.selectedOptionComponent ?? null);
|
|
8510
|
+
this._selectedOptionComponentInputs$ = new BehaviorSubject({});
|
|
8472
8511
|
this._bodyErrorComponent$ = new BehaviorSubject(this._comboboxConfig?.bodyErrorComponent ?? null);
|
|
8512
|
+
this._bodyErrorComponentInputs$ = new BehaviorSubject({});
|
|
8473
8513
|
this._bodyLoadingComponent$ = new BehaviorSubject(this._comboboxConfig?.bodyLoadingComponent ?? null);
|
|
8514
|
+
this._bodyLoadingComponentInputs$ = new BehaviorSubject({});
|
|
8474
8515
|
this._bodyEmptyComponent$ = new BehaviorSubject(this._comboboxConfig?.bodyEmptyComponent ?? null);
|
|
8516
|
+
this._bodyEmptyComponentInputs$ = new BehaviorSubject({});
|
|
8475
8517
|
this._bodyMoreItemsHintComponent$ = new BehaviorSubject(this._comboboxConfig?.bodyMoreItemsHintComponent ?? null);
|
|
8518
|
+
this._bodyMoreItemsHintComponentInputs$ = new BehaviorSubject({});
|
|
8476
8519
|
//#endregion
|
|
8477
8520
|
//#region Outputs
|
|
8478
8521
|
this.filterChange = new EventEmitter();
|
|
@@ -8525,6 +8568,12 @@ class ComboboxDirective {
|
|
|
8525
8568
|
this.customBodyEmptyComponent$ = this._bodyEmptyComponent$.asObservable();
|
|
8526
8569
|
this.customBodyMoreItemsHintTpl$ = this._bodyMoreItemsHintTemplate$.asObservable();
|
|
8527
8570
|
this.customBodyMoreItemsHintComponent$ = this._bodyMoreItemsHintComponent$.asObservable();
|
|
8571
|
+
this.customOptionComponentInputs$ = this._optionComponentInputs$.asObservable();
|
|
8572
|
+
this.customSelectedOptionComponentInputs$ = this._selectedOptionComponentInputs$.asObservable();
|
|
8573
|
+
this.customBodyLoadingComponentInputs$ = this._bodyLoadingComponentInputs$.asObservable();
|
|
8574
|
+
this.customBodyErrorComponentInputs$ = this._bodyErrorComponentInputs$.asObservable();
|
|
8575
|
+
this.customBodyEmptyComponentInputs$ = this._bodyEmptyComponentInputs$.asObservable();
|
|
8576
|
+
this.customBodyMoreItemsHintComponentInputs$ = this._bodyMoreItemsHintComponentInputs$.asObservable();
|
|
8528
8577
|
this.trackByOptionKeyFn = (index, item) => this._selectionModel.getKey(item);
|
|
8529
8578
|
this._activeSelectionModel.setSelectionModel(this._selectionModel);
|
|
8530
8579
|
this._animatedOverlay.placement = 'bottom';
|
|
@@ -8559,6 +8608,9 @@ class ComboboxDirective {
|
|
|
8559
8608
|
getOptionValue(option) {
|
|
8560
8609
|
return this._selectionModel.getValue$(option);
|
|
8561
8610
|
}
|
|
8611
|
+
combineSelectedOptionWithComponentInputs(option) {
|
|
8612
|
+
return this.customSelectedOptionComponentInputs$.pipe(map((inputs) => ({ option, ...inputs })), takeUntil(this._destroy$));
|
|
8613
|
+
}
|
|
8562
8614
|
removeSelectedOption(option) {
|
|
8563
8615
|
this._selectionModel.removeSelectedOption(option);
|
|
8564
8616
|
this._input._markAsTouched();
|
|
@@ -8879,7 +8931,7 @@ class ComboboxDirective {
|
|
|
8879
8931
|
.subscribe();
|
|
8880
8932
|
}
|
|
8881
8933
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ComboboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8882
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "16.2.5", type: ComboboxDirective, isStandalone: true, inputs: { options: "options", initialValue: "initialValue", filterInternal: "filterInternal", loading: "loading", error: "error", emptyText: "emptyText", bodyEmptyText: "bodyEmptyText", bodyMoreItemsHintText: "bodyMoreItemsHintText", placeholder: "placeholder", multiple: "multiple", bindLabel: "bindLabel", bindValue: "bindValue", bindKey: "bindKey", allowCustomValues: "allowCustomValues", showBodyMoreItemsHint: ["showBodyMoreItemsHint", "showBodyMoreItemsHint", booleanAttribute], optionComponent: "optionComponent", selectedOptionComponent: "selectedOptionComponent", bodyErrorComponent: "bodyErrorComponent", bodyLoadingComponent: "bodyLoadingComponent", bodyEmptyComponent: "bodyEmptyComponent", bodyMoreItemsHintComponent: "bodyMoreItemsHintComponent" }, outputs: { filterChange: "filterChange" }, providers: [
|
|
8934
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "16.2.5", type: ComboboxDirective, isStandalone: true, inputs: { options: "options", initialValue: "initialValue", filterInternal: "filterInternal", loading: "loading", error: "error", emptyText: "emptyText", bodyEmptyText: "bodyEmptyText", bodyMoreItemsHintText: "bodyMoreItemsHintText", placeholder: "placeholder", multiple: "multiple", bindLabel: "bindLabel", bindValue: "bindValue", bindKey: "bindKey", allowCustomValues: "allowCustomValues", showBodyMoreItemsHint: ["showBodyMoreItemsHint", "showBodyMoreItemsHint", booleanAttribute], optionComponent: "optionComponent", optionComponentInputs: "optionComponentInputs", selectedOptionComponent: "selectedOptionComponent", selectedOptionComponentInputs: "selectedOptionComponentInputs", bodyErrorComponent: "bodyErrorComponent", bodyErrorComponentInputs: "bodyErrorComponentInputs", bodyLoadingComponent: "bodyLoadingComponent", bodyLoadingComponentInputs: "bodyLoadingComponentInputs", bodyEmptyComponent: "bodyEmptyComponent", bodyEmptyComponentInputs: "bodyEmptyComponentInputs", bodyMoreItemsHintComponent: "bodyMoreItemsHintComponent", bodyMoreItemsHintComponentInputs: "bodyMoreItemsHintComponentInputs" }, outputs: { filterChange: "filterChange" }, providers: [
|
|
8883
8935
|
{
|
|
8884
8936
|
provide: COMBOBOX_TOKEN,
|
|
8885
8937
|
useExisting: ComboboxDirective,
|
|
@@ -8931,16 +8983,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
|
|
|
8931
8983
|
args: [{ transform: booleanAttribute }]
|
|
8932
8984
|
}], optionComponent: [{
|
|
8933
8985
|
type: Input
|
|
8986
|
+
}], optionComponentInputs: [{
|
|
8987
|
+
type: Input
|
|
8934
8988
|
}], selectedOptionComponent: [{
|
|
8935
8989
|
type: Input
|
|
8990
|
+
}], selectedOptionComponentInputs: [{
|
|
8991
|
+
type: Input
|
|
8936
8992
|
}], bodyErrorComponent: [{
|
|
8937
8993
|
type: Input
|
|
8994
|
+
}], bodyErrorComponentInputs: [{
|
|
8995
|
+
type: Input
|
|
8938
8996
|
}], bodyLoadingComponent: [{
|
|
8939
8997
|
type: Input
|
|
8998
|
+
}], bodyLoadingComponentInputs: [{
|
|
8999
|
+
type: Input
|
|
8940
9000
|
}], bodyEmptyComponent: [{
|
|
8941
9001
|
type: Input
|
|
9002
|
+
}], bodyEmptyComponentInputs: [{
|
|
9003
|
+
type: Input
|
|
8942
9004
|
}], bodyMoreItemsHintComponent: [{
|
|
8943
9005
|
type: Input
|
|
9006
|
+
}], bodyMoreItemsHintComponentInputs: [{
|
|
9007
|
+
type: Input
|
|
8944
9008
|
}], filterChange: [{
|
|
8945
9009
|
type: Output
|
|
8946
9010
|
}], optionTemplate: [{
|
|
@@ -8974,6 +9038,10 @@ class ComboboxOptionComponent {
|
|
|
8974
9038
|
this.disabled$ = this._option$.pipe(map((opt) => isOptionDisabled(opt)));
|
|
8975
9039
|
this.selected$ = this._option$.pipe(switchMap((opt) => this.combobox.isOptionSelected(opt)));
|
|
8976
9040
|
this.active$ = this._option$.pipe(switchMap((opt) => this.combobox.isOptionActive(opt)));
|
|
9041
|
+
this.customOptionComponentInputs$ = combineLatest([
|
|
9042
|
+
this._option$,
|
|
9043
|
+
this.combobox.customOptionComponentInputs$,
|
|
9044
|
+
]).pipe(map(([option, inputs]) => ({ option, ...inputs })));
|
|
8977
9045
|
this.hostClassBindings = signalHostClasses({
|
|
8978
9046
|
'et-combobox-option--selected': toSignal(this.selected$),
|
|
8979
9047
|
'et-combobox-option--disabled': toSignal(this.disabled$),
|
|
@@ -9000,13 +9068,16 @@ class ComboboxOptionComponent {
|
|
|
9000
9068
|
ignoreBlur() {
|
|
9001
9069
|
this.combobox._ignoreNextBlurEvent();
|
|
9002
9070
|
}
|
|
9071
|
+
setActiveByHover() {
|
|
9072
|
+
this.combobox._activeSelectionModel.setActiveOption(this.option);
|
|
9073
|
+
}
|
|
9003
9074
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ComboboxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9004
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: ComboboxOptionComponent, isStandalone: true, selector: "et-combobox-option", inputs: { option: "option" }, host: { attributes: { "role": "option" }, listeners: { "mousedown": "ignoreBlur()", "click": "selectOption()" }, properties: { "attr.id": "id" }, classAttribute: "et-combobox-option" }, providers: [
|
|
9075
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: ComboboxOptionComponent, isStandalone: true, selector: "et-combobox-option", inputs: { option: "option" }, host: { attributes: { "role": "option" }, listeners: { "mousedown": "ignoreBlur()", "click": "selectOption()", "mouseenter": "setActiveByHover()" }, properties: { "attr.id": "id" }, classAttribute: "et-combobox-option" }, providers: [
|
|
9005
9076
|
{
|
|
9006
9077
|
provide: COMBOBOX_OPTION_TOKEN,
|
|
9007
9078
|
useExisting: ComboboxOptionComponent,
|
|
9008
9079
|
},
|
|
9009
|
-
], ngImport: i0, template: "<ng-container *ngIf=\"combobox.customOptionTpl$ | async as customOptionTpl; else compOrDefaultOptionLabelTpl\">\n <ng-container *ngTemplateOutlet=\"customOptionTpl; context: { option }\" />\n</ng-container>\n\n<ng-template #compOrDefaultOptionLabelTpl>\n <ng-container *ngIf=\"combobox.customOptionComponent$ | async as comp; else defaultOptionLabelTpl\">\n <ng-container
|
|
9080
|
+
], ngImport: i0, template: "<ng-container *ngIf=\"combobox.customOptionTpl$ | async as customOptionTpl; else compOrDefaultOptionLabelTpl\">\n <ng-container *ngTemplateOutlet=\"customOptionTpl; context: { option }\" />\n</ng-container>\n\n<ng-template #compOrDefaultOptionLabelTpl>\n <ng-container *ngIf=\"combobox.customOptionComponent$ | async as comp; else defaultOptionLabelTpl\">\n <ng-container\n *ngComponentOutlet=\"comp; inputs: (customOptionComponentInputs$ | async) ?? { option }\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultOptionLabelTpl>\n {{ combobox.getOptionLabel(option) | async }}\n </ng-template>\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"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
9010
9081
|
}
|
|
9011
9082
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ComboboxOptionComponent, decorators: [{
|
|
9012
9083
|
type: Component,
|
|
@@ -9014,6 +9085,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
|
|
|
9014
9085
|
class: 'et-combobox-option',
|
|
9015
9086
|
'(mousedown)': 'ignoreBlur()',
|
|
9016
9087
|
'(click)': 'selectOption()',
|
|
9088
|
+
'(mouseenter)': 'setActiveByHover()',
|
|
9017
9089
|
'[attr.id]': 'id',
|
|
9018
9090
|
role: 'option',
|
|
9019
9091
|
}, imports: [AsyncPipe, NgIf, NgTemplateOutlet, NgComponentOutlet], hostDirectives: [], providers: [
|
|
@@ -9021,7 +9093,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
|
|
|
9021
9093
|
provide: COMBOBOX_OPTION_TOKEN,
|
|
9022
9094
|
useExisting: ComboboxOptionComponent,
|
|
9023
9095
|
},
|
|
9024
|
-
], template: "<ng-container *ngIf=\"combobox.customOptionTpl$ | async as customOptionTpl; else compOrDefaultOptionLabelTpl\">\n <ng-container *ngTemplateOutlet=\"customOptionTpl; context: { option }\" />\n</ng-container>\n\n<ng-template #compOrDefaultOptionLabelTpl>\n <ng-container *ngIf=\"combobox.customOptionComponent$ | async as comp; else defaultOptionLabelTpl\">\n <ng-container
|
|
9096
|
+
], template: "<ng-container *ngIf=\"combobox.customOptionTpl$ | async as customOptionTpl; else compOrDefaultOptionLabelTpl\">\n <ng-container *ngTemplateOutlet=\"customOptionTpl; context: { option }\" />\n</ng-container>\n\n<ng-template #compOrDefaultOptionLabelTpl>\n <ng-container *ngIf=\"combobox.customOptionComponent$ | async as comp; else defaultOptionLabelTpl\">\n <ng-container\n *ngComponentOutlet=\"comp; inputs: (customOptionComponentInputs$ | async) ?? { option }\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultOptionLabelTpl>\n {{ combobox.getOptionLabel(option) | async }}\n </ng-template>\n</ng-template>\n" }]
|
|
9025
9097
|
}], propDecorators: { option: [{
|
|
9026
9098
|
type: Input,
|
|
9027
9099
|
args: [{ required: true }]
|
|
@@ -9045,6 +9117,10 @@ class ComboboxBodyComponent {
|
|
|
9045
9117
|
'aria-multiselectable': toSignal(this.combobox.multiple$),
|
|
9046
9118
|
'aria-labelledby': toSignal(this.combobox._input.labelId$),
|
|
9047
9119
|
});
|
|
9120
|
+
this.customErrorComponentInputs$ = combineLatest([
|
|
9121
|
+
this.combobox.error$,
|
|
9122
|
+
this.combobox.customBodyErrorComponentInputs$,
|
|
9123
|
+
]).pipe(map(([error, inputs]) => ({ error, ...inputs })));
|
|
9048
9124
|
this._bodyTemplate = null;
|
|
9049
9125
|
this.trackByFn = (index, item) => this.combobox._selectionModel.getKey(item);
|
|
9050
9126
|
}
|
|
@@ -9065,7 +9141,7 @@ class ComboboxBodyComponent {
|
|
|
9065
9141
|
provide: COMBOBOX_BODY_TOKEN,
|
|
9066
9142
|
useExisting: ComboboxBodyComponent,
|
|
9067
9143
|
},
|
|
9068
|
-
], viewQueries: [{ propertyName: "_containerElementRef", first: true, predicate: ["containerElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }, { propertyName: "_options", predicate: ComboboxOptionComponent, descendants: true }], hostDirectives: [{ directive: i1$2.ClickOutsideDirective }, { directive: i2$1.ProvideThemeDirective }], ngImport: i0, template: "<div #containerElement class=\"et-combobox-body-container\" etAnimatedLifecycle>\n <ng-container *etLet=\"combobox.options$ | async as options\">\n <ng-container *ngIf=\"!options?.length && !combobox.error && !combobox.loading\">\n <ng-container *ngIf=\"combobox.customBodyEmptyTpl$ | async as tpl; else componentOrNone\">\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </ng-container>\n <ng-template #componentOrNone>\n <ng-container *ngIf=\"combobox.customBodyEmptyComponent$ | async as comp; else default\">\n <ng-container
|
|
9144
|
+
], viewQueries: [{ propertyName: "_containerElementRef", first: true, predicate: ["containerElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }, { propertyName: "_options", predicate: ComboboxOptionComponent, descendants: true }], hostDirectives: [{ directive: i1$2.ClickOutsideDirective }, { directive: i2$1.ProvideThemeDirective }], ngImport: i0, template: "<div #containerElement class=\"et-combobox-body-container\" etAnimatedLifecycle>\n <ng-container *etLet=\"combobox.options$ | async as options\">\n <ng-container *ngIf=\"!options?.length && !combobox.error && !combobox.loading\">\n <ng-container *ngIf=\"combobox.customBodyEmptyTpl$ | async as tpl; else componentOrNone\">\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </ng-container>\n <ng-template #componentOrNone>\n <ng-container *ngIf=\"combobox.customBodyEmptyComponent$ | async as comp; else default\">\n <ng-container\n *ngComponentOutlet=\"comp; inputs: (combobox.customBodyEmptyComponentInputs$ | async) ?? undefined\"\n />\n </ng-container>\n <ng-template #default>\n <p class=\"et-combobox-body--empty\">{{ combobox._tempEmptyText }}</p>\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"combobox.error && !combobox.loading\">\n <ng-container *ngIf=\"combobox.customBodyErrorTpl$ | async as tpl; else componentOrNone\">\n <ng-container *ngTemplateOutlet=\"tpl; context: { error: combobox.error }\" />\n </ng-container>\n <ng-template #componentOrNone>\n <ng-container *ngIf=\"combobox.customBodyErrorComponent$ | async as comp\">\n <ng-container\n *ngComponentOutlet=\"comp; inputs: (customErrorComponentInputs$ | async) ?? { error: combobox.error }\"\n />\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"combobox.loading$ | async\">\n <ng-container *ngIf=\"combobox.customBodyLoadingTpl$ | async as tpl; else componentOrNone\">\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </ng-container>\n <ng-template #componentOrNone>\n <ng-container *ngIf=\"combobox.customBodyLoadingComponent$ | async as comp\">\n <ng-container\n *ngComponentOutlet=\"comp; inputs: (combobox.customBodyLoadingComponentInputs$ | async) ?? undefined\"\n />\n </ng-container>\n </ng-template>\n </ng-container>\n\n <et-combobox-option *ngFor=\"let option of options; trackBy: trackByFn\" [option]=\"option\" />\n\n <ng-container *ngIf=\"options?.length && combobox.showBodyMoreItemsHint\">\n <ng-container *ngIf=\"combobox.customBodyMoreItemsHintTpl$ | async as tpl; else componentOrNone\">\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </ng-container>\n <ng-template #componentOrNone>\n <ng-container *ngIf=\"combobox.customBodyMoreItemsHintComponent$ | async as comp; else default\">\n <ng-container\n *ngComponentOutlet=\"comp; inputs: (combobox.customBodyMoreItemsHintComponentInputs$ | async) ?? undefined\"\n />\n </ng-container>\n <ng-template #default>\n <p *ngIf=\"combobox.bodyMoreItemsHintText\" class=\"et-combobox-body--more-items-hint\">\n {{ combobox.bodyMoreItemsHintText }}\n </p>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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 }); }
|
|
9069
9145
|
}
|
|
9070
9146
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ComboboxBodyComponent, decorators: [{
|
|
9071
9147
|
type: Component,
|
|
@@ -9088,7 +9164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
|
|
|
9088
9164
|
provide: COMBOBOX_BODY_TOKEN,
|
|
9089
9165
|
useExisting: ComboboxBodyComponent,
|
|
9090
9166
|
},
|
|
9091
|
-
], template: "<div #containerElement class=\"et-combobox-body-container\" etAnimatedLifecycle>\n <ng-container *etLet=\"combobox.options$ | async as options\">\n <ng-container *ngIf=\"!options?.length && !combobox.error && !combobox.loading\">\n <ng-container *ngIf=\"combobox.customBodyEmptyTpl$ | async as tpl; else componentOrNone\">\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </ng-container>\n <ng-template #componentOrNone>\n <ng-container *ngIf=\"combobox.customBodyEmptyComponent$ | async as comp; else default\">\n <ng-container
|
|
9167
|
+
], template: "<div #containerElement class=\"et-combobox-body-container\" etAnimatedLifecycle>\n <ng-container *etLet=\"combobox.options$ | async as options\">\n <ng-container *ngIf=\"!options?.length && !combobox.error && !combobox.loading\">\n <ng-container *ngIf=\"combobox.customBodyEmptyTpl$ | async as tpl; else componentOrNone\">\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </ng-container>\n <ng-template #componentOrNone>\n <ng-container *ngIf=\"combobox.customBodyEmptyComponent$ | async as comp; else default\">\n <ng-container\n *ngComponentOutlet=\"comp; inputs: (combobox.customBodyEmptyComponentInputs$ | async) ?? undefined\"\n />\n </ng-container>\n <ng-template #default>\n <p class=\"et-combobox-body--empty\">{{ combobox._tempEmptyText }}</p>\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"combobox.error && !combobox.loading\">\n <ng-container *ngIf=\"combobox.customBodyErrorTpl$ | async as tpl; else componentOrNone\">\n <ng-container *ngTemplateOutlet=\"tpl; context: { error: combobox.error }\" />\n </ng-container>\n <ng-template #componentOrNone>\n <ng-container *ngIf=\"combobox.customBodyErrorComponent$ | async as comp\">\n <ng-container\n *ngComponentOutlet=\"comp; inputs: (customErrorComponentInputs$ | async) ?? { error: combobox.error }\"\n />\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"combobox.loading$ | async\">\n <ng-container *ngIf=\"combobox.customBodyLoadingTpl$ | async as tpl; else componentOrNone\">\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </ng-container>\n <ng-template #componentOrNone>\n <ng-container *ngIf=\"combobox.customBodyLoadingComponent$ | async as comp\">\n <ng-container\n *ngComponentOutlet=\"comp; inputs: (combobox.customBodyLoadingComponentInputs$ | async) ?? undefined\"\n />\n </ng-container>\n </ng-template>\n </ng-container>\n\n <et-combobox-option *ngFor=\"let option of options; trackBy: trackByFn\" [option]=\"option\" />\n\n <ng-container *ngIf=\"options?.length && combobox.showBodyMoreItemsHint\">\n <ng-container *ngIf=\"combobox.customBodyMoreItemsHintTpl$ | async as tpl; else componentOrNone\">\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </ng-container>\n <ng-template #componentOrNone>\n <ng-container *ngIf=\"combobox.customBodyMoreItemsHintComponent$ | async as comp; else default\">\n <ng-container\n *ngComponentOutlet=\"comp; inputs: (combobox.customBodyMoreItemsHintComponentInputs$ | async) ?? undefined\"\n />\n </ng-container>\n <ng-template #default>\n <p *ngIf=\"combobox.bodyMoreItemsHintText\" class=\"et-combobox-body--more-items-hint\">\n {{ combobox.bodyMoreItemsHintText }}\n </p>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n</div>\n" }]
|
|
9092
9168
|
}], propDecorators: { _containerElementRef: [{
|
|
9093
9169
|
type: ViewChild,
|
|
9094
9170
|
args: ['containerElement', { static: true, read: ElementRef }]
|
|
@@ -9107,7 +9183,7 @@ class ComboboxComponent extends DecoratedInputBase {
|
|
|
9107
9183
|
this.combobox.setBodyComponent(ComboboxBodyComponent);
|
|
9108
9184
|
}
|
|
9109
9185
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9110
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: ComboboxComponent, isStandalone: true, selector: "et-combobox", host: { listeners: { "click": "combobox.selectInputAndOpen()" }, classAttribute: "et-combobox" }, usesInheritance: true, hostDirectives: [{ directive: i1$2.AnimatedOverlayDirective }, { 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", "allowCustomValues", "allowCustomValues", "selectedOptionComponent", "selectedOptionComponent", "optionComponent", "optionComponent", "bodyErrorComponent", "bodyErrorComponent", "bodyLoadingComponent", "bodyLoadingComponent", "bodyEmptyComponent", "bodyEmptyComponent", "bodyMoreItemsHintComponent", "bodyMoreItemsHintComponent", "showBodyMoreItemsHint", "showBodyMoreItemsHint", "bodyEmptyText", "bodyEmptyText", "bodyMoreItemsHintText", "bodyMoreItemsHintText"], outputs: ["filterChange", "filterChange"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<div>\n <div *ngIf=\"combobox.multiple$ | async\" class=\"et-combobox-selected-options\">\n <div\n *ngFor=\"let item of combobox.selectedOptions$ | async; trackBy: combobox.trackByOptionKeyFn\"\n class=\"et-combobox-selected-option\"\n aria-hidden=\"true\"\n >\n <ng-container\n *ngIf=\"\n combobox.customSelectedOptionTpl$ | async as customSelectedOptionTpl;\n else compOrDefaultSelectedOptionLabelTpl\n \"\n >\n <ng-container *ngTemplateOutlet=\"customSelectedOptionTpl; context: { option: item }\" />\n </ng-container>\n\n <ng-template #compOrDefaultSelectedOptionLabelTpl>\n <ng-container\n *ngIf=\"combobox.customSelectedOptionComponent$ | async as comp; else defaultSelectedOptionLabelTpl\"\n >\n <ng-container
|
|
9186
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: ComboboxComponent, isStandalone: true, selector: "et-combobox", host: { listeners: { "click": "combobox.selectInputAndOpen()" }, classAttribute: "et-combobox" }, usesInheritance: true, hostDirectives: [{ directive: i1$2.AnimatedOverlayDirective }, { 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", "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"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<div>\n <div *ngIf=\"combobox.multiple$ | async\" class=\"et-combobox-selected-options\">\n <div\n *ngFor=\"let item of combobox.selectedOptions$ | async; trackBy: combobox.trackByOptionKeyFn\"\n class=\"et-combobox-selected-option\"\n aria-hidden=\"true\"\n >\n <ng-container\n *ngIf=\"\n combobox.customSelectedOptionTpl$ | async as customSelectedOptionTpl;\n else compOrDefaultSelectedOptionLabelTpl\n \"\n >\n <ng-container *ngTemplateOutlet=\"customSelectedOptionTpl; context: { option: item }\" />\n </ng-container>\n\n <ng-template #compOrDefaultSelectedOptionLabelTpl>\n <ng-container\n *ngIf=\"combobox.customSelectedOptionComponent$ | async as comp; else defaultSelectedOptionLabelTpl\"\n >\n <ng-container\n *ngComponentOutlet=\"\n comp;\n inputs: (combobox.combineSelectedOptionWithComponentInputs(item) | async) ?? { option: item }\n \"\n ></ng-container>\n </ng-container>\n <ng-template #defaultSelectedOptionLabelTpl>\n {{ combobox.getOptionLabel(item) | async }}\n </ng-template>\n </ng-template>\n\n <button\n (click)=\"combobox.removeSelectedOption(item); $event.stopPropagation()\"\n class=\"et-combobox-selected-option-remove\"\n tabindex=\"-1\"\n >\n x\n </button>\n </div>\n <div class=\"et-combobox-muliple-input\">\n <ng-container *ngTemplateOutlet=\"inputTpl\" />\n </div>\n </div>\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 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 <ng-container *ngIf=\"(combobox.multiple$ | async) === false\">\n <ng-container *ngTemplateOutlet=\"inputTpl\" />\n </ng-container>\n\n <et-chevron-icon class=\"et-combobox-chevron\" />\n</div>\n\n<ng-content select=\"[etInputSuffix]\" />\n\n<ng-template>\n <ng-content />\n</ng-template>\n", styles: [".et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-enter-from,.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-leave-to{opacity:0;transform:scaleY(0)}.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-enter-active{transition:transform 125ms var(--ease-out-5),opacity 125ms var(--ease-out-5)}.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-leave-active{transition:transform 50ms var(--ease-in-5),opacity 50ms var(--ease-in-5)}.et-combobox-body.et-with-default-animation[et-floating-placement^=top] .et-combobox-body-container{transform-origin:bottom}.et-combobox-body.et-with-default-animation[et-floating-placement^=bottom] .et-combobox-body-container{transform-origin:top}.et-combobox-body-container{display:block;background-color:#3d3d3d;color:#fff;max-height:min(200px,var(--et-floating-max-height, 200px));overflow:auto}@supports (overflow: overlay){.et-combobox-body-container{overflow:overlay}}.et-combobox-body{width:100%;display:grid;transform:var(--et-floating-translate);will-change:transform}.et-combobox-option{display:block}:where(.et-combobox-option--active){background-color:#1e1e1e}.et-combobox{display:block;border:1px solid #ccc;padding:15px;position:relative}.et-combobox-chevron{transform:rotate(180deg);display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:15px;inset-block-start:7px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: ChevronIconComponent, selector: "et-chevron-icon" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
9111
9187
|
}
|
|
9112
9188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
9113
9189
|
type: Component,
|
|
@@ -9149,11 +9225,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
|
|
|
9149
9225
|
'showBodyMoreItemsHint',
|
|
9150
9226
|
'bodyEmptyText',
|
|
9151
9227
|
'bodyMoreItemsHintText',
|
|
9228
|
+
'optionComponentInputs',
|
|
9229
|
+
'selectedOptionComponentInputs',
|
|
9230
|
+
'bodyErrorComponentInputs',
|
|
9231
|
+
'bodyLoadingComponentInputs',
|
|
9232
|
+
'bodyEmptyComponentInputs',
|
|
9233
|
+
'bodyMoreItemsHintComponentInputs',
|
|
9152
9234
|
],
|
|
9153
9235
|
// eslint-disable-next-line @angular-eslint/no-outputs-metadata-property
|
|
9154
9236
|
outputs: ['filterChange'],
|
|
9155
9237
|
},
|
|
9156
|
-
], template: "<ng-content select=\"[etInputPrefix]\" />\n\n<div>\n <div *ngIf=\"combobox.multiple$ | async\" class=\"et-combobox-selected-options\">\n <div\n *ngFor=\"let item of combobox.selectedOptions$ | async; trackBy: combobox.trackByOptionKeyFn\"\n class=\"et-combobox-selected-option\"\n aria-hidden=\"true\"\n >\n <ng-container\n *ngIf=\"\n combobox.customSelectedOptionTpl$ | async as customSelectedOptionTpl;\n else compOrDefaultSelectedOptionLabelTpl\n \"\n >\n <ng-container *ngTemplateOutlet=\"customSelectedOptionTpl; context: { option: item }\" />\n </ng-container>\n\n <ng-template #compOrDefaultSelectedOptionLabelTpl>\n <ng-container\n *ngIf=\"combobox.customSelectedOptionComponent$ | async as comp; else defaultSelectedOptionLabelTpl\"\n >\n <ng-container
|
|
9238
|
+
], template: "<ng-content select=\"[etInputPrefix]\" />\n\n<div>\n <div *ngIf=\"combobox.multiple$ | async\" class=\"et-combobox-selected-options\">\n <div\n *ngFor=\"let item of combobox.selectedOptions$ | async; trackBy: combobox.trackByOptionKeyFn\"\n class=\"et-combobox-selected-option\"\n aria-hidden=\"true\"\n >\n <ng-container\n *ngIf=\"\n combobox.customSelectedOptionTpl$ | async as customSelectedOptionTpl;\n else compOrDefaultSelectedOptionLabelTpl\n \"\n >\n <ng-container *ngTemplateOutlet=\"customSelectedOptionTpl; context: { option: item }\" />\n </ng-container>\n\n <ng-template #compOrDefaultSelectedOptionLabelTpl>\n <ng-container\n *ngIf=\"combobox.customSelectedOptionComponent$ | async as comp; else defaultSelectedOptionLabelTpl\"\n >\n <ng-container\n *ngComponentOutlet=\"\n comp;\n inputs: (combobox.combineSelectedOptionWithComponentInputs(item) | async) ?? { option: item }\n \"\n ></ng-container>\n </ng-container>\n <ng-template #defaultSelectedOptionLabelTpl>\n {{ combobox.getOptionLabel(item) | async }}\n </ng-template>\n </ng-template>\n\n <button\n (click)=\"combobox.removeSelectedOption(item); $event.stopPropagation()\"\n class=\"et-combobox-selected-option-remove\"\n tabindex=\"-1\"\n >\n x\n </button>\n </div>\n <div class=\"et-combobox-muliple-input\">\n <ng-container *ngTemplateOutlet=\"inputTpl\" />\n </div>\n </div>\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 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 <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"] }]
|
|
9157
9239
|
}], ctorParameters: function () { return []; } });
|
|
9158
9240
|
|
|
9159
9241
|
const ComboboxImports = [
|
|
@@ -9393,8 +9475,11 @@ class SelectOptionDirective {
|
|
|
9393
9475
|
_setActive(isActive) {
|
|
9394
9476
|
this._isActive$.next(isActive);
|
|
9395
9477
|
}
|
|
9478
|
+
setActiveByHover() {
|
|
9479
|
+
this._select._setActiveOption(this);
|
|
9480
|
+
}
|
|
9396
9481
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SelectOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
9397
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: SelectOptionDirective, isStandalone: true, inputs: { value: "value", disabled: "disabled" }, host: { attributes: { "role": "option" }, listeners: { "click": "setSelectValue()", "etObserveContent": "_updateViewValue()" }, properties: { "attr.id": "id", "attr.aria-disabled": "disabled", "class.et-select-option--disabled": "disabled" } }, providers: [
|
|
9482
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: SelectOptionDirective, isStandalone: true, inputs: { value: "value", disabled: "disabled" }, host: { attributes: { "role": "option" }, listeners: { "click": "setSelectValue()", "mouseenter": "setActiveByHover()", "etObserveContent": "_updateViewValue()" }, properties: { "attr.id": "id", "attr.aria-disabled": "disabled", "class.et-select-option--disabled": "disabled" } }, providers: [
|
|
9398
9483
|
{
|
|
9399
9484
|
provide: SELECT_OPTION_TOKEN,
|
|
9400
9485
|
useExisting: SelectOptionDirective,
|
|
@@ -9416,6 +9501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
|
|
|
9416
9501
|
'[attr.aria-disabled]': 'disabled',
|
|
9417
9502
|
'[class.et-select-option--disabled]': 'disabled',
|
|
9418
9503
|
'(click)': 'setSelectValue()',
|
|
9504
|
+
'(mouseenter)': 'setActiveByHover()',
|
|
9419
9505
|
'(etObserveContent)': '_updateViewValue()',
|
|
9420
9506
|
role: 'option',
|
|
9421
9507
|
},
|