@ethlete/cdk 3.19.1 → 3.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/esm2022/lib/components/forms/components/select/components/combobox/components/combobox/combobox.component.mjs +9 -3
  3. package/esm2022/lib/components/forms/components/select/components/combobox/directives/combobox/combobox.directive.mjs +69 -2
  4. package/esm2022/lib/components/forms/components/select/components/combobox/partials/combobox-body/combobox-body.component.mjs +15 -5
  5. package/esm2022/lib/components/forms/components/select/components/combobox/partials/combobox-option/combobox-option.component.mjs +8 -4
  6. package/esm2022/lib/components/forms/components/select/components/select/directives/select/select.directive.mjs +4 -1
  7. package/esm2022/lib/components/forms/components/select/components/select/partials/select-body/select-body.component.mjs +9 -3
  8. package/esm2022/lib/components/overlay/components/overlay/components/overlay-container/overlay-container.component.mjs +11 -4
  9. package/esm2022/lib/components/overlay/components/toggletip/components/toggletip/toggletip.component.mjs +9 -3
  10. package/esm2022/lib/components/overlay/components/toggletip/directives/toggletip/toggletip.directive.mjs +4 -1
  11. package/esm2022/lib/components/overlay/components/tooltip/components/tooltip/tooltip.component.mjs +9 -3
  12. package/esm2022/lib/components/overlay/components/tooltip/directives/tooltip/tooltip.directive.mjs +4 -1
  13. package/esm2022/lib/components/picture/picture.component.mjs +7 -4
  14. package/fesm2022/ethlete-cdk.mjs +133 -21
  15. package/fesm2022/ethlete-cdk.mjs.map +1 -1
  16. package/lib/components/forms/components/select/components/combobox/components/combobox/combobox.component.d.ts +1 -1
  17. package/lib/components/forms/components/select/components/combobox/directives/combobox/combobox.directive.d.ts +30 -1
  18. package/lib/components/forms/components/select/components/combobox/partials/combobox-body/combobox-body.component.d.ts +8 -3
  19. package/lib/components/forms/components/select/components/combobox/partials/combobox-option/combobox-option.component.d.ts +3 -0
  20. package/lib/components/forms/components/select/components/select/directives/select/select.directive.d.ts +1 -0
  21. package/lib/components/forms/components/select/components/select/partials/select-body/select-body.component.d.ts +5 -1
  22. package/lib/components/overlay/components/overlay/components/overlay-container/overlay-container.component.d.ts +4 -1
  23. package/lib/components/overlay/components/toggletip/components/toggletip/toggletip.component.d.ts +5 -1
  24. package/lib/components/overlay/components/toggletip/directives/toggletip/toggletip.directive.d.ts +1 -0
  25. package/lib/components/overlay/components/tooltip/components/tooltip/tooltip.component.d.ts +5 -1
  26. package/lib/components/overlay/components/tooltip/directives/tooltip/tooltip.directive.d.ts +1 -0
  27. package/package.json +3 -3
@@ -19,10 +19,12 @@ import { ESCAPE, hasModifierKey, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW,
19
19
  import * as i1$4 from '@angular/cdk/bidi';
20
20
  import { Directionality } from '@angular/cdk/bidi';
21
21
  import { coerceBooleanProperty, coerceCssPixelValue, coerceElement, _isNumberValue } from '@angular/cdk/coercion';
22
- import * as i2$1 from '@angular/cdk/platform';
22
+ import * as i2$2 from '@angular/cdk/platform';
23
23
  import { _getEventTarget } from '@angular/cdk/platform';
24
24
  import { startWith as startWith$1, debounceTime, distinctUntilChanged, takeUntil as takeUntil$1, skip as skip$1, filter as filter$1, mergeMap, mapTo, mergeAll, switchMap as switchMap$1, take as take$1 } from 'rxjs/operators';
25
25
  import { UniqueSelectionDispatcher, _VIEW_REPEATER_STRATEGY, _RecycleViewRepeaterStrategy, _DisposeViewRepeaterStrategy, DataSource } from '@angular/cdk/collections';
26
+ import * as i2$1 from '@ethlete/theming';
27
+ import { THEME_PROVIDER, ProvideThemeDirective } from '@ethlete/theming';
26
28
  import { AutofillMonitor } from '@angular/cdk/text-field';
27
29
  import { FormControl, NgControl, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
28
30
  import { Title } from '@angular/platform-browser';
@@ -3997,10 +3999,15 @@ class OverlayContainerComponent extends CdkDialogContainer {
3997
3999
  super(inject(ElementRef), inject(FocusTrapFactory), inject(DOCUMENT), inject(OVERLAY_CONFIG), inject(InteractivityChecker), inject(NgZone), inject(OverlayRef$1), inject(FocusMonitor));
3998
4000
  this._swipeHandlerService = inject(SwipeHandlerService);
3999
4001
  this._dragToDismissStop$ = new Subject();
4002
+ this._themeProvider = inject(THEME_PROVIDER);
4003
+ this._parentThemeProvider = inject(THEME_PROVIDER, { optional: true, skipSelf: true });
4000
4004
  this._animatedLifecycle = inject(ANIMATED_LIFECYCLE_TOKEN);
4001
4005
  this.cdkOverlayRef = inject(OverlayRef$1);
4002
4006
  this.overlayRef = null;
4003
4007
  this.elementRef = this._elementRef;
4008
+ if (this._parentThemeProvider) {
4009
+ this._themeProvider.syncWithProvider(this._parentThemeProvider);
4010
+ }
4004
4011
  }
4005
4012
  _contentAttached() {
4006
4013
  super._contentAttached();
@@ -4231,7 +4238,7 @@ class OverlayContainerComponent extends CdkDialogContainer {
4231
4238
  }
4232
4239
  }
4233
4240
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: OverlayContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4234
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: OverlayContainerComponent, isStandalone: true, selector: "et-overlay-container", host: { attributes: { "tabindex": "-1" }, properties: { "attr.aria-modal": "_config.ariaModal", "id": "_config.id", "attr.role": "_config.role", "attr.aria-labelledby": "_config.ariaLabel ? null : _ariaLabelledBy", "attr.aria-label": "_config.ariaLabel", "attr.aria-describedby": "_config.ariaDescribedBy || null", "class.et-with-default-animation": "!_config.customAnimated" }, classAttribute: "et-overlay" }, usesInheritance: true, hostDirectives: [{ directive: i1$2.AnimatedLifecycleDirective }], ngImport: i0, template: `<ng-template cdkPortalOutlet></ng-template>`, isInline: true, styles: [".et-overlay{position:relative;display:grid;overflow:hidden;pointer-events:all;outline:none}.et-overlay>*{overflow:auto}.et-overlay-pane{pointer-events:none}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-to{transform:scale(0)!important;border-radius:250px}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),border-radius .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-1),border-radius .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-active{transition:transform .15s var(--ease-in-5),border-radius .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet{bottom:-50px;padding-bottom:50px}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-to{transform:translateY(100%)!important}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--top-sheet{top:-50px;padding-top:50px}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-to{transform:translateY(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--left-sheet{left:-50px;padding-left:50px}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-to{transform:translate(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--right-sheet{right:-50px;padding-right:50px}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-to{transform:translate(100%)!important}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-from{opacity:0!important;transform:scale(.85)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-to{opacity:0!important;transform:scale(.7)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5)}}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-active{transition:transform .15s var(--ease-out-5),opacity .15s var(--ease-out-5)}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
4241
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: OverlayContainerComponent, isStandalone: true, selector: "et-overlay-container", host: { attributes: { "tabindex": "-1" }, properties: { "attr.aria-modal": "_config.ariaModal", "id": "_config.id", "attr.role": "_config.role", "attr.aria-labelledby": "_config.ariaLabel ? null : _ariaLabelledBy", "attr.aria-label": "_config.ariaLabel", "attr.aria-describedby": "_config.ariaDescribedBy || null", "class.et-with-default-animation": "!_config.customAnimated" }, classAttribute: "et-overlay" }, usesInheritance: true, hostDirectives: [{ directive: i1$2.AnimatedLifecycleDirective }, { directive: i2$1.ProvideThemeDirective }], ngImport: i0, template: `<ng-template cdkPortalOutlet></ng-template>`, isInline: true, styles: [".et-overlay{position:relative;display:grid;overflow:hidden;pointer-events:all;outline:none}.et-overlay>*{overflow:auto}.et-overlay-pane{pointer-events:none}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-to{transform:scale(0)!important;border-radius:250px}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),border-radius .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-1),border-radius .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-active{transition:transform .15s var(--ease-in-5),border-radius .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet{bottom:-50px;padding-bottom:50px}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-to{transform:translateY(100%)!important}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--top-sheet{top:-50px;padding-top:50px}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-to{transform:translateY(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--left-sheet{left:-50px;padding-left:50px}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-to{transform:translate(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--right-sheet{right:-50px;padding-right:50px}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-to{transform:translate(100%)!important}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-from{opacity:0!important;transform:scale(.85)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-to{opacity:0!important;transform:scale(.7)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5)}}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-active{transition:transform .15s var(--ease-out-5),opacity .15s var(--ease-out-5)}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
4235
4242
  }
4236
4243
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: OverlayContainerComponent, decorators: [{
4237
4244
  type: Component,
@@ -4245,7 +4252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
4245
4252
  '[attr.aria-label]': '_config.ariaLabel',
4246
4253
  '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
4247
4254
  '[class.et-with-default-animation]': '!_config.customAnimated',
4248
- }, standalone: true, imports: [PortalModule], hostDirectives: [AnimatedLifecycleDirective], styles: [".et-overlay{position:relative;display:grid;overflow:hidden;pointer-events:all;outline:none}.et-overlay>*{overflow:auto}.et-overlay-pane{pointer-events:none}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-to{transform:scale(0)!important;border-radius:250px}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),border-radius .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-1),border-radius .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-active{transition:transform .15s var(--ease-in-5),border-radius .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet{bottom:-50px;padding-bottom:50px}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-to{transform:translateY(100%)!important}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--top-sheet{top:-50px;padding-top:50px}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-to{transform:translateY(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--left-sheet{left:-50px;padding-left:50px}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-to{transform:translate(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--right-sheet{right:-50px;padding-right:50px}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-to{transform:translate(100%)!important}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-from{opacity:0!important;transform:scale(.85)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-to{opacity:0!important;transform:scale(.7)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5)}}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-active{transition:transform .15s var(--ease-out-5),opacity .15s var(--ease-out-5)}\n"] }]
4255
+ }, standalone: true, imports: [PortalModule], hostDirectives: [AnimatedLifecycleDirective, ProvideThemeDirective], styles: [".et-overlay{position:relative;display:grid;overflow:hidden;pointer-events:all;outline:none}.et-overlay>*{overflow:auto}.et-overlay-pane{pointer-events:none}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-to{transform:scale(0)!important;border-radius:250px}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),border-radius .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-1),border-radius .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-active{transition:transform .15s var(--ease-in-5),border-radius .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet{bottom:-50px;padding-bottom:50px}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-to{transform:translateY(100%)!important}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--top-sheet{top:-50px;padding-top:50px}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-to{transform:translateY(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--left-sheet{left:-50px;padding-left:50px}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-to{transform:translate(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--right-sheet{right:-50px;padding-right:50px}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-to{transform:translate(100%)!important}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-from{opacity:0!important;transform:scale(.85)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-to{opacity:0!important;transform:scale(.7)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5)}}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-active{transition:transform .15s var(--ease-out-5),opacity .15s var(--ease-out-5)}\n"] }]
4249
4256
  }], ctorParameters: function () { return []; } });
