@ethlete/cdk 4.0.4 → 4.1.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.
- package/CHANGELOG.md +6 -0
- package/esm2022/lib/components/forms/components/select/components/combobox/components/combobox/combobox.component.mjs +3 -3
- package/esm2022/lib/components/forms/components/select/components/combobox/partials/combobox-option/combobox-option.component.mjs +3 -3
- package/esm2022/lib/components/forms/directives/input/input.directive.mjs +21 -1
- package/esm2022/lib/components/forms/directives/writeable-input/writeable-input.directive.mjs +2 -1
- package/esm2022/lib/components/forms/services/input-state.service.mjs +3 -1
- package/fesm2022/ethlete-cdk.mjs +27 -4
- package/fesm2022/ethlete-cdk.mjs.map +1 -1
- package/lib/components/forms/directives/input/input.directive.d.ts +3 -0
- package/lib/components/forms/services/input-state.service.d.ts +2 -0
- package/package.json +1 -1
package/fesm2022/ethlete-cdk.mjs
CHANGED
|
@@ -6193,6 +6193,8 @@ class InputStateService {
|
|
|
6193
6193
|
this.usesImplicitControl = toSignal(this.usesImplicitControl$, { requireSync: true });
|
|
6194
6194
|
this.nativeInputRef$ = new BehaviorSubject(null);
|
|
6195
6195
|
this.nativeInputRef = toSignal(this.nativeInputRef$, { requireSync: true });
|
|
6196
|
+
this.isNeverEmptyInput$ = new BehaviorSubject(false);
|
|
6197
|
+
this.isNeverEmptyInput = toSignal(this.isNeverEmptyInput$, { requireSync: true });
|
|
6196
6198
|
this.autofilled$ = new BehaviorSubject(false);
|
|
6197
6199
|
this.autofilled = toSignal(this.autofilled$, { requireSync: true });
|
|
6198
6200
|
this.valueIsTruthy$ = this.value$.pipe(map((value) => !!value));
|
|
@@ -6574,6 +6576,12 @@ class InputDirective {
|
|
|
6574
6576
|
get errorId() {
|
|
6575
6577
|
return this._formFieldStateService.errorId();
|
|
6576
6578
|
}
|
|
6579
|
+
get isNeverEmptyInput$() {
|
|
6580
|
+
return this._inputStateService.isNeverEmptyInput$.asObservable();
|
|
6581
|
+
}
|
|
6582
|
+
get isNeverEmptyInput() {
|
|
6583
|
+
return this._inputStateService.isNeverEmptyInput();
|
|
6584
|
+
}
|
|
6577
6585
|
constructor() {
|
|
6578
6586
|
this._injector = inject(Injector);
|
|
6579
6587
|
this._inputStateService = inject(InputStateService);
|
|
@@ -6583,6 +6591,7 @@ class InputDirective {
|
|
|
6583
6591
|
this._autofillMonitor = inject(AutofillMonitor);
|
|
6584
6592
|
this._focusMonitor = inject(FocusMonitor);
|
|
6585
6593
|
this._elementRef = inject(ElementRef);
|
|
6594
|
+
this._neverEmptyInputs = ['date', 'datetime', 'datetime-local', 'month', 'time', 'week'];
|
|
6586
6595
|
this._id = `et-input-${++nextUniqueId$4}`;
|
|
6587
6596
|
this.autocomplete = null;
|
|
6588
6597
|
this.placeholder = null;
|
|
@@ -6640,6 +6649,19 @@ class InputDirective {
|
|
|
6640
6649
|
this._inputStateService.isFocusedVia$.next(origin);
|
|
6641
6650
|
}), takeUntil(this._destroy$))
|
|
6642
6651
|
.subscribe();
|
|
6652
|
+
this.nativeInputRef$
|
|
6653
|
+
.pipe(tap((nativeInput) => {
|
|
6654
|
+
const type = nativeInput?.element.nativeElement.getAttribute('type');
|
|
6655
|
+
if (!type)
|
|
6656
|
+
return;
|
|
6657
|
+
if (this._neverEmptyInputs.indexOf(type) > -1) {
|
|
6658
|
+
this._inputStateService.isNeverEmptyInput$.next(true);
|
|
6659
|
+
}
|
|
6660
|
+
else {
|
|
6661
|
+
this._inputStateService.isNeverEmptyInput$.next(false);
|
|
6662
|
+
}
|
|
6663
|
+
}), takeUntil(this._destroy$))
|
|
6664
|
+
.subscribe();
|
|
6643
6665
|
}
|
|
6644
6666
|
ngOnDestroy() {
|
|
6645
6667
|
if (this.nativeInputRef) {
|
|
@@ -6991,6 +7013,7 @@ class WriteableInputDirective {
|
|
|
6991
7013
|
'et-empty': this._inputStateService.valueIsEmpty,
|
|
6992
7014
|
'et-should-display-error': this._inputStateService.shouldDisplayError,
|
|
6993
7015
|
'et-autofilled': this._inputStateService.autofilled,
|
|
7016
|
+
'et-native-input-is-never-empty': this._inputStateService.isNeverEmptyInput,
|
|
6994
7017
|
});
|
|
6995
7018
|
}
|
|
6996
7019
|
writeValue(value) {
|
|
@@ -9437,7 +9460,7 @@ class ComboboxOptionComponent {
|
|
|
9437
9460
|
provide: COMBOBOX_OPTION_TOKEN,
|
|
9438
9461
|
useExisting: ComboboxOptionComponent,
|
|
9439
9462
|
},
|
|
9440
|
-
], 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
|
|
9463
|
+
], 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 *ngComponentOutlet=\"comp; inputs: (customOptionComponentInputs$ | async) ?? { option }\" />\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 }); }
|
|
9441
9464
|
}
|
|
9442
9465
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComboboxOptionComponent, decorators: [{
|
|
9443
9466
|
type: Component,
|
|
@@ -9453,7 +9476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
9453
9476
|
provide: COMBOBOX_OPTION_TOKEN,
|
|
9454
9477
|
useExisting: ComboboxOptionComponent,
|
|
9455
9478
|
},
|
|
9456
|
-
], 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
|
|
9479
|
+
], 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 *ngComponentOutlet=\"comp; inputs: (customOptionComponentInputs$ | async) ?? { option }\" />\n </ng-container>\n <ng-template #defaultOptionLabelTpl>\n {{ combobox.getOptionLabel(option) | async }}\n </ng-template>\n</ng-template>\n" }]
|
|
9457
9480
|
}], propDecorators: { option: [{
|
|
9458
9481
|
type: Input,
|
|
9459
9482
|
args: [{ required: true }]
|
|
@@ -9543,7 +9566,7 @@ class ComboboxComponent extends DecoratedInputBase {
|
|
|
9543
9566
|
this.combobox.setBodyComponent(ComboboxBodyComponent);
|
|
9544
9567
|
}
|
|
9545
9568
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9546
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ComboboxComponent, isStandalone: true, selector: "et-combobox", host: { listeners: { "click": "combobox.selectInputAndOpen()" }, classAttribute: "et-combobox" }, usesInheritance: true, hostDirectives: [{ directive: i1$2.AnimatedOverlayDirective }, { directive: OverlayCloseBlockerDirective }, { directive: InputDirective, inputs: ["placeholder", "placeholder"] }, { directive: ComboboxDirective, inputs: ["options", "options", "initialValue", "initialValue", "filterInternal", "filterInternal", "loading", "loading", "error", "error", "emptyText", "emptyText", "placeholder", "placeholder", "multiple", "multiple", "bindLabel", "bindLabel", "bindValue", "bindValue", "bindDisabled", "bindDisabled", "allowCustomValues", "allowCustomValues", "selectedOptionComponent", "selectedOptionComponent", "optionComponent", "optionComponent", "bodyErrorComponent", "bodyErrorComponent", "bodyLoadingComponent", "bodyLoadingComponent", "bodyEmptyComponent", "bodyEmptyComponent", "bodyMoreItemsHintComponent", "bodyMoreItemsHintComponent", "showBodyMoreItemsHint", "showBodyMoreItemsHint", "bodyEmptyText", "bodyEmptyText", "bodyMoreItemsHintText", "bodyMoreItemsHintText", "optionComponentInputs", "optionComponentInputs", "selectedOptionComponentInputs", "selectedOptionComponentInputs", "bodyErrorComponentInputs", "bodyErrorComponentInputs", "bodyLoadingComponentInputs", "bodyLoadingComponentInputs", "bodyEmptyComponentInputs", "bodyEmptyComponentInputs", "bodyMoreItemsHintComponentInputs", "bodyMoreItemsHintComponentInputs"], outputs: ["filterChange", "filterChange"] }], 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
|
|
9569
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ComboboxComponent, isStandalone: true, selector: "et-combobox", host: { listeners: { "click": "combobox.selectInputAndOpen()" }, classAttribute: "et-combobox" }, usesInheritance: true, hostDirectives: [{ directive: i1$2.AnimatedOverlayDirective }, { directive: OverlayCloseBlockerDirective }, { directive: InputDirective, inputs: ["placeholder", "placeholder"] }, { directive: ComboboxDirective, inputs: ["options", "options", "initialValue", "initialValue", "filterInternal", "filterInternal", "loading", "loading", "error", "error", "emptyText", "emptyText", "placeholder", "placeholder", "multiple", "multiple", "bindLabel", "bindLabel", "bindValue", "bindValue", "bindDisabled", "bindDisabled", "allowCustomValues", "allowCustomValues", "selectedOptionComponent", "selectedOptionComponent", "optionComponent", "optionComponent", "bodyErrorComponent", "bodyErrorComponent", "bodyLoadingComponent", "bodyLoadingComponent", "bodyEmptyComponent", "bodyEmptyComponent", "bodyMoreItemsHintComponent", "bodyMoreItemsHintComponent", "showBodyMoreItemsHint", "showBodyMoreItemsHint", "bodyEmptyText", "bodyEmptyText", "bodyMoreItemsHintText", "bodyMoreItemsHintText", "optionComponentInputs", "optionComponentInputs", "selectedOptionComponentInputs", "selectedOptionComponentInputs", "bodyErrorComponentInputs", "bodyErrorComponentInputs", "bodyLoadingComponentInputs", "bodyLoadingComponentInputs", "bodyEmptyComponentInputs", "bodyEmptyComponentInputs", "bodyMoreItemsHintComponentInputs", "bodyMoreItemsHintComponentInputs"], outputs: ["filterChange", "filterChange"] }], 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 />\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(); combobox.focus()\"\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 autocomplete=\"off\"\n aria-haspopup=\"listbox\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n type=\"text\"\n value=\"{{ combobox.currentFilter }}\"\n etNativeInputRef\n />\n </ng-template>\n\n <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 }); }
|
|
9547
9570
|
}
|
|
9548
9571
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
9549
9572
|
type: Component,
|
|
@@ -9597,7 +9620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
9597
9620
|
// eslint-disable-next-line @angular-eslint/no-outputs-metadata-property
|
|
9598
9621
|
outputs: ['filterChange'],
|
|
9599
9622
|
},
|
|
9600
|
-
], 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
|
|
9623
|
+
], 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 />\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(); combobox.focus()\"\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 autocomplete=\"off\"\n aria-haspopup=\"listbox\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n type=\"text\"\n value=\"{{ combobox.currentFilter }}\"\n etNativeInputRef\n />\n </ng-template>\n\n <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"] }]
|
|
9601
9624
|
}], ctorParameters: function () { return []; } });
|
|
9602
9625
|
|
|
9603
9626
|
const ComboboxImports = [
|