@ethlete/cdk 3.8.0 → 3.8.2
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 +3 -3
- package/esm2022/lib/components/forms/components/select/components/combobox/directives/combobox/combobox.directive.mjs +19 -6
- package/esm2022/lib/components/forms/components/select/components/combobox/partials/combobox-body/combobox-body.component.mjs +19 -3
- package/esm2022/lib/components/forms/components/select/components/combobox/partials/combobox-option/combobox-option.component.mjs +18 -2
- package/esm2022/lib/components/icons/chevron-icon/chevron-icon.component.mjs +3 -2
- package/fesm2022/ethlete-cdk.mjs +56 -10
- package/fesm2022/ethlete-cdk.mjs.map +1 -1
- package/lib/components/forms/components/select/components/combobox/directives/combobox/combobox.directive.d.ts +6 -2
- package/lib/components/forms/components/select/components/combobox/partials/combobox-body/combobox-body.component.d.ts +1 -0
- package/lib/components/forms/components/select/components/combobox/partials/combobox-option/combobox-option.component.d.ts +1 -0
- package/package.json +1 -1
- package/src/lib/styles/easing.css +115 -0
|
@@ -6,8 +6,10 @@ import { COMBOBOX_TOKEN } from '../../directives';
|
|
|
6
6
|
import { isOptionDisabled } from '../../utils';
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
8
|
export const COMBOBOX_OPTION_TOKEN = new InjectionToken('ET_COMBOBOX_OPTION_TOKEN');
|
|
9
|
+
let _uniqueId = 0;
|
|
9
10
|
export class ComboboxOptionComponent {
|
|
10
11
|
constructor() {
|
|
12
|
+
this.id = `et-combobox-option-${_uniqueId++}`;
|
|
11
13
|
this.combobox = inject(COMBOBOX_TOKEN);
|
|
12
14
|
this._elementRef = inject(ElementRef);
|
|
13
15
|
this._option$ = new BehaviorSubject(null);
|
|
@@ -23,6 +25,18 @@ export class ComboboxOptionComponent {
|
|
|
23
25
|
}, {
|
|
24
26
|
attribute: 'class.et-combobox-option--active',
|
|
25
27
|
observable: this.active$,
|
|
28
|
+
}, {
|
|
29
|
+
attribute: 'aria-selected',
|
|
30
|
+
observable: this.selected$.pipe(map((selected) => ({
|
|
31
|
+
render: true,
|
|
32
|
+
value: selected,
|
|
33
|
+
}))),
|
|
34
|
+
}, {
|
|
35
|
+
attribute: 'aria-diabled',
|
|
36
|
+
observable: this.disabled$.pipe(map((selected) => ({
|
|
37
|
+
render: true,
|
|
38
|
+
value: selected,
|
|
39
|
+
}))),
|
|
26
40
|
});
|
|
27
41
|
}
|
|
28
42
|
get option() {
|
|
@@ -42,7 +56,7 @@ export class ComboboxOptionComponent {
|
|
|
42
56
|
this.combobox._ignoreNextBlurEvent();
|
|
43
57
|
}
|
|
44
58
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ComboboxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
45
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ComboboxOptionComponent, isStandalone: true, selector: "et-combobox-option", inputs: { option: "option" }, host: { listeners: { "mousedown": "ignoreBlur()", "click": "selectOption()" }, classAttribute: "et-combobox-option" }, providers: [
|
|
59
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", 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: [
|
|
46
60
|
{
|
|
47
61
|
provide: COMBOBOX_OPTION_TOKEN,
|
|
48
62
|
useExisting: ComboboxOptionComponent,
|
|
@@ -55,6 +69,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
|
|
|
55
69
|
class: 'et-combobox-option',
|
|
56
70
|
'(mousedown)': 'ignoreBlur()',
|
|
57
71
|
'(click)': 'selectOption()',
|
|
72
|
+
'[attr.id]': 'id',
|
|
73
|
+
role: 'option',
|
|
58
74
|
}, imports: [AsyncPipe, NgIf, NgTemplateOutlet, NgComponentOutlet], hostDirectives: [], providers: [
|
|
59
75
|
{
|
|
60
76
|
provide: COMBOBOX_OPTION_TOKEN,
|
|
@@ -65,4 +81,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
|
|
|
65
81
|
type: Input,
|
|
66
82
|
args: [{ required: true }]
|
|
67
83
|
}] } });
|
|
68
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
84
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tYm9ib3gtb3B0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY2RrL3NyYy9saWIvY29tcG9uZW50cy9mb3Jtcy9jb21wb25lbnRzL3NlbGVjdC9jb21wb25lbnRzL2NvbWJvYm94L3BhcnRpYWxzL2NvbWJvYm94LW9wdGlvbi9jb21ib2JveC1vcHRpb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jZGsvc3JjL2xpYi9jb21wb25lbnRzL2Zvcm1zL2NvbXBvbmVudHMvc2VsZWN0L2NvbXBvbmVudHMvY29tYm9ib3gvcGFydGlhbHMvY29tYm9ib3gtb3B0aW9uL2NvbWJvYm94LW9wdGlvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLGlCQUFpQixFQUFFLElBQUksRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ3ZGLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFVBQVUsRUFDVixjQUFjLEVBQ2QsS0FBSyxFQUNMLGlCQUFpQixFQUNqQixNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3ZELE9BQU8sRUFBRSxlQUFlLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUN2RCxPQUFPLEVBQTBCLGNBQWMsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQzFFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGFBQWEsQ0FBQzs7QUFFL0MsTUFBTSxDQUFDLE1BQU0scUJBQXFCLEdBQUcsSUFBSSxjQUFjLENBQTBCLDBCQUEwQixDQUFDLENBQUM7QUFFN0csSUFBSSxTQUFTLEdBQUcs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LG9CQUFvQixjQUVsQixJQUFJLG1CQUNDLHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUksUUFDL0I7d0JBQ0osS0FBSyxFQUFFLG9CQUFvQjt3QkFDM0IsYUFBYSxFQUFFLGNBQWM7d0JBQzdCLFNBQVMsRUFBRSxnQkFBZ0I7d0JBQzNCLFdBQVcsRUFBRSxJQUFJO3dCQUNqQixJQUFJLEVBQUUsUUFBUTtxQkFDZixXQUNRLENBQUMsU0FBUyxFQUFFLElBQUksRUFBRSxnQkFBZ0IsRUFBRSxpQkFBaUIsQ0FBQyxrQkFDL0MsRUFBRSxhQUNQO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxxQkFBcUI7NEJBQzlCLFdBQVcseUJBQXlCO3lCQUNyQztxQkFDRjs4QkFVRyxNQUFNO3NCQURULEtBQUs7dUJBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQXN5bmNQaXBlLCBOZ0NvbXBvbmVudE91dGxldCwgTmdJZiwgTmdUZW1wbGF0ZU91dGxldCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBJbmplY3Rpb25Ub2tlbixcbiAgSW5wdXQsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxuICBpbmplY3QsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgY3JlYXRlUmVhY3RpdmVCaW5kaW5ncyB9IGZyb20gJ0BldGhsZXRlL2NvcmUnO1xuaW1wb3J0IHsgQmVoYXZpb3JTdWJqZWN0LCBtYXAsIHN3aXRjaE1hcCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgQWJzdHJhY3RDb21ib2JveE9wdGlvbiwgQ09NQk9CT1hfVE9LRU4gfSBmcm9tICcuLi8uLi9kaXJlY3RpdmVzJztcbmltcG9ydCB7IGlzT3B0aW9uRGlzYWJsZWQgfSBmcm9tICcuLi8uLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBDT01CT0JPWF9PUFRJT05fVE9LRU4gPSBuZXcgSW5qZWN0aW9uVG9rZW48Q29tYm9ib3hPcHRpb25Db21wb25lbnQ+KCdFVF9DT01CT0JPWF9PUFRJT05fVE9LRU4nKTtcblxubGV0IF91bmlxdWVJZCA9IDA7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2V0LWNvbWJvYm94LW9wdGlvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9jb21ib2JveC1vcHRpb24uY29tcG9uZW50Lmh0bWwnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgaG9zdDoge1xuICAgIGNsYXNzOiAnZXQtY29tYm9ib3gtb3B0aW9uJyxcbiAgICAnKG1vdXNlZG93biknOiAnaWdub3JlQmx1cigpJyxcbiAgICAnKGNsaWNrKSc6ICdzZWxlY3RPcHRpb24oKScsXG4gICAgJ1thdHRyLmlkXSc6ICdpZCcsXG4gICAgcm9sZTogJ29wdGlvbicsXG4gIH0sXG4gIGltcG9ydHM6IFtBc3luY1BpcGUsIE5nSWYsIE5nVGVtcGxhdGVPdXRsZXQsIE5nQ29tcG9uZW50T3V0bGV0XSxcbiAgaG9zdERpcmVjdGl2ZXM6IFtdLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBDT01CT0JPWF9PUFRJT05fVE9LRU4sXG4gICAgICB1c2VFeGlzdGluZzogQ29tYm9ib3hPcHRpb25Db21wb25lbnQsXG4gICAgfSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgQ29tYm9ib3hPcHRpb25Db21wb25lbnQgaW1wbGVtZW50cyBBYnN0cmFjdENvbWJvYm94T3B0aW9uIHtcbiAgcmVhZG9ubHkgaWQgPSBgZXQtY29tYm9ib3gtb3B0aW9uLSR7X3VuaXF1ZUlkKyt9YDtcblxuICBwcm90ZWN0ZWQgcmVhZG9ubHkgY29tYm9ib3ggPSBpbmplY3QoQ09NQk9CT1hfVE9LRU4pO1xuXG4gIHJlYWRvbmx5IF9lbGVtZW50UmVmID0gaW5qZWN0PEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+PihFbGVtZW50UmVmKTtcblxuICBASW5wdXQoeyByZXF1aXJlZDogdHJ1ZSB9KVxuICBnZXQgb3B0aW9uKCkge1xuICAgIHJldHVybiB0aGlzLl9vcHRpb24kLnZhbHVlO1xuICB9XG4gIHNldCBvcHRpb24odmFsdWU6IHVua25vd24pIHtcbiAgICB0aGlzLl9vcHRpb24kLm5leHQodmFsdWUpO1xuICB9XG4gIHJlYWRvbmx5IF9vcHRpb24kID0gbmV3IEJlaGF2aW9yU3ViamVjdDx1bmtub3duPihudWxsKTtcblxuICBwcm90ZWN0ZWQgcmVhZG9ubHkgZGlzYWJsZWQkID0gdGhpcy5fb3B0aW9uJC5waXBlKG1hcCgob3B0KSA9PiBpc09wdGlvbkRpc2FibGVkKG9wdCkpKTtcblxuICBwcm90ZWN0ZWQgcmVhZG9ubHkgc2VsZWN0ZWQkID0gdGhpcy5fb3B0aW9uJC5waXBlKHN3aXRjaE1hcCgob3B0KSA9PiB0aGlzLmNvbWJvYm94LmlzT3B0aW9uU2VsZWN0ZWQob3B0KSkpO1xuXG4gIHByb3RlY3RlZCByZWFkb25seSBhY3RpdmUkID0gdGhpcy5fb3B0aW9uJC5waXBlKHN3aXRjaE1hcCgob3B0KSA9PiB0aGlzLmNvbWJvYm94LmlzT3B0aW9uQWN0aXZlKG9wdCkpKTtcblxuICByZWFkb25seSBfYmluZGluZ3MgPSBjcmVhdGVSZWFjdGl2ZUJpbmRpbmdzKFxuICAgIHtcbiAgICAgIGF0dHJpYnV0ZTogJ2NsYXNzLmV0LWNvbWJvYm94LW9wdGlvbi0tc2VsZWN0ZWQnLFxuICAgICAgb2JzZXJ2YWJsZTogdGhpcy5zZWxlY3RlZCQsXG4gICAgfSxcbiAgICB7XG4gICAgICBhdHRyaWJ1dGU6ICdjbGFzcy5ldC1jb21ib2JveC1vcHRpb24tLWRpc2FibGVkJyxcbiAgICAgIG9ic2VydmFibGU6IHRoaXMuZGlzYWJsZWQkLFxuICAgIH0sXG4gICAge1xuICAgICAgYXR0cmlidXRlOiAnY2xhc3MuZXQtY29tYm9ib3gtb3B0aW9uLS1hY3RpdmUnLFxuICAgICAgb2JzZXJ2YWJsZTogdGhpcy5hY3RpdmUkLFxuICAgIH0sXG4gICAge1xuICAgICAgYXR0cmlidXRlOiAnYXJpYS1zZWxlY3RlZCcsXG4gICAgICBvYnNlcnZhYmxlOiB0aGlzLnNlbGVjdGVkJC5waXBlKFxuICAgICAgICBtYXAoKHNlbGVjdGVkKSA9PiAoe1xuICAgICAgICAgIHJlbmRlcjogdHJ1ZSxcbiAgICAgICAgICB2YWx1ZTogc2VsZWN0ZWQsXG4gICAgICAgIH0pKSxcbiAgICAgICksXG4gICAgfSxcbiAgICB7XG4gICAgICBhdHRyaWJ1dGU6ICdhcmlhLWRpYWJsZWQnLFxuICAgICAgb2JzZXJ2YWJsZTogdGhpcy5kaXNhYmxlZCQucGlwZShcbiAgICAgICAgbWFwKChzZWxlY3RlZCkgPT4gKHtcbiAgICAgICAgICByZW5kZXI6IHRydWUsXG4gICAgICAgICAgdmFsdWU6IHNlbGVjdGVkLFxuICAgICAgICB9KSksXG4gICAgICApLFxuICAgIH0sXG4gICk7XG5cbiAgcHJvdGVjdGVkIHNlbGVjdE9wdGlvbigpIHtcbiAgICBpZiAoaXNPcHRpb25EaXNhYmxlZCh0aGlzLm9wdGlvbikpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICB0aGlzLmNvbWJvYm94LndyaXRlVmFsdWVGcm9tT3B0aW9uKHRoaXMub3B0aW9uKTtcbiAgICB0aGlzLmNvbWJvYm94LmZvY3VzKCk7XG4gIH1cblxuICBwcm90ZWN0ZWQgaWdub3JlQmx1cigpIHtcbiAgICB0aGlzLmNvbWJvYm94Ll9pZ25vcmVOZXh0Qmx1ckV2ZW50KCk7XG4gIH1cbn1cbiIsIjxuZy1jb250YWluZXIgKm5nSWY9XCJjb21ib2JveC5jdXN0b21PcHRpb25UcGwkIHwgYXN5bmMgYXMgY3VzdG9tT3B0aW9uVHBsOyBlbHNlIGNvbXBPckRlZmF1bHRPcHRpb25MYWJlbFRwbFwiPlxuICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiY3VzdG9tT3B0aW9uVHBsOyBjb250ZXh0OiB7IG9wdGlvbiB9XCIgLz5cbjwvbmctY29udGFpbmVyPlxuXG48bmctdGVtcGxhdGUgI2NvbXBPckRlZmF1bHRPcHRpb25MYWJlbFRwbD5cbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImNvbWJvYm94LmN1c3RvbU9wdGlvbkNvbXBvbmVudCQgfCBhc3luYyBhcyBjb21wOyBlbHNlIGRlZmF1bHRPcHRpb25MYWJlbFRwbFwiPlxuICAgIDxuZy1jb250YWluZXIgKm5nQ29tcG9uZW50T3V0bGV0PVwiY29tcDsgaW5wdXRzOiB7IG9wdGlvbiB9XCI+PC9uZy1jb250YWluZXI+XG4gIDwvbmctY29udGFpbmVyPlxuICA8bmctdGVtcGxhdGUgI2RlZmF1bHRPcHRpb25MYWJlbFRwbD5cbiAgICB7eyBjb21ib2JveC5nZXRPcHRpb25MYWJlbChvcHRpb24pIHwgYXN5bmMgfX1cbiAgPC9uZy10ZW1wbGF0ZT5cbjwvbmctdGVtcGxhdGU+XG4iXX0=
|
|
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
|
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export class ChevronIconComponent {
|
|
4
4
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ChevronIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ChevronIconComponent, isStandalone: true, selector: "et-chevron-icon", host: { classAttribute: "et-chevron-icon" }, ngImport: i0, template: `
|
|
5
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ChevronIconComponent, isStandalone: true, selector: "et-chevron-icon", host: { properties: { "attr.aria-hidden": "true" }, classAttribute: "et-chevron-icon" }, ngImport: i0, template: `
|
|
6
6
|
<!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
|
|
7
7
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
8
8
|
<path
|
|
@@ -30,7 +30,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
|
|
|
30
30
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
31
31
|
host: {
|
|
32
32
|
class: 'et-chevron-icon',
|
|
33
|
+
'[attr.aria-hidden]': 'true',
|
|
33
34
|
},
|
|
34
35
|
}]
|
|
35
36
|
}] });
|
|
36
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
37
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hldnJvbi1pY29uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY2RrL3NyYy9saWIvY29tcG9uZW50cy9pY29ucy9jaGV2cm9uLWljb24vY2hldnJvbi1pY29uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDOztBQXFCdEYsTUFBTSxPQUFPLG9CQUFvQjs4R0FBcEIsb0JBQW9CO2tHQUFwQixvQkFBb0Isb0tBakJyQjs7Ozs7Ozs7R0FRVDs7MkZBU1Usb0JBQW9CO2tCQW5CaEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsaUJBQWlCO29CQUMzQixRQUFRLEVBQUU7Ozs7Ozs7O0dBUVQ7b0JBQ0QsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJO29CQUNyQyxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtvQkFDL0MsSUFBSSxFQUFFO3dCQUNKLEtBQUssRUFBRSxpQkFBaUI7d0JBQ3hCLG9CQUFvQixFQUFFLE1BQU07cUJBQzdCO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZXQtY2hldnJvbi1pY29uJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT5cbiAgICA8c3ZnIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIiB2aWV3Qm94PVwiMCAwIDUxMiA1MTJcIj5cbiAgICAgIDxwYXRoXG4gICAgICAgIGQ9XCJNMjMzLjQgMTA1LjRjMTIuNS0xMi41IDMyLjgtMTIuNSA0NS4zIDBsMTkyIDE5MmMxMi41IDEyLjUgMTIuNSAzMi44IDAgNDUuM3MtMzIuOCAxMi41LTQ1LjMgMEwyNTYgMTczLjMgODYuNiAzNDIuNmMtMTIuNSAxMi41LTMyLjggMTIuNS00NS4zIDBzLTEyLjUtMzIuOCAwLTQ1LjNsMTkyLTE5MnpcIlxuICAgICAgICBmaWxsPVwiY3VycmVudENvbG9yXCJcbiAgICAgIC8+XG4gICAgPC9zdmc+XG4gIGAsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBob3N0OiB7XG4gICAgY2xhc3M6ICdldC1jaGV2cm9uLWljb24nLFxuICAgICdbYXR0ci5hcmlhLWhpZGRlbl0nOiAndHJ1ZScsXG4gIH0sXG59KVxuZXhwb3J0IGNsYXNzIENoZXZyb25JY29uQ29tcG9uZW50IHt9XG4iXX0=
|
package/fesm2022/ethlete-cdk.mjs
CHANGED
|
@@ -34,7 +34,7 @@ import { CdkCell, CdkCellDef, CdkColumnDef, CDK_TABLE, CdkFooterCell, CdkFooterC
|
|
|
34
34
|
|
|
35
35
|
class ChevronIconComponent {
|
|
36
36
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ChevronIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
37
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ChevronIconComponent, isStandalone: true, selector: "et-chevron-icon", host: { classAttribute: "et-chevron-icon" }, ngImport: i0, template: `
|
|
37
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ChevronIconComponent, isStandalone: true, selector: "et-chevron-icon", host: { properties: { "attr.aria-hidden": "true" }, classAttribute: "et-chevron-icon" }, ngImport: i0, template: `
|
|
38
38
|
<!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
|
|
39
39
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
40
40
|
<path
|
|
@@ -62,6 +62,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
|
|
|
62
62
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
63
63
|
host: {
|
|
64
64
|
class: 'et-chevron-icon',
|
|
65
|
+
'[attr.aria-hidden]': 'true',
|
|
65
66
|
},
|
|
66
67
|
}]
|
|
67
68
|
}] });
|
|
@@ -4007,8 +4008,10 @@ class ComboboxDirective {
|
|
|
4007
4008
|
//#region Members
|
|
4008
4009
|
this._shouldIgnoreNextBlurEvent = false;
|
|
4009
4010
|
this._deletedSearchWithKeyPress = false;
|
|
4011
|
+
this.selectBodyId$ = new BehaviorSubject(null);
|
|
4012
|
+
this.activeOptionId$ = new BehaviorSubject(null);
|
|
4010
4013
|
this._currentFilter$ = new BehaviorSubject('');
|
|
4011
|
-
this.
|
|
4014
|
+
this.isOpen$ = this._animatedOverlay.isMounted$;
|
|
4012
4015
|
this._selectionModel = new SelectionModel();
|
|
4013
4016
|
this._activeSelectionModel = new ActiveSelectionModel();
|
|
4014
4017
|
this._backspaceKeyPressManager = new KeyPressManager(BACKSPACE);
|
|
@@ -4030,13 +4033,13 @@ class ComboboxDirective {
|
|
|
4030
4033
|
observable: this._error$.pipe(map((v) => !!v)),
|
|
4031
4034
|
}, {
|
|
4032
4035
|
attribute: 'class.et-combobox--open',
|
|
4033
|
-
observable: this.
|
|
4036
|
+
observable: this.isOpen$,
|
|
4034
4037
|
}, {
|
|
4035
4038
|
attribute: 'class.et-select-field--multiple',
|
|
4036
4039
|
observable: this.multiple$,
|
|
4037
4040
|
}, {
|
|
4038
4041
|
attribute: 'class.et-select-field--open',
|
|
4039
|
-
observable: this.
|
|
4042
|
+
observable: this.isOpen$,
|
|
4040
4043
|
});
|
|
4041
4044
|
this._comboboxBodyComponent = null;
|
|
4042
4045
|
//#endregion
|
|
@@ -4058,7 +4061,7 @@ class ComboboxDirective {
|
|
|
4058
4061
|
this._animatedOverlay.autoResize = true;
|
|
4059
4062
|
this._selectField._bindings.push({
|
|
4060
4063
|
attribute: 'class.et-select-field--open',
|
|
4061
|
-
observable: this.
|
|
4064
|
+
observable: this.isOpen$,
|
|
4062
4065
|
});
|
|
4063
4066
|
this._selectField._bindings.push({
|
|
4064
4067
|
attribute: 'class.et-select-field--multiple',
|
|
@@ -4104,7 +4107,10 @@ class ComboboxDirective {
|
|
|
4104
4107
|
component: this._comboboxBodyComponent,
|
|
4105
4108
|
mirrorWidth: true,
|
|
4106
4109
|
});
|
|
4107
|
-
bodyRef
|
|
4110
|
+
if (!bodyRef)
|
|
4111
|
+
return;
|
|
4112
|
+
this.selectBodyId$.next(bodyRef.id);
|
|
4113
|
+
bodyRef._options$
|
|
4108
4114
|
.pipe(switchMap((queryList) => combineLatest([
|
|
4109
4115
|
queryList?.changes.pipe(startWith(queryList), map((l) => l.toArray())) ?? of([]),
|
|
4110
4116
|
this._activeSelectionModel.activeOption$,
|
|
@@ -4117,8 +4123,16 @@ class ComboboxDirective {
|
|
|
4117
4123
|
element: optionRef._elementRef.nativeElement,
|
|
4118
4124
|
container: bodyRef._containerElementRef?.nativeElement,
|
|
4119
4125
|
});
|
|
4126
|
+
this.activeOptionId$.next(optionRef.id);
|
|
4120
4127
|
}), takeUntil(this._destroy$), takeUntil(this._animatedOverlay.afterClosed()))
|
|
4121
4128
|
.subscribe();
|
|
4129
|
+
this._animatedOverlay
|
|
4130
|
+
.afterClosed()
|
|
4131
|
+
.pipe(takeUntil(this._destroy$), tap(() => {
|
|
4132
|
+
this.selectBodyId$.next(null);
|
|
4133
|
+
this.activeOptionId$.next(null);
|
|
4134
|
+
}))
|
|
4135
|
+
.subscribe();
|
|
4122
4136
|
}
|
|
4123
4137
|
close() {
|
|
4124
4138
|
if (!this._isOpen || this._animatedOverlay.isUnmounting)
|
|
@@ -4467,8 +4481,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
|
|
|
4467
4481
|
}] } });
|
|
4468
4482
|
|
|
4469
4483
|
const COMBOBOX_OPTION_TOKEN = new InjectionToken('ET_COMBOBOX_OPTION_TOKEN');
|
|
4484
|
+
let _uniqueId$1 = 0;
|
|
4470
4485
|
class ComboboxOptionComponent {
|
|
4471
4486
|
constructor() {
|
|
4487
|
+
this.id = `et-combobox-option-${_uniqueId$1++}`;
|
|
4472
4488
|
this.combobox = inject(COMBOBOX_TOKEN);
|
|
4473
4489
|
this._elementRef = inject(ElementRef);
|
|
4474
4490
|
this._option$ = new BehaviorSubject(null);
|
|
@@ -4484,6 +4500,18 @@ class ComboboxOptionComponent {
|
|
|
4484
4500
|
}, {
|
|
4485
4501
|
attribute: 'class.et-combobox-option--active',
|
|
4486
4502
|
observable: this.active$,
|
|
4503
|
+
}, {
|
|
4504
|
+
attribute: 'aria-selected',
|
|
4505
|
+
observable: this.selected$.pipe(map((selected) => ({
|
|
4506
|
+
render: true,
|
|
4507
|
+
value: selected,
|
|
4508
|
+
}))),
|
|
4509
|
+
}, {
|
|
4510
|
+
attribute: 'aria-diabled',
|
|
4511
|
+
observable: this.disabled$.pipe(map((selected) => ({
|
|
4512
|
+
render: true,
|
|
4513
|
+
value: selected,
|
|
4514
|
+
}))),
|
|
4487
4515
|
});
|
|
4488
4516
|
}
|
|
4489
4517
|
get option() {
|
|
@@ -4503,7 +4531,7 @@ class ComboboxOptionComponent {
|
|
|
4503
4531
|
this.combobox._ignoreNextBlurEvent();
|
|
4504
4532
|
}
|
|
4505
4533
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ComboboxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4506
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ComboboxOptionComponent, isStandalone: true, selector: "et-combobox-option", inputs: { option: "option" }, host: { listeners: { "mousedown": "ignoreBlur()", "click": "selectOption()" }, classAttribute: "et-combobox-option" }, providers: [
|
|
4534
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", 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: [
|
|
4507
4535
|
{
|
|
4508
4536
|
provide: COMBOBOX_OPTION_TOKEN,
|
|
4509
4537
|
useExisting: ComboboxOptionComponent,
|
|
@@ -4516,6 +4544,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
|
|
|
4516
4544
|
class: 'et-combobox-option',
|
|
4517
4545
|
'(mousedown)': 'ignoreBlur()',
|
|
4518
4546
|
'(click)': 'selectOption()',
|
|
4547
|
+
'[attr.id]': 'id',
|
|
4548
|
+
role: 'option',
|
|
4519
4549
|
}, imports: [AsyncPipe, NgIf, NgTemplateOutlet, NgComponentOutlet], hostDirectives: [], providers: [
|
|
4520
4550
|
{
|
|
4521
4551
|
provide: COMBOBOX_OPTION_TOKEN,
|
|
@@ -4528,8 +4558,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
|
|
|
4528
4558
|
}] } });
|
|
4529
4559
|
|
|
4530
4560
|
const COMBOBOX_BODY_TOKEN = new InjectionToken('ET_COMBOBOX_BODY_TOKEN');
|
|
4561
|
+
let _uniqueId = 0;
|
|
4531
4562
|
class ComboboxBodyComponent {
|
|
4532
4563
|
constructor() {
|
|
4564
|
+
this.id = `et-combobox-body-${_uniqueId++}`;
|
|
4533
4565
|
this._destroy$ = createDestroy();
|
|
4534
4566
|
this._clickOutside = inject(ClickOutsideDirective);
|
|
4535
4567
|
this.combobox = inject(COMBOBOX_TOKEN);
|
|
@@ -4540,6 +4572,18 @@ class ComboboxBodyComponent {
|
|
|
4540
4572
|
}, {
|
|
4541
4573
|
attribute: 'class.et-combobox-body--multiple',
|
|
4542
4574
|
observable: this.combobox.multiple$,
|
|
4575
|
+
}, {
|
|
4576
|
+
attribute: 'aria-multiselectable',
|
|
4577
|
+
observable: this.combobox.multiple$.pipe(map((multiple) => ({
|
|
4578
|
+
render: true,
|
|
4579
|
+
value: multiple,
|
|
4580
|
+
}))),
|
|
4581
|
+
}, {
|
|
4582
|
+
attribute: 'aria-labelledby',
|
|
4583
|
+
observable: this.combobox._input.labelId$.pipe(map((labelId) => ({
|
|
4584
|
+
render: !!labelId,
|
|
4585
|
+
value: labelId,
|
|
4586
|
+
}))),
|
|
4543
4587
|
});
|
|
4544
4588
|
this._bodyTemplate = null;
|
|
4545
4589
|
this.trackByFn = (index, item) => this.combobox._selectionModel.getKey(item);
|
|
@@ -4553,7 +4597,7 @@ class ComboboxBodyComponent {
|
|
|
4553
4597
|
.subscribe();
|
|
4554
4598
|
}
|
|
4555
4599
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ComboboxBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4556
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ComboboxBodyComponent, isStandalone: true, selector: "et-combobox-body", host: { attributes: { "tabindex": "-1" }, classAttribute: "et-combobox-body et-with-default-animation" }, providers: [
|
|
4600
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ComboboxBodyComponent, isStandalone: true, selector: "et-combobox-body", host: { attributes: { "tabindex": "-1", "role": "listbox" }, properties: { "attr.id": "id" }, classAttribute: "et-combobox-body et-with-default-animation" }, providers: [
|
|
4557
4601
|
{
|
|
4558
4602
|
provide: COMBOBOX_BODY_TOKEN,
|
|
4559
4603
|
useExisting: ComboboxBodyComponent,
|
|
@@ -4565,6 +4609,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
|
|
|
4565
4609
|
args: [{ selector: 'et-combobox-body', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
4566
4610
|
class: 'et-combobox-body et-with-default-animation',
|
|
4567
4611
|
tabindex: '-1',
|
|
4612
|
+
'[attr.id]': 'id',
|
|
4613
|
+
role: 'listbox',
|
|
4568
4614
|
}, imports: [
|
|
4569
4615
|
NgTemplateOutlet,
|
|
4570
4616
|
NgComponentOutlet,
|
|
@@ -4598,7 +4644,7 @@ class ComboboxComponent extends DecoratedInputBase {
|
|
|
4598
4644
|
this.combobox.setBodyComponent(ComboboxBodyComponent);
|
|
4599
4645
|
}
|
|
4600
4646
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4601
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ComboboxComponent, isStandalone: true, selector: "et-combobox", host: { listeners: { "click": "combobox.selectInputAndOpen()" }, classAttribute: "et-combobox" }, usesInheritance: true, hostDirectives: [{ directive: i1$1.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"], outputs: ["filterChange", "filterChange"] }], ngImport: i0, template: "
|
|
4647
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ComboboxComponent, isStandalone: true, selector: "et-combobox", host: { listeners: { "click": "combobox.selectInputAndOpen()" }, classAttribute: "et-combobox" }, usesInheritance: true, hostDirectives: [{ directive: i1$1.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"], 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 *ngComponentOutlet=\"comp; inputs: { option: item }\"></ng-container>\n </ng-container>\n <ng-template #defaultSelectedOptionLabelTpl>\n {{ combobox.getOptionLabel(item) | async }}\n </ng-template>\n </ng-template>\n\n <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 }); }
|
|
4602
4648
|
}
|
|
4603
4649
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
4604
4650
|
type: Component,
|
|
@@ -4640,7 +4686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
|
|
|
4640
4686
|
// eslint-disable-next-line @angular-eslint/no-outputs-metadata-property
|
|
4641
4687
|
outputs: ['filterChange'],
|
|
4642
4688
|
},
|
|
4643
|
-
], template: "
|
|
4689
|
+
], 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 *ngComponentOutlet=\"comp; inputs: { option: item }\"></ng-container>\n </ng-container>\n <ng-template #defaultSelectedOptionLabelTpl>\n {{ combobox.getOptionLabel(item) | async }}\n </ng-template>\n </ng-template>\n\n <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"] }]
|
|
4644
4690
|
}], ctorParameters: function () { return []; } });
|
|
4645
4691
|
|
|
4646
4692
|
const ComboboxImports = [
|