4250
4257
 
4251
4258
  const createOverlayConfig = (globalConfig, localConfig) => ({
@@ -4973,6 +4980,7 @@ class ToggletipDirective {
4973
4980
  this._destroy$ = createDestroy();
4974
4981
  this._defaultConfig = inject(TOGGLETIP_CONFIG, { optional: true }) ?? createToggletipConfig();
4975
4982
  this._animatedOverlay = inject(AnimatedOverlayDirective);
4983
+ this._themeProvider = inject(THEME_PROVIDER, { optional: true });
4976
4984
  this._toggletip = null;
4977
4985
  this._showToggletip = false;
4978
4986
  this.toggletipClose = new EventEmitter();
@@ -5019,6 +5027,7 @@ class ToggletipDirective {
5019
5027
  _mountToggletip() {
5020
5028
  this._animatedOverlay.mount({
5021
5029
  component: ToggletipComponent,
5030
+ themeProvider: this._themeProvider,
5022
5031
  providers: [
5023
5032
  {
5024
5033
  provide: TOGGLETIP_CONFIG,
@@ -5076,6 +5085,7 @@ class ToggletipComponent {
5076
5085
  this._config = inject(TOGGLETIP_CONFIG);
5077
5086
  this.toggletipText = inject(TOGGLETIP_TEXT, { optional: true });
5078
5087
  this.toggletipTemplate = inject(TOGGLETIP_TEMPLATE, { optional: true });
5088
+ this._themeProvider = inject(THEME_PROVIDER);
5079
5089
  this.injector = inject(Injector);
5080
5090
  this._cdr = inject(ChangeDetectorRef);
5081
5091
  this._trigger = inject(TOGGLETIP_DIRECTIVE);
@@ -5093,17 +5103,20 @@ class ToggletipComponent {
5093
5103
  _markForCheck() {
5094
5104
  this._cdr.markForCheck();
5095
5105
  }
5106
+ _setThemeFromProvider(provider) {
5107
+ this._themeProvider.syncWithProvider(provider);
5108
+ }
5096
5109
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ToggletipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5097
5110
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: ToggletipComponent, isStandalone: true, selector: "et-toggletip", host: { properties: { "attr.aria-hidden": "this.attrAriaHidden", "class.et-with-default-animation": "this.usesDefaultAnimation", "class": "this.containerClass" }, classAttribute: "et-toggletip" }, providers: [
5098
5111
  {
5099
5112
  provide: TOGGLETIP,
5100
5113
  useExisting: ToggletipComponent,
5101
5114
  },
5102
- ], viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], ngImport: i0, template: "<div class=\"et-toggletip-container\" etAnimatedLifecycle>\n <ng-container *ngIf=\"toggletipText\">\n {{ toggletipText }}\n </ng-container>\n\n <ng-container *ngIf=\"toggletipTemplate\">\n <ng-container *ngTemplateOutlet=\"toggletipTemplate; injector: injector\" />\n </ng-container>\n\n <div class=\"toggletip-arrow\" et-floating-arrow></div>\n</div>\n", styles: [":where(.et-toggletip){--background-color: hsl(0 0% 20%);--foreground-color: CanvasText;--border-radius: 4px;--padding-inline: 1.5ch;--padding-block: .75ch;--inline-max-size: 25ch;--arrow-size: 10px;--arrow-radius: 2px}.et-toggletip{transform:var(--et-floating-translate);will-change:transform}.et-toggletip[et-floating-placement^=top] .toggletip-arrow{bottom:-4px;left:0}.et-toggletip[et-floating-placement^=right] .toggletip-arrow{left:-4px;top:0}.et-toggletip[et-floating-placement^=bottom] .toggletip-arrow{top:-4px;left:0}.et-toggletip[et-floating-placement^=left] .toggletip-arrow{right:-4px;top:0}.et-toggletip-container{z-index:1;inline-size:max-content;max-inline-size:var(--inline-max-size);padding:var(--padding-block) var(--padding-inline);border-radius:var(--border-radius);background:var(--background-color);color:var(--foreground-color);will-change:transform}.et-toggletip-container:before{content:\"; Has toggletip: \";clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.toggletip-arrow{transform:var(--et-floating-arrow-translate);inline-size:var(--arrow-size);block-size:var(--arrow-size);position:absolute;z-index:1;will-change:transform}.toggletip-arrow:before{inline-size:var(--arrow-size);block-size:var(--arrow-size);border-radius:var(--arrow-radius);position:absolute;z-index:-1;transform:rotate(45deg);background:var(--background-color);top:0;left:0;content:\"\"}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-to{opacity:0}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-from .toggletip-arrow:before,.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-to .toggletip-arrow:before{transform:rotate(45deg) scale(0)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-active{transition:transform .2s var(--ease-out-5),opacity .2s var(--ease-out-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-active .toggletip-arrow:before{transition:transform .2s var(--ease-out-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-active .toggletip-arrow:before{transition:transform .15s var(--ease-in-5)}.et-toggletip.et-with-default-animation[et-floating-placement^=top] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=top] .et-toggletip-container.et-animation-leave-to{transform:translateY(5px)}.et-toggletip.et-with-default-animation[et-floating-placement^=right] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=right] .et-toggletip-container.et-animation-leave-to{transform:translate(-5px)}.et-toggletip.et-with-default-animation[et-floating-placement^=bottom] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=bottom] .et-toggletip-container.et-animation-leave-to{transform:translateY(-5px)}.et-toggletip.et-with-default-animation[et-floating-placement^=left] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=left] .et-toggletip-container.et-animation-leave-to{transform:translate(5px)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", exportAs: ["etAnimatedLifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
5115
+ ], viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], hostDirectives: [{ directive: i2$1.ProvideThemeDirective }], ngImport: i0, template: "<div class=\"et-toggletip-container\" etAnimatedLifecycle>\n <ng-container *ngIf=\"toggletipText\">\n {{ toggletipText }}\n </ng-container>\n\n <ng-container *ngIf=\"toggletipTemplate\">\n <ng-container *ngTemplateOutlet=\"toggletipTemplate; injector: injector\" />\n </ng-container>\n\n <div class=\"toggletip-arrow\" et-floating-arrow></div>\n</div>\n", styles: [":where(.et-toggletip){--background-color: hsl(0 0% 20%);--foreground-color: CanvasText;--border-radius: 4px;--padding-inline: 1.5ch;--padding-block: .75ch;--inline-max-size: 25ch;--arrow-size: 10px;--arrow-radius: 2px}.et-toggletip{transform:var(--et-floating-translate);will-change:transform}.et-toggletip[et-floating-placement^=top] .toggletip-arrow{bottom:-4px;left:0}.et-toggletip[et-floating-placement^=right] .toggletip-arrow{left:-4px;top:0}.et-toggletip[et-floating-placement^=bottom] .toggletip-arrow{top:-4px;left:0}.et-toggletip[et-floating-placement^=left] .toggletip-arrow{right:-4px;top:0}.et-toggletip-container{z-index:1;inline-size:max-content;max-inline-size:var(--inline-max-size);padding:var(--padding-block) var(--padding-inline);border-radius:var(--border-radius);background:var(--background-color);color:var(--foreground-color);will-change:transform}.et-toggletip-container:before{content:\"; Has toggletip: \";clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.toggletip-arrow{transform:var(--et-floating-arrow-translate);inline-size:var(--arrow-size);block-size:var(--arrow-size);position:absolute;z-index:1;will-change:transform}.toggletip-arrow:before{inline-size:var(--arrow-size);block-size:var(--arrow-size);border-radius:var(--arrow-radius);position:absolute;z-index:-1;transform:rotate(45deg);background:var(--background-color);top:0;left:0;content:\"\"}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-to{opacity:0}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-from .toggletip-arrow:before,.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-to .toggletip-arrow:before{transform:rotate(45deg) scale(0)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-active{transition:transform .2s var(--ease-out-5),opacity .2s var(--ease-out-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-active .toggletip-arrow:before{transition:transform .2s var(--ease-out-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-active .toggletip-arrow:before{transition:transform .15s var(--ease-in-5)}.et-toggletip.et-with-default-animation[et-floating-placement^=top] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=top] .et-toggletip-container.et-animation-leave-to{transform:translateY(5px)}.et-toggletip.et-with-default-animation[et-floating-placement^=right] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=right] .et-toggletip-container.et-animation-leave-to{transform:translate(-5px)}.et-toggletip.et-with-default-animation[et-floating-placement^=bottom] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=bottom] .et-toggletip-container.et-animation-leave-to{transform:translateY(-5px)}.et-toggletip.et-with-default-animation[et-floating-placement^=left] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=left] .et-toggletip-container.et-animation-leave-to{transform:translate(5px)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", exportAs: ["etAnimatedLifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
5103
5116
  }
5104
5117
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ToggletipComponent, decorators: [{
5105
5118
  type: Component,
5106
- args: [{ selector: 'et-toggletip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgIf, NgTemplateOutlet, AnimatedLifecycleDirective], host: {
5119
+ args: [{ selector: 'et-toggletip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgIf, NgTemplateOutlet, AnimatedLifecycleDirective], hostDirectives: [ProvideThemeDirective], host: {
5107
5120
  class: 'et-toggletip',
5108
5121
  }, providers: [
5109
5122
  {
@@ -5172,6 +5185,7 @@ class TooltipDirective {
5172
5185
  constructor() {
5173
5186
  this._defaultConfig = inject(TOOLTIP_CONFIG, { optional: true }) ?? createTooltipConfig();
5174
5187
  this._animatedOverlay = inject(AnimatedOverlayDirective);
5188
+ this._themeProvider = inject(THEME_PROVIDER, { optional: true });
5175
5189
  this._tooltip = null;
5176
5190
  this._tooltipAriaDescription = null;
5177
5191
  this._lastTooltipText = null;
@@ -5250,6 +5264,7 @@ class TooltipDirective {
5250
5264
  _mountTooltip() {
5251
5265
  this._animatedOverlay.mount({
5252
5266
  component: TooltipComponent,
5267
+ themeProvider: this._themeProvider,
5253
5268
  providers: [
5254
5269
  {
5255
5270
  provide: TOOLTIP_CONFIG,
@@ -5310,6 +5325,7 @@ class TooltipComponent {
5310
5325
  this._config = inject(TOOLTIP_CONFIG);
5311
5326
  this.tooltipText = inject(TOOLTIP_TEXT, { optional: true });
5312
5327
  this.tooltipTemplate = inject(TOOLTIP_TEMPLATE, { optional: true });
5328
+ this._themeProvider = inject(THEME_PROVIDER);
5313
5329
  this.injector = inject(Injector);
5314
5330
  this._cdr = inject(ChangeDetectorRef);
5315
5331
  this._trigger = inject(TOOLTIP_DIRECTIVE);
@@ -5327,17 +5343,20 @@ class TooltipComponent {
5327
5343
  _markForCheck() {
5328
5344
  this._cdr.markForCheck();
5329
5345
  }
5346
+ _setThemeFromProvider(provider) {
5347
+ this._themeProvider.syncWithProvider(provider);
5348
+ }
5330
5349
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5331
5350
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TooltipComponent, isStandalone: true, selector: "et-tooltip", host: { properties: { "attr.aria-hidden": "this.attrAriaHidden", "class.et-with-default-animation": "this.usesDefaultAnimation", "class": "this.containerClass" }, classAttribute: "et-tooltip" }, providers: [
5332
5351
  {
5333
5352
  provide: TOOLTIP,
5334
5353
  useExisting: TooltipComponent,
5335
5354
  },
5336
- ], viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], ngImport: i0, template: "<div class=\"et-tooltip-container\" etAnimatedLifecycle>\n <ng-container *ngIf=\"tooltipText\">\n {{ tooltipText }}\n </ng-container>\n\n <ng-container *ngIf=\"tooltipTemplate\">\n <ng-container *ngTemplateOutlet=\"tooltipTemplate; injector: injector\" />\n </ng-container>\n\n <div class=\"tooltip-arrow\" et-floating-arrow></div>\n</div>\n", styles: [":where(.et-tooltip){--background-color: hsl(0 0% 20%);--foreground-color: CanvasText;--border-radius: 4px;--padding-inline: 1.5ch;--padding-block: .75ch;--inline-max-size: 25ch;--arrow-size: 10px;--arrow-radius: 2px}.et-tooltip{pointer-events:none;-webkit-user-select:none;user-select:none;transform:var(--et-floating-translate);will-change:transform}.et-tooltip[et-floating-placement^=top] .tooltip-arrow{bottom:-4px;left:0}.et-tooltip[et-floating-placement^=right] .tooltip-arrow{left:-4px;top:0}.et-tooltip[et-floating-placement^=bottom] .tooltip-arrow{top:-4px;left:0}.et-tooltip[et-floating-placement^=left] .tooltip-arrow{right:-4px;top:0}.et-tooltip-container{z-index:1;inline-size:max-content;max-inline-size:var(--inline-max-size);padding:var(--padding-block) var(--padding-inline);border-radius:var(--border-radius);background:var(--background-color);color:var(--foreground-color);will-change:transform}.et-tooltip-container:before{content:\"; Has tooltip: \";clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.tooltip-arrow{inline-size:var(--arrow-size);block-size:var(--arrow-size);position:absolute;z-index:1;transform:var(--et-floating-arrow-translate);will-change:transform}.tooltip-arrow:before{inline-size:var(--arrow-size);block-size:var(--arrow-size);border-radius:var(--arrow-radius);position:absolute;z-index:-1;transform:rotate(45deg);background:var(--background-color);top:0;left:0;content:\"\"}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-leave-to{opacity:0}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-tooltip.et-with-default-animation[et-floating-placement^=top] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=top] .et-tooltip-container.et-animation-leave-to{transform:translateY(5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=right] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=right] .et-tooltip-container.et-animation-leave-to{transform:translate(-5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=bottom] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=bottom] .et-tooltip-container.et-animation-leave-to{transform:translateY(-5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=left] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=left] .et-tooltip-container.et-animation-leave-to{transform:translate(5px)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", exportAs: ["etAnimatedLifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
5355
+ ], viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], hostDirectives: [{ directive: i2$1.ProvideThemeDirective }], ngImport: i0, template: "<div class=\"et-tooltip-container\" etAnimatedLifecycle>\n <ng-container *ngIf=\"tooltipText\">\n {{ tooltipText }}\n </ng-container>\n\n <ng-container *ngIf=\"tooltipTemplate\">\n <ng-container *ngTemplateOutlet=\"tooltipTemplate; injector: injector\" />\n </ng-container>\n\n <div class=\"tooltip-arrow\" et-floating-arrow></div>\n</div>\n", styles: [":where(.et-tooltip){--background-color: hsl(0 0% 20%);--foreground-color: CanvasText;--border-radius: 4px;--padding-inline: 1.5ch;--padding-block: .75ch;--inline-max-size: 25ch;--arrow-size: 10px;--arrow-radius: 2px}.et-tooltip{pointer-events:none;-webkit-user-select:none;user-select:none;transform:var(--et-floating-translate);will-change:transform}.et-tooltip[et-floating-placement^=top] .tooltip-arrow{bottom:-4px;left:0}.et-tooltip[et-floating-placement^=right] .tooltip-arrow{left:-4px;top:0}.et-tooltip[et-floating-placement^=bottom] .tooltip-arrow{top:-4px;left:0}.et-tooltip[et-floating-placement^=left] .tooltip-arrow{right:-4px;top:0}.et-tooltip-container{z-index:1;inline-size:max-content;max-inline-size:var(--inline-max-size);padding:var(--padding-block) var(--padding-inline);border-radius:var(--border-radius);background:var(--background-color);color:var(--foreground-color);will-change:transform}.et-tooltip-container:before{content:\"; Has tooltip: \";clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.tooltip-arrow{inline-size:var(--arrow-size);block-size:var(--arrow-size);position:absolute;z-index:1;transform:var(--et-floating-arrow-translate);will-change:transform}.tooltip-arrow:before{inline-size:var(--arrow-size);block-size:var(--arrow-size);border-radius:var(--arrow-radius);position:absolute;z-index:-1;transform:rotate(45deg);background:var(--background-color);top:0;left:0;content:\"\"}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-leave-to{opacity:0}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-tooltip.et-with-default-animation[et-floating-placement^=top] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=top] .et-tooltip-container.et-animation-leave-to{transform:translateY(5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=right] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=right] .et-tooltip-container.et-animation-leave-to{transform:translate(-5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=bottom] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=bottom] .et-tooltip-container.et-animation-leave-to{transform:translateY(-5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=left] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=left] .et-tooltip-container.et-animation-leave-to{transform:translate(5px)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", exportAs: ["etAnimatedLifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
5337
5356
  }
5338
5357
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TooltipComponent, decorators: [{
5339
5358
  type: Component,
5340
- args: [{ selector: 'et-tooltip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgIf, NgTemplateOutlet, AnimatedLifecycleDirective], host: {
5359
+ args: [{ selector: 'et-tooltip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgIf, NgTemplateOutlet, AnimatedLifecycleDirective], hostDirectives: [ProvideThemeDirective], host: {
5341
5360
  class: 'et-tooltip',
5342
5361
  }, providers: [
5343
5362
  {
@@ -8376,36 +8395,72 @@ class ComboboxDirective {
8376
8395
  set optionComponent(component) {
8377
8396
  this._optionComponent$.next(component);
8378
8397
  }
8398
+ get optionComponentInputs() {
8399
+ return this._optionComponentInputs$.value;
8400
+ }
8401
+ set optionComponentInputs(value) {
8402
+ this._optionComponentInputs$.next(value ?? {});
8403
+ }
8379
8404
  get selectedOptionComponent() {
8380
8405
  return this._selectedOptionComponent$.value;
8381
8406
  }
8382
8407
  set selectedOptionComponent(component) {
8383
8408
  this._selectedOptionComponent$.next(component);
8384
8409
  }
8410
+ get selectedOptionComponentInputs() {
8411
+ return this._selectedOptionComponentInputs$.value;
8412
+ }
8413
+ set selectedOptionComponentInputs(value) {
8414
+ this._selectedOptionComponentInputs$.next(value ?? {});
8415
+ }
8385
8416
  get bodyErrorComponent() {
8386
8417
  return this._bodyErrorComponent$.value;
8387
8418
  }
8388
8419
  set bodyErrorComponent(value) {
8389
8420
  this._bodyErrorComponent$.next(value);
8390
8421
  }
8422
+ get bodyErrorComponentInputs() {
8423
+ return this._bodyErrorComponentInputs$.value;
8424
+ }
8425
+ set bodyErrorComponentInputs(value) {
8426
+ this._bodyErrorComponentInputs$.next(value ?? {});
8427
+ }
8391
8428
  get bodyLoadingComponent() {
8392
8429
  return this._bodyLoadingComponent$.value;
8393
8430
  }
8394
8431
  set bodyLoadingComponent(value) {
8395
8432
  this._bodyLoadingComponent$.next(value);
8396
8433
  }
8434
+ get bodyLoadingComponentInputs() {
8435
+ return this._bodyLoadingComponentInputs$.value;
8436
+ }
8437
+ set bodyLoadingComponentInputs(value) {
8438
+ this._bodyLoadingComponentInputs$.next(value ?? {});
8439
+ }
8397
8440
  get bodyEmptyComponent() {
8398
8441
  return this._bodyEmptyComponent$.value;
8399
8442
  }
8400
8443
  set bodyEmptyComponent(value) {
8401
8444
  this._bodyEmptyComponent$.next(value);
8402
8445
  }
8446
+ get bodyEmptyComponentInputs() {
8447
+ return this._bodyEmptyComponentInputs$.value;
8448
+ }
8449
+ set bodyEmptyComponentInputs(value) {
8450
+ this._bodyEmptyComponentInputs$.next(value ?? {});
8451
+ }
8403
8452
  get bodyMoreItemsHintComponent() {
8404
8453
  return this._bodyMoreItemsHintComponent$.value;
8405
8454
  }
8406
8455
  set bodyMoreItemsHintComponent(value) {
8407
8456
  this._bodyMoreItemsHintComponent$.next(value);
8408
8457
  }
8458
+ get bodyMoreItemsHintComponentInputs() {
8459
+ return this._bodyMoreItemsHintComponentInputs$.value;
8460
+ }
8461
+ set bodyMoreItemsHintComponentInputs(value) {
8462
+ this._bodyMoreItemsHintComponentInputs$.next(value ?? {});
8463
+ }
8409
8464
  get currentFilter() {
8410
8465
  return this._currentFilter$.value;
8411
8466
  }
@@ -8439,20 +8494,28 @@ class ComboboxDirective {
8439
8494
  this._selectField = inject(SELECT_FIELD_TOKEN);
8440
8495
  this._animatedOverlay = inject(AnimatedOverlayDirective);
8441
8496
  this._comboboxConfig = inject(COMBOBOX_CONFIG_TOKEN, { optional: true });
8497
+ this._themeProvider = inject(THEME_PROVIDER, { optional: true });
8442
8498
  this._initialValue$ = new BehaviorSubject(null);
8443
8499
  this._filterInternal$ = new BehaviorSubject(false);
8444
8500
  this._loading$ = new BehaviorSubject(false);
8445
8501
  this.loading$ = this._loading$.asObservable();
8446
8502
  this._error$ = new BehaviorSubject(null);
8503
+ this.error$ = this._error$.asObservable();
8447
8504
  this._placeholder$ = new BehaviorSubject(null);
8448
8505
  this._allowCustomValues$ = new BehaviorSubject(false);
8449
8506
  this._showBodyMoreItemsHint$ = new BehaviorSubject(false);
8450
8507
  this._optionComponent$ = new BehaviorSubject(this._comboboxConfig?.optionComponent ?? null);
8508
+ this._optionComponentInputs$ = new BehaviorSubject({});
8451
8509
  this._selectedOptionComponent$ = new BehaviorSubject(this._comboboxConfig?.selectedOptionComponent ?? null);
8510
+ this._selectedOptionComponentInputs$ = new BehaviorSubject({});
8452
8511
  this._bodyErrorComponent$ = new BehaviorSubject(this._comboboxConfig?.bodyErrorComponent ?? null);
8512
+ this._bodyErrorComponentInputs$ = new BehaviorSubject({});
8453
8513
  this._bodyLoadingComponent$ = new BehaviorSubject(this._comboboxConfig?.bodyLoadingComponent ?? null);
8514
+ this._bodyLoadingComponentInputs$ = new BehaviorSubject({});
8454
8515
  this._bodyEmptyComponent$ = new BehaviorSubject(this._comboboxConfig?.bodyEmptyComponent ?? null);
8516
+ this._bodyEmptyComponentInputs$ = new BehaviorSubject({});
8455
8517
  this._bodyMoreItemsHintComponent$ = new BehaviorSubject(this._comboboxConfig?.bodyMoreItemsHintComponent ?? null);
8518
+ this._bodyMoreItemsHintComponentInputs$ = new BehaviorSubject({});
8456
8519
  //#endregion
8457
8520
  //#region Outputs
8458
8521
  this.filterChange = new EventEmitter();
@@ -8505,6 +8568,12 @@ class ComboboxDirective {
8505
8568
  this.customBodyEmptyComponent$ = this._bodyEmptyComponent$.asObservable();
8506
8569
  this.customBodyMoreItemsHintTpl$ = this._bodyMoreItemsHintTemplate$.asObservable();
8507
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();
8508
8577
  this.trackByOptionKeyFn = (index, item) => this._selectionModel.getKey(item);
8509
8578
  this._activeSelectionModel.setSelectionModel(this._selectionModel);
8510
8579
  this._animatedOverlay.placement = 'bottom';
@@ -8539,6 +8608,9 @@ class ComboboxDirective {
8539
8608
  getOptionValue(option) {
8540
8609
  return this._selectionModel.getValue$(option);
8541
8610
  }
8611
+ combineSelectedOptionWithComponentInputs(option) {
8612
+ return this.customSelectedOptionComponentInputs$.pipe(map((inputs) => ({ option, ...inputs })), takeUntil(this._destroy$));
8613
+ }
8542
8614
  removeSelectedOption(option) {
8543
8615
  this._selectionModel.removeSelectedOption(option);
8544
8616
  this._input._markAsTouched();
@@ -8550,6 +8622,7 @@ class ComboboxDirective {
8550
8622
  const bodyRef = this._animatedOverlay.mount({
8551
8623
  component: this._comboboxBodyComponent,
8552
8624
  mirrorWidth: true,
8625
+ themeProvider: this._themeProvider,
8553
8626
  });
8554
8627
  if (!bodyRef)
8555
8628
  return;
@@ -8858,7 +8931,7 @@ class ComboboxDirective {
8858
8931
  .subscribe();
8859
8932
  }
8860
8933
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ComboboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
8861
- 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: [
8862
8935
  {
8863
8936
  provide: COMBOBOX_TOKEN,
8864
8937
  useExisting: ComboboxDirective,
@@ -8910,16 +8983,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
8910
8983
  args: [{ transform: booleanAttribute }]
8911
8984
  }], optionComponent: [{
8912
8985
  type: Input
8986
+ }], optionComponentInputs: [{
8987
+ type: Input
8913
8988
  }], selectedOptionComponent: [{
8914
8989
  type: Input
8990
+ }], selectedOptionComponentInputs: [{
8991
+ type: Input
8915
8992
  }], bodyErrorComponent: [{
8916
8993
  type: Input
8994
+ }], bodyErrorComponentInputs: [{
8995
+ type: Input
8917
8996
  }], bodyLoadingComponent: [{
8918
8997
  type: Input
8998
+ }], bodyLoadingComponentInputs: [{
8999
+ type: Input
8919
9000
  }], bodyEmptyComponent: [{
8920
9001
  type: Input
9002
+ }], bodyEmptyComponentInputs: [{
9003
+ type: Input
8921
9004
  }], bodyMoreItemsHintComponent: [{
8922
9005
  type: Input
9006
+ }], bodyMoreItemsHintComponentInputs: [{
9007
+ type: Input
8923
9008
  }], filterChange: [{
8924
9009
  type: Output
8925
9010
  }], optionTemplate: [{
@@ -8953,6 +9038,10 @@ class ComboboxOptionComponent {
8953
9038
  this.disabled$ = this._option$.pipe(map((opt) => isOptionDisabled(opt)));
8954
9039
  this.selected$ = this._option$.pipe(switchMap((opt) => this.combobox.isOptionSelected(opt)));
8955
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 })));
8956
9045
  this.hostClassBindings = signalHostClasses({
8957
9046
  'et-combobox-option--selected': toSignal(this.selected$),
8958
9047
  'et-combobox-option--disabled': toSignal(this.disabled$),
@@ -8985,7 +9074,7 @@ class ComboboxOptionComponent {
8985
9074
  provide: COMBOBOX_OPTION_TOKEN,
8986
9075
  useExisting: ComboboxOptionComponent,
8987
9076
  },
8988
- ], 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: { option }\"></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 }); }
9077
+ ], 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 }); }
8989
9078
  }
8990
9079
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ComboboxOptionComponent, decorators: [{
8991
9080
  type: Component,
@@ -9000,7 +9089,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
9000
9089
  provide: COMBOBOX_OPTION_TOKEN,
9001
9090
  useExisting: ComboboxOptionComponent,
9002
9091
  },
9003
- ], 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: { option }\"></ng-container>\n </ng-container>\n <ng-template #defaultOptionLabelTpl>\n {{ combobox.getOptionLabel(option) | async }}\n </ng-template>\n</ng-template>\n" }]
9092
+ ], 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" }]
9004
9093
  }], propDecorators: { option: [{
9005
9094
  type: Input,
9006
9095
  args: [{ required: true }]
@@ -9013,6 +9102,7 @@ class ComboboxBodyComponent {
9013
9102
  this.id = `et-combobox-body-${_uniqueId++}`;
9014
9103
  this._destroy$ = createDestroy();
9015
9104
  this._clickOutside = inject(ClickOutsideDirective);
9105
+ this._themeProvider = inject(THEME_PROVIDER);
9016
9106
  this.combobox = inject(COMBOBOX_TOKEN);
9017
9107
  this._options$ = new BehaviorSubject(null);
9018
9108
  this.hostClassBindings = signalHostClasses({
@@ -9023,6 +9113,10 @@ class ComboboxBodyComponent {
9023
9113
  'aria-multiselectable': toSignal(this.combobox.multiple$),
9024
9114
  'aria-labelledby': toSignal(this.combobox._input.labelId$),
9025
9115
  });
9116
+ this.customErrorComponentInputs$ = combineLatest([
9117
+ this.combobox.error$,
9118
+ this.combobox.customBodyErrorComponentInputs$,
9119
+ ]).pipe(map(([error, inputs]) => ({ error, ...inputs })));
9026
9120
  this._bodyTemplate = null;
9027
9121
  this.trackByFn = (index, item) => this.combobox._selectionModel.getKey(item);
9028
9122
  }
@@ -9034,13 +9128,16 @@ class ComboboxBodyComponent {
9034
9128
  .pipe(takeUntil(this._destroy$), tap(() => this.combobox.close()))
9035
9129
  .subscribe();
9036
9130
  }
9131
+ _setThemeFromProvider(provider) {
9132
+ this._themeProvider.syncWithProvider(provider);
9133
+ }
9037
9134
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ComboboxBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
9038
9135
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", 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: [
9039
9136
  {
9040
9137
  provide: COMBOBOX_BODY_TOKEN,
9041
9138
  useExisting: ComboboxBodyComponent,
9042
9139
  },
9043
- ], 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 }], 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 *ngComponentOutlet=\"comp\" />\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 *ngComponentOutlet=\"comp; inputs: { error: combobox.error }\" />\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 *ngComponentOutlet=\"comp\" />\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 *ngComponentOutlet=\"comp\" />\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 }); }
9140
+ ], 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 }); }
9044
9141
  }
9045
9142
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ComboboxBodyComponent, decorators: [{
9046
9143
  type: Component,
@@ -9058,12 +9155,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
9058
9155
  AsyncPipe,
9059
9156
  AnimatedLifecycleDirective,
9060
9157
  NgIf,
9061
- ], hostDirectives: [ClickOutsideDirective], providers: [
9158
+ ], hostDirectives: [ClickOutsideDirective, ProvideThemeDirective], providers: [
9062
9159
  {
9063
9160
  provide: COMBOBOX_BODY_TOKEN,
9064
9161
  useExisting: ComboboxBodyComponent,
9065
9162
  },
9066
- ], 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 *ngComponentOutlet=\"comp\" />\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 *ngComponentOutlet=\"comp; inputs: { error: combobox.error }\" />\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 *ngComponentOutlet=\"comp\" />\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 *ngComponentOutlet=\"comp\" />\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" }]
9163
+ ], 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" }]
9067
9164
  }], propDecorators: { _containerElementRef: [{
9068
9165
  type: ViewChild,
9069
9166
  args: ['containerElement', { static: true, read: ElementRef }]
@@ -9082,7 +9179,7 @@ class ComboboxComponent extends DecoratedInputBase {
9082
9179
  this.combobox.setBodyComponent(ComboboxBodyComponent);
9083
9180
  }
9084
9181
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
9085
- 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 *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 }); }
9182
+ 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 }); }
9086
9183
  }
9087
9184
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ComboboxComponent, decorators: [{
9088
9185
  type: Component,
@@ -9124,11 +9221,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
9124
9221
  'showBodyMoreItemsHint',
9125
9222
  'bodyEmptyText',
9126
9223
  'bodyMoreItemsHintText',
9224
+ 'optionComponentInputs',
9225
+ 'selectedOptionComponentInputs',
9226
+ 'bodyErrorComponentInputs',
9227
+ 'bodyLoadingComponentInputs',
9228
+ 'bodyEmptyComponentInputs',
9229
+ 'bodyMoreItemsHintComponentInputs',
9127
9230
  ],
9128
9231
  // eslint-disable-next-line @angular-eslint/no-outputs-metadata-property
9129
9232
  outputs: ['filterChange'],
9130
9233
  },
9131
- ], 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"] }]
9234
+ ], 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"] }]
9132
9235
  }], ctorParameters: function () { return []; } });
9133
9236
 
9134
9237
  const ComboboxImports = [
@@ -9423,6 +9526,7 @@ class SelectDirective {
9423
9526
  this._destroy$ = createDestroy();
9424
9527
  this._liveAnnouncer = inject(LiveAnnouncer);
9425
9528
  this._selectField = inject(SELECT_FIELD_TOKEN);
9529
+ this._themeProvider = inject(THEME_PROVIDER, { optional: true });
9426
9530
  this.input = inject(INPUT_TOKEN);
9427
9531
  this._selectBodyId$ = new BehaviorSubject(null);
9428
9532
  this._isOpen$ = new BehaviorSubject(false);
@@ -9526,6 +9630,7 @@ class SelectDirective {
9526
9630
  const instance = this._animatedOverlay.mount({
9527
9631
  component: this._selectBodyConfig.component,
9528
9632
  mirrorWidth: true,
9633
+ themeProvider: this._themeProvider,
9529
9634
  data: { _bodyTemplate: this._selectBodyConfig.template },
9530
9635
  });
9531
9636
  if (!instance)
@@ -9904,10 +10009,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
9904
10009
  class SelectBodyComponent {
9905
10010
  constructor() {
9906
10011
  this.selectBody = inject(SELECT_BODY_TOKEN);
10012
+ this._themeProvider = inject(THEME_PROVIDER);
9907
10013
  this._bodyTemplate = null;
9908
10014
  }
10015
+ _setThemeFromProvider(provider) {
10016
+ this._themeProvider.syncWithProvider(provider);
10017
+ }
9909
10018
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SelectBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
9910
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SelectBodyComponent, isStandalone: true, selector: "et-select-body", host: { classAttribute: "et-select-body et-with-default-animation" }, viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], hostDirectives: [{ directive: SelectBodyDirective }], ngImport: i0, template: `
10019
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SelectBodyComponent, isStandalone: true, selector: "et-select-body", host: { classAttribute: "et-select-body et-with-default-animation" }, viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], hostDirectives: [{ directive: SelectBodyDirective }, { directive: i2$1.ProvideThemeDirective }], ngImport: i0, template: `
9911
10020
  <div class="et-select-body-container" etAnimatedLifecycle>
9912
10021
  <ng-container [ngTemplateOutlet]="_bodyTemplate" />
9913
10022
  </div>
@@ -9921,7 +10030,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
9921
10030
  </div>
9922
10031
  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
9923
10032
  class: 'et-select-body et-with-default-animation',
9924
- }, imports: [AnimatedLifecycleDirective, NgTemplateOutlet], hostDirectives: [SelectBodyDirective], styles: [".et-select-body.et-with-default-animation .et-select-body-container.et-animation-enter-from,.et-select-body.et-with-default-animation .et-select-body-container.et-animation-leave-to{opacity:0;transform:scaleY(0)}.et-select-body.et-with-default-animation .et-select-body-container.et-animation-enter-active{transition:transform 125ms var(--ease-out-5),opacity 125ms var(--ease-out-5)}.et-select-body.et-with-default-animation .et-select-body-container.et-animation-leave-active{transition:transform 50ms var(--ease-in-5),opacity 50ms var(--ease-in-5)}.et-select-body.et-with-default-animation[et-floating-placement^=top] .et-select-body-container{transform-origin:bottom}.et-select-body.et-with-default-animation[et-floating-placement^=bottom] .et-select-body-container{transform-origin:top}.et-select-body{transform:var(--et-floating-translate);will-change:transform}.et-select-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-select-body-container{overflow:overlay}}.et-select-body{width:100%;display:grid}\n"] }]
10033
+ }, imports: [AnimatedLifecycleDirective, NgTemplateOutlet], hostDirectives: [SelectBodyDirective, ProvideThemeDirective], styles: [".et-select-body.et-with-default-animation .et-select-body-container.et-animation-enter-from,.et-select-body.et-with-default-animation .et-select-body-container.et-animation-leave-to{opacity:0;transform:scaleY(0)}.et-select-body.et-with-default-animation .et-select-body-container.et-animation-enter-active{transition:transform 125ms var(--ease-out-5),opacity 125ms var(--ease-out-5)}.et-select-body.et-with-default-animation .et-select-body-container.et-animation-leave-active{transition:transform 50ms var(--ease-in-5),opacity 50ms var(--ease-in-5)}.et-select-body.et-with-default-animation[et-floating-placement^=top] .et-select-body-container{transform-origin:bottom}.et-select-body.et-with-default-animation[et-floating-placement^=bottom] .et-select-body-container{transform-origin:top}.et-select-body{transform:var(--et-floating-translate);will-change:transform}.et-select-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-select-body-container{overflow:overlay}}.et-select-body{width:100%;display:grid}\n"] }]
9925
10034
  }], propDecorators: { _animatedLifecycle: [{
9926
10035
  type: ViewChild,
9927
10036
  args: [ANIMATED_LIFECYCLE_TOKEN, { static: true }]
@@ -11348,6 +11457,9 @@ class PictureComponent {
11348
11457
  this.trackBySrc = (_, item) => item.srcset;
11349
11458
  }
11350
11459
  combineWithConfig(src) {
11460
+ if (isDevMode() && src.type === '') {
11461
+ console.warn(`The type attribute is missing for the following source`, src.srcset, this);
11462
+ }
11351
11463
  if (!this.config?.baseUrl || src.srcset.startsWith('http')) {
11352
11464
  return src;
11353
11465
  }
@@ -11358,7 +11470,7 @@ class PictureComponent {
11358
11470
  };
11359
11471
  }
11360
11472
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: PictureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
11361
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: PictureComponent, isStandalone: true, selector: "et-picture", inputs: { sources: "sources" }, host: { classAttribute: "et-picture" }, hostDirectives: [{ directive: PictureDataDirective, inputs: ["imgClass", "imgClass", "hasPriority", "hasPriority", "figureClass", "figureClass", "pictureClass", "pictureClass", "figcaptionClass", "figcaptionClass", "defaultSrc", "defaultSrc", "alt", "alt", "figcaption", "figcaption", "width", "width", "height", "height", "sizes", "sizes"] }], ngImport: i0, template: "<figure [ngClass]=\"pictureData.figureClass\" class=\"et-picture-figure\">\n <picture [ngClass]=\"pictureData.pictureClass\" class=\"et-picture-picture\">\n <ng-container *ngFor=\"let source of sources; trackBy: trackBySrc\">\n <source\n *etLet=\"combineWithConfig(source) as s\"\n [type]=\"s.type\"\n [attr.srcset]=\"s.srcset\"\n [attr.sizes]=\"pictureData.sizes\"\n />\n </ng-container>\n\n <ng-container *ngIf=\"pictureData.defaultSrc as source\">\n <img\n *etLet=\"combineWithConfig(source) as s\"\n [attr.loading]=\"pictureData.hasPriority ? 'eager' : 'lazy'\"\n [attr.fetchpriority]=\"pictureData.hasPriority ? 'high' : 'auto'\"\n [ngClass]=\"pictureData.imgClass\"\n [src]=\"s.srcset\"\n [attr.type]=\"s.type\"\n [attr.alt]=\"pictureData.alt\"\n [attr.width]=\"pictureData.width\"\n [attr.height]=\"pictureData.height\"\n [attr.sizes]=\"pictureData.sizes\"\n class=\"et-picture-img\"\n />\n </ng-container>\n </picture>\n\n <figcaption *ngIf=\"pictureData.figcaption\" [ngClass]=\"pictureData.figcaptionClass\" class=\"et-picture-figcaption\">\n {{ pictureData.figcaption }}\n </figcaption>\n</figure>\n", dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LetDirective, selector: "[etLet]", inputs: ["etLet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
11473
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: PictureComponent, isStandalone: true, selector: "et-picture", inputs: { sources: "sources" }, host: { classAttribute: "et-picture" }, hostDirectives: [{ directive: PictureDataDirective, inputs: ["imgClass", "imgClass", "hasPriority", "hasPriority", "figureClass", "figureClass", "pictureClass", "pictureClass", "figcaptionClass", "figcaptionClass", "defaultSrc", "defaultSrc", "alt", "alt", "figcaption", "figcaption", "width", "width", "height", "height", "sizes", "sizes"] }], ngImport: i0, template: "<figure [ngClass]=\"pictureData.figureClass\" class=\"et-picture-figure\">\n <picture [ngClass]=\"pictureData.pictureClass\" class=\"et-picture-picture\">\n <ng-container *ngFor=\"let source of sources; trackBy: trackBySrc\">\n <source\n *etLet=\"combineWithConfig(source) as s\"\n [type]=\"s.type\"\n [attr.srcset]=\"s.srcset\"\n [attr.sizes]=\"pictureData.sizes\"\n />\n </ng-container>\n\n <ng-container *ngIf=\"pictureData.defaultSrc as source\">\n <img\n *etLet=\"combineWithConfig(source) as s\"\n [attr.loading]=\"pictureData.hasPriority ? 'eager' : 'lazy'\"\n [attr.fetchpriority]=\"pictureData.hasPriority ? 'high' : 'auto'\"\n [ngClass]=\"pictureData.imgClass\"\n [attr.srcset]=\"s.srcset\"\n [attr.type]=\"s.type\"\n [attr.alt]=\"pictureData.alt\"\n [attr.width]=\"pictureData.width\"\n [attr.height]=\"pictureData.height\"\n [attr.sizes]=\"pictureData.sizes\"\n class=\"et-picture-img\"\n />\n </ng-container>\n </picture>\n\n <figcaption *ngIf=\"pictureData.figcaption\" [ngClass]=\"pictureData.figcaptionClass\" class=\"et-picture-figcaption\">\n {{ pictureData.figcaption }}\n </figcaption>\n</figure>\n", dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LetDirective, selector: "[etLet]", inputs: ["etLet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
11362
11474
  }
11363
11475
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: PictureComponent, decorators: [{
11364
11476
  type: Component,
@@ -11381,7 +11493,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
11381
11493
  'sizes',
11382
11494
  ],
11383
11495
  },
11384
- ], template: "<figure [ngClass]=\"pictureData.figureClass\" class=\"et-picture-figure\">\n <picture [ngClass]=\"pictureData.pictureClass\" class=\"et-picture-picture\">\n <ng-container *ngFor=\"let source of sources; trackBy: trackBySrc\">\n <source\n *etLet=\"combineWithConfig(source) as s\"\n [type]=\"s.type\"\n [attr.srcset]=\"s.srcset\"\n [attr.sizes]=\"pictureData.sizes\"\n />\n </ng-container>\n\n <ng-container *ngIf=\"pictureData.defaultSrc as source\">\n <img\n *etLet=\"combineWithConfig(source) as s\"\n [attr.loading]=\"pictureData.hasPriority ? 'eager' : 'lazy'\"\n [attr.fetchpriority]=\"pictureData.hasPriority ? 'high' : 'auto'\"\n [ngClass]=\"pictureData.imgClass\"\n [src]=\"s.srcset\"\n [attr.type]=\"s.type\"\n [attr.alt]=\"pictureData.alt\"\n [attr.width]=\"pictureData.width\"\n [attr.height]=\"pictureData.height\"\n [attr.sizes]=\"pictureData.sizes\"\n class=\"et-picture-img\"\n />\n </ng-container>\n </picture>\n\n <figcaption *ngIf=\"pictureData.figcaption\" [ngClass]=\"pictureData.figcaptionClass\" class=\"et-picture-figcaption\">\n {{ pictureData.figcaption }}\n </figcaption>\n</figure>\n" }]
11496
+ ], template: "<figure [ngClass]=\"pictureData.figureClass\" class=\"et-picture-figure\">\n <picture [ngClass]=\"pictureData.pictureClass\" class=\"et-picture-picture\">\n <ng-container *ngFor=\"let source of sources; trackBy: trackBySrc\">\n <source\n *etLet=\"combineWithConfig(source) as s\"\n [type]=\"s.type\"\n [attr.srcset]=\"s.srcset\"\n [attr.sizes]=\"pictureData.sizes\"\n />\n </ng-container>\n\n <ng-container *ngIf=\"pictureData.defaultSrc as source\">\n <img\n *etLet=\"combineWithConfig(source) as s\"\n [attr.loading]=\"pictureData.hasPriority ? 'eager' : 'lazy'\"\n [attr.fetchpriority]=\"pictureData.hasPriority ? 'high' : 'auto'\"\n [ngClass]=\"pictureData.imgClass\"\n [attr.srcset]=\"s.srcset\"\n [attr.type]=\"s.type\"\n [attr.alt]=\"pictureData.alt\"\n [attr.width]=\"pictureData.width\"\n [attr.height]=\"pictureData.height\"\n [attr.sizes]=\"pictureData.sizes\"\n class=\"et-picture-img\"\n />\n </ng-container>\n </picture>\n\n <figcaption *ngIf=\"pictureData.figcaption\" [ngClass]=\"pictureData.figcaptionClass\" class=\"et-picture-figcaption\">\n {{ pictureData.figcaption }}\n </figcaption>\n</figure>\n" }]
11385
11497
  }], propDecorators: { sources: [{
11386
11498
  type: Input
11387
11499
  }] } });
@@ -12481,7 +12593,7 @@ class TableComponent extends CdkTable {
12481
12593
  this._isShowingTableBusy = shouldShow;
12482
12594
  this._cdr.markForCheck();
12483
12595
  }
12484
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TableComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: 'role', attribute: true }, { token: i1$4.Directionality, optional: true }, { token: DOCUMENT }, { token: i2$1.Platform }, { token: _VIEW_REPEATER_STRATEGY }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i3.ViewportRuler }, { token: STICKY_POSITIONING_LISTENER, optional: true, skipSelf: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
12596
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TableComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: 'role', attribute: true }, { token: i1$4.Directionality, optional: true }, { token: DOCUMENT }, { token: i2$2.Platform }, { token: _VIEW_REPEATER_STRATEGY }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i3.ViewportRuler }, { token: STICKY_POSITIONING_LISTENER, optional: true, skipSelf: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
12485
12597
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TableComponent, isStandalone: true, selector: "et-table, table[et-table]", inputs: { busy: "busy" }, host: { properties: { "class.et-table-fixed-layout": "fixedLayout", "attr.aria-busy": "this._attrAriaBusy" }, classAttribute: "et-table et-data-table__table" }, providers: [
12486
12598
  { provide: CdkTable, useExisting: TableComponent },
12487
12599
  { provide: CDK_TABLE, useExisting: TableComponent },
@@ -12530,7 +12642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
12530
12642
  }] }, { type: Document, decorators: [{
12531
12643
  type: Inject,
12532
12644
  args: [DOCUMENT]
12533
- }] }, { type: i2$1.Platform }, { type: undefined, decorators: [{
12645
+ }] }, { type: i2$2.Platform }, { type: undefined, decorators: [{
12534
12646
  type: Inject,
12535
12647
  args: [_VIEW_REPEATER_STRATEGY]
12536
12648
  }] }, { type: i1$3._CoalescedStyleScheduler, decorators: [{