@ethlete/cdk 2.3.2 → 2.4.0

package/fesm2022/ethlete-cdk.mjs

@@ -3,9 +3,9 @@ import * as i1 from '@angular/cdk/portal';
 import { CdkPortal, PortalModule, ComponentPortal, CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
 import { AsyncPipe, NgIf, NgClass, NgTemplateOutlet, NgForOf, JsonPipe, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Directive, InjectionToken, Input, ContentChild, inject, ContentChildren, ElementRef, Injector, HostBinding, isDevMode, Injectable, TemplateRef, ViewContainerRef, forwardRef, ViewChild, EventEmitter, Output, Optional, Inject, SkipSelf, HostListener, NgZone, ChangeDetectorRef, Renderer2, Attribute } from '@angular/core';
-import * as i3 from '@ethlete/core';
-import { LetDirective, DestroyService, ScrollObserverFirstElementDirective, ScrollObserverLastElementDirective, Memo, createReactiveBindings, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, equal, ResizeObserverService, createFlipAnimation, clamp, nextFrame, DELAYABLE_TOKEN, ObserveResizeDirective, SmartBlockScrollStrategy, RouterStateService, ANIMATED_LIFECYCLE_TOKEN, AnimatedLifecycleDirective, ClickObserverService, FocusVisibleService, CursorDragScrollDirective, ObserveScrollStateDirective, ObserveContentDirective, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, Directive, InjectionToken, Input, ContentChild, ContentChildren, inject, ElementRef, Injector, HostBinding, isDevMode, Injectable, TemplateRef, ViewContainerRef, forwardRef, ViewChild, EventEmitter, Output, Optional, Inject, SkipSelf, HostListener, ChangeDetectorRef, Renderer2, Attribute } from '@angular/core';
+import * as i2 from '@ethlete/core';
+import { LetDirective, createDestroy, ScrollObserverFirstElementDirective, ScrollObserverLastElementDirective, Memo, createReactiveBindings, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, equal, ResizeObserverService, createFlipAnimation, ANIMATED_LIFECYCLE_TOKEN, AnimatedLifecycleDirective, AnimatedOverlayDirective, clamp, nextFrame, DELAYABLE_TOKEN, ObserveResizeDirective, SmartBlockScrollStrategy, RouterStateService, ClickObserverService, FocusVisibleService, scrollToElement, IS_ACTIVE_ELEMENT, CursorDragScrollDirective, ObserveScrollStateDirective, ObserveContentDirective, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
 import { BehaviorSubject, startWith, map, switchMap, combineLatest, pairwise, tap, takeUntil, skip, of, Subject, filter, distinctUntilChanged, withLatestFrom, debounceTime, fromEvent, merge, take, timer, skipUntil, defer, Subscription, Observable } from 'rxjs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { __decorate, __metadata } from 'tslib';
@@ -17,15 +17,14 @@ import { NgControl, FormControl, Validators, NG_VALUE_ACCESSOR } from '@angular/
 import * as i1$3 from '@angular/cdk/bidi';
 import { Directionality } from '@angular/cdk/bidi';
 import { CdkDialogContainer, Dialog, DialogConfig, DIALOG_SCROLL_STRATEGY_PROVIDER as DIALOG_SCROLL_STRATEGY_PROVIDER$1 } from '@angular/cdk/dialog';
-import * as i2 from '@angular/cdk/overlay';
-import { ViewportRuler, Overlay } from '@angular/cdk/overlay';
+import * as i2$1 from '@angular/cdk/overlay';
+import { ViewportRuler } from '@angular/cdk/overlay';
 import { ESCAPE, hasModifierKey, SPACE, ENTER } from '@angular/cdk/keycodes';
-import { createPopper } from '@popperjs/core';
 import { Meta, Title } from '@angular/platform-browser';
-import * as i3$1 from '@angular/router';
+import * as i3 from '@angular/router';
 import { Router, NavigationEnd } from '@angular/router';
 import { _VIEW_REPEATER_STRATEGY, _RecycleViewRepeaterStrategy, _DisposeViewRepeaterStrategy, DataSource } from '@angular/cdk/collections';
-import * as i2$1 from '@angular/cdk/platform';
+import * as i2$2 from '@angular/cdk/platform';
 import * as i1$4 from '@angular/cdk/scrolling';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import * as i1$2 from '@angular/cdk/table';
@@ -220,7 +219,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
 
 class AccordionGroupComponent {
     constructor() {
-        this._destroy$ = inject(DestroyService, { host: true }).destroy$;
+        this._destroy$ = createDestroy();
         this._autoCloseOthers = false;
     }
     get autoCloseOthers() {
@@ -257,13 +256,13 @@ class AccordionGroupComponent {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AccordionGroupComponent, isStandalone: true, selector: "et-accordion-group", inputs: { autoCloseOthers: "autoCloseOthers" }, host: { classAttribute: "et-accordion-group" }, providers: [DestroyService], queries: [{ propertyName: "_accordions", predicate: ACCORDION_COMPONENT }], ngImport: i0, template: "<ng-content select=\"et-accordion\" />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AccordionGroupComponent, isStandalone: true, selector: "et-accordion-group", inputs: { autoCloseOthers: "autoCloseOthers" }, host: { classAttribute: "et-accordion-group" }, queries: [{ propertyName: "_accordions", predicate: ACCORDION_COMPONENT }], ngImport: i0, template: "<ng-content select=\"et-accordion\" />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AccordionGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-accordion-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                         class: 'et-accordion-group',
-                    }, providers: [DestroyService], template: "<ng-content select=\"et-accordion\" />\n" }]
+                    }, template: "<ng-content select=\"et-accordion\" />\n" }]
         }], propDecorators: { autoCloseOthers: [{
                 type: Input
             }], _accordions: [{
@@ -1091,13 +1090,12 @@ class ButtonDirective {
         this._bindings.remove('tabindex');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: ButtonDirective, isStandalone: true, inputs: { disabled: "disabled", type: "type", pressed: "pressed" }, providers: [DestroyService], exportAs: ["etButton"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: ButtonDirective, isStandalone: true, inputs: { disabled: "disabled", type: "type", pressed: "pressed" }, exportAs: ["etButton"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
-                    providers: [DestroyService],
                     exportAs: 'etButton',
                 }]
         }], propDecorators: { disabled: [{
@@ -1166,7 +1164,7 @@ class QueryButtonDirective {
     }
     constructor() {
         this._elementRef = inject(ElementRef);
-        this._destroy$ = inject(DestroyService).destroy$;
+        this._destroy$ = createDestroy();
         this._button = inject(ButtonDirective);
         this._cleanupTimeout = null;
         this.showSuccess$ = new BehaviorSubject(false);
@@ -1199,13 +1197,12 @@ class QueryButtonDirective {
         this._button._removeDisabledBindings();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: QueryButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: QueryButtonDirective, isStandalone: true, inputs: { query: "query" }, providers: [DestroyService], exportAs: ["etQueryButton"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: QueryButtonDirective, isStandalone: true, inputs: { query: "query" }, exportAs: ["etQueryButton"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: QueryButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
-                    providers: [DestroyService],
                     exportAs: 'etQueryButton',
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { query: [{
@@ -1526,7 +1523,7 @@ class InputDirective {
         this._inputStateService = inject(InputStateService);
         this._formFieldStateService = inject(FormFieldStateService);
         this._ngControl = inject(NgControl, { optional: true });
-        this._destroy$ = inject(DestroyService).destroy$;
+        this._destroy$ = createDestroy();
         this._autofillMonitor = inject(AutofillMonitor);
         this._focusMonitor = inject(FocusMonitor);
         this._elementRef = inject(ElementRef);
@@ -1724,7 +1721,7 @@ class InputDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: InputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: InputDirective, isStandalone: true, selector: "[etInput]", inputs: { autocomplete: "autocomplete", placeholder: "placeholder" }, host: { properties: { "attr.autocomplete": "null" }, classAttribute: "et-input" }, providers: [{ provide: INPUT_TOKEN, useExisting: InputDirective }, DestroyService], exportAs: ["etInput"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: InputDirective, isStandalone: true, selector: "[etInput]", inputs: { autocomplete: "autocomplete", placeholder: "placeholder" }, host: { properties: { "attr.autocomplete": "null" }, classAttribute: "et-input" }, providers: [{ provide: INPUT_TOKEN, useExisting: InputDirective }], exportAs: ["etInput"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: InputDirective, decorators: [{
             type: Directive,
@@ -1736,7 +1733,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                         class: 'et-input',
                         '[attr.autocomplete]': 'null',
                     },
-                    providers: [{ provide: INPUT_TOKEN, useExisting: InputDirective }, DestroyService],
+                    providers: [{ provide: INPUT_TOKEN, useExisting: InputDirective }],
                 }]
         }], propDecorators: { autocomplete: [{
                 type: Input
@@ -1746,7 +1743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
 
 class IfInputEmptyDirective {
     constructor() {
-        this._destroy$ = inject(DestroyService, { host: true }).destroy$;
+        this._destroy$ = createDestroy();
         this._input = inject(INPUT_TOKEN);
         this._templateRef = inject(TemplateRef);
         this._viewContainerRef = inject(ViewContainerRef);
@@ -1769,20 +1766,19 @@ class IfInputEmptyDirective {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: IfInputEmptyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: IfInputEmptyDirective, isStandalone: true, selector: "[etIfInputEmpty]", providers: [DestroyService], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: IfInputEmptyDirective, isStandalone: true, selector: "[etIfInputEmpty]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: IfInputEmptyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etIfInputEmpty]',
                     standalone: true,
-                    providers: [DestroyService],
                 }]
         }] });
 
 class IfInputFilledDirective {
     constructor() {
-        this._destroy$ = inject(DestroyService, { host: true }).destroy$;
+        this._destroy$ = createDestroy();
         this._input = inject(INPUT_TOKEN);
         this._templateRef = inject(TemplateRef);
         this._viewContainerRef = inject(ViewContainerRef);
@@ -1805,14 +1801,13 @@ class IfInputFilledDirective {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: IfInputFilledDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: IfInputFilledDirective, isStandalone: true, selector: "[etIfInputFilled]", providers: [DestroyService], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: IfInputFilledDirective, isStandalone: true, selector: "[etIfInputFilled]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: IfInputFilledDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etIfInputFilled]',
                     standalone: true,
-                    providers: [DestroyService],
                 }]
         }] });
 
@@ -1893,7 +1888,7 @@ const STATIC_FORM_FIELD_TOKEN = new InjectionToken('ET_STATIC_FORM_FIELD_DIRECTI
 class StaticFormFieldDirective {
     constructor() {
         this._formFieldStateService = inject(FormFieldStateService);
-        this._destroy$ = inject(DestroyService, { host: true }).destroy$;
+        this._destroy$ = createDestroy();
         this._elementRef = inject(ElementRef);
         this._focusMonitor = inject(FocusMonitor);
     }
@@ -1934,7 +1929,6 @@ class StaticFormFieldDirective {
                 provide: STATIC_FORM_FIELD_TOKEN,
                 useExisting: StaticFormFieldDirective,
             },
-            DestroyService,
         ], queries: [{ propertyName: "_input", predicate: i0.forwardRef(function () { return INPUT_TOKEN; }) }, { propertyName: "_label", predicate: i0.forwardRef(function () { return LABEL_TOKEN; }) }], exportAs: ["etStaticFormField"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: StaticFormFieldDirective, decorators: [{
@@ -1948,7 +1942,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                             provide: STATIC_FORM_FIELD_TOKEN,
                             useExisting: StaticFormFieldDirective,
                         },
-                        DestroyService,
                     ],
                 }]
         }], propDecorators: { _input: [{
@@ -2032,7 +2025,6 @@ class WriteableInputDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: WriteableInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: WriteableInputDirective, isStandalone: true, providers: [
             WRITEABLE_INPUT_VALUE_ACCESSOR,
-            DestroyService,
             InputStateService,
             { provide: WRITEABLE_INPUT_TOKEN, useExisting: WriteableInputDirective },
         ], exportAs: ["etWriteableInput"], ngImport: i0 }); }
@@ -2044,7 +2036,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     exportAs: 'etWriteableInput',
                     providers: [
                         WRITEABLE_INPUT_VALUE_ACCESSOR,
-                        DestroyService,
                         InputStateService,
                         { provide: WRITEABLE_INPUT_TOKEN, useExisting: WriteableInputDirective },
                     ],
@@ -2089,13 +2080,13 @@ class ErrorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: ErrorComponent, isStandalone: true, selector: "et-error", inputs: { errors: "errors" }, host: { classAttribute: "et-error" }, providers: [DestroyService], ngImport: i0, template: "<ng-container *ngIf=\"errorText$ | async | async as text\">\n  <span [id]=\"id\" aria-atomic=\"true\" aria-live=\"polite\"> {{ text }} </span>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: ErrorComponent, isStandalone: true, selector: "et-error", inputs: { errors: "errors" }, host: { classAttribute: "et-error" }, ngImport: i0, template: "<ng-container *ngIf=\"errorText$ | async | async as text\">\n  <span [id]=\"id\" aria-atomic=\"true\" aria-live=\"polite\"> {{ text }} </span>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ErrorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-error', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'et-error',
-                    }, imports: [JsonPipe, NgIf, AsyncPipe], providers: [DestroyService], hostDirectives: [], template: "<ng-container *ngIf=\"errorText$ | async | async as text\">\n  <span [id]=\"id\" aria-atomic=\"true\" aria-live=\"polite\"> {{ text }} </span>\n</ng-container>\n" }]
+                    }, imports: [JsonPipe, NgIf, AsyncPipe], hostDirectives: [], template: "<ng-container *ngIf=\"errorText$ | async | async as text\">\n  <span [id]=\"id\" aria-atomic=\"true\" aria-live=\"polite\"> {{ text }} </span>\n</ng-container>\n" }]
         }], propDecorators: { errors: [{
                 type: Input
             }] } });
@@ -2116,13 +2107,13 @@ class CheckboxFieldDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CheckboxFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: CheckboxFieldDirective, isStandalone: true, providers: [{ provide: CHECKBOX_FIELD_TOKEN, useExisting: CheckboxFieldDirective }, DestroyService], queries: [{ propertyName: "_checkbox", predicate: i0.forwardRef(function () { return CHECKBOX_TOKEN; }), descendants: true }], exportAs: ["etCheckboxGroup"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: CheckboxFieldDirective, isStandalone: true, providers: [{ provide: CHECKBOX_FIELD_TOKEN, useExisting: CheckboxFieldDirective }], queries: [{ propertyName: "_checkbox", predicate: i0.forwardRef(function () { return CHECKBOX_TOKEN; }), descendants: true }], exportAs: ["etCheckboxGroup"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CheckboxFieldDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
-                    providers: [{ provide: CHECKBOX_FIELD_TOKEN, useExisting: CheckboxFieldDirective }, DestroyService],
+                    providers: [{ provide: CHECKBOX_FIELD_TOKEN, useExisting: CheckboxFieldDirective }],
                     exportAs: 'etCheckboxGroup',
                 }]
         }], propDecorators: { _checkbox: [{
@@ -2158,13 +2149,13 @@ class CheckboxDirective {
         this.input._setShouldDisplayError(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: CheckboxDirective, isStandalone: true, providers: [{ provide: CHECKBOX_TOKEN, useExisting: CheckboxDirective }, DestroyService], exportAs: ["etCheckbox"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: CheckboxDirective, isStandalone: true, providers: [{ provide: CHECKBOX_TOKEN, useExisting: CheckboxDirective }], exportAs: ["etCheckbox"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CheckboxDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
-                    providers: [{ provide: CHECKBOX_TOKEN, useExisting: CheckboxDirective }, DestroyService],
+                    providers: [{ provide: CHECKBOX_TOKEN, useExisting: CheckboxDirective }],
                     exportAs: 'etCheckbox',
                 }]
         }] });
@@ -2172,7 +2163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
 const CHECKBOX_GROUP_TOKEN = new InjectionToken('ET_CHECKBOX_GROUP_DIRECTIVE_TOKEN');
 class CheckboxGroupDirective {
     constructor() {
-        this._destroy$ = inject(DestroyService, { host: true }).destroy$;
+        this._destroy$ = createDestroy();
         this.checkboxesWithoutGroupCtrlObservable$ = new BehaviorSubject(null);
         this.checkboxesWithoutGroupCtrl$ = this.checkboxesWithoutGroupCtrlObservable$.pipe(switchMap((value) => value ?? of([])));
     }
@@ -2226,7 +2217,7 @@ class CheckboxGroupDirective {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CheckboxGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: CheckboxGroupDirective, isStandalone: true, host: { attributes: { "role": "group" } }, providers: [DestroyService, { provide: CHECKBOX_GROUP_TOKEN, useExisting: CheckboxGroupDirective }], queries: [{ propertyName: "groupControl", first: true, predicate: i0.forwardRef(function () { return CHECKBOX_GROUP_CONTROL_TOKEN; }), descendants: true }, { propertyName: "checkboxes", predicate: i0.forwardRef(function () { return CHECKBOX_TOKEN; }), descendants: true }], exportAs: ["etCheckboxGroup"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: CheckboxGroupDirective, isStandalone: true, host: { attributes: { "role": "group" } }, providers: [{ provide: CHECKBOX_GROUP_TOKEN, useExisting: CheckboxGroupDirective }], queries: [{ propertyName: "groupControl", first: true, predicate: i0.forwardRef(function () { return CHECKBOX_GROUP_CONTROL_TOKEN; }), descendants: true }, { propertyName: "checkboxes", predicate: i0.forwardRef(function () { return CHECKBOX_TOKEN; }), descendants: true }], exportAs: ["etCheckboxGroup"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CheckboxGroupDirective, decorators: [{
             type: Directive,
@@ -2236,7 +2227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                         role: 'group',
                     },
                     exportAs: 'etCheckboxGroup',
-                    providers: [DestroyService, { provide: CHECKBOX_GROUP_TOKEN, useExisting: CheckboxGroupDirective }],
+                    providers: [{ provide: CHECKBOX_GROUP_TOKEN, useExisting: CheckboxGroupDirective }],
                 }]
         }], propDecorators: { checkboxes: [{
                 type: ContentChildren,
@@ -2265,7 +2256,7 @@ class CheckboxGroupControlDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CheckboxGroupControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: CheckboxGroupControlDirective, isStandalone: true, selector: "[etCheckboxGroupControl]", providers: [{ provide: CHECKBOX_GROUP_CONTROL_TOKEN, useExisting: CheckboxGroupControlDirective }, DestroyService], exportAs: ["etCheckboxGroupControl"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: CheckboxGroupControlDirective, isStandalone: true, selector: "[etCheckboxGroupControl]", providers: [{ provide: CHECKBOX_GROUP_CONTROL_TOKEN, useExisting: CheckboxGroupControlDirective }], exportAs: ["etCheckboxGroupControl"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CheckboxGroupControlDirective, decorators: [{
             type: Directive,
@@ -2273,7 +2264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: '[etCheckboxGroupControl]',
                     standalone: true,
                     exportAs: 'etCheckboxGroupControl',
-                    providers: [{ provide: CHECKBOX_GROUP_CONTROL_TOKEN, useExisting: CheckboxGroupControlDirective }, DestroyService],
+                    providers: [{ provide: CHECKBOX_GROUP_CONTROL_TOKEN, useExisting: CheckboxGroupControlDirective }],
                 }]
         }] });
 
@@ -2322,13 +2313,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
 
 class CheckboxGroupComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: CheckboxGroupComponent, isStandalone: true, selector: "et-checkbox-group", host: { classAttribute: "et-form-group et-checkbox-group" }, providers: [DestroyService], hostDirectives: [{ directive: CheckboxGroupDirective }, { directive: StaticFormGroupDirective }], ngImport: i0, template: ` <ng-content select="et-checkbox-field" /> `, isInline: true, styles: [":where(.et-checkbox-group){display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: CheckboxGroupComponent, isStandalone: true, selector: "et-checkbox-group", host: { classAttribute: "et-form-group et-checkbox-group" }, hostDirectives: [{ directive: CheckboxGroupDirective }, { directive: StaticFormGroupDirective }], ngImport: i0, template: ` <ng-content select="et-checkbox-field" /> `, isInline: true, styles: [":where(.et-checkbox-group){display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-checkbox-group', template: ` <ng-content select="et-checkbox-field" /> `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'et-form-group et-checkbox-group',
-                    }, providers: [DestroyService], hostDirectives: [CheckboxGroupDirective, StaticFormGroupDirective], styles: [":where(.et-checkbox-group){display:block}\n"] }]
+                    }, hostDirectives: [CheckboxGroupDirective, StaticFormGroupDirective], styles: [":where(.et-checkbox-group){display:block}\n"] }]
         }] });
 
 class DecoratedFormFieldBase {
@@ -2370,7 +2361,7 @@ class DecoratedInputBase extends InputBase {
     constructor() {
         super(...arguments);
         this._formFieldStateService = inject(FormFieldStateService);
-        this._destroy$ = inject(DestroyService, { host: true }).destroy$;
+        this._destroy$ = createDestroy();
         this._bindings = createReactiveBindings({
             attribute: 'class.et-input--has-prefix',
             observable: this._formFieldStateService.hasPrefix$,
@@ -2430,7 +2421,7 @@ class AutosizeTextareaDirective {
     constructor() {
         this._input = inject(INPUT_TOKEN, { host: true });
         this._resizeObserver = inject(ResizeObserverService);
-        this._destroy$ = inject(DestroyService, { host: true }).destroy$;
+        this._destroy$ = createDestroy();
     }
     get element() {
         if (!this._input.nativeInputRef?.element) {
@@ -2459,7 +2450,7 @@ class AutosizeTextareaDirective {
         this.element.style.height = `${this.element.scrollHeight}px`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AutosizeTextareaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: AutosizeTextareaDirective, isStandalone: true, selector: "et-textarea-input[etAutosize]", host: { classAttribute: "et-textarea--autosize" }, providers: [DestroyService], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: AutosizeTextareaDirective, isStandalone: true, selector: "et-textarea-input[etAutosize]", host: { classAttribute: "et-textarea--autosize" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AutosizeTextareaDirective, decorators: [{
             type: Directive,
@@ -2469,14 +2460,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     host: {
                         class: 'et-textarea--autosize',
                     },
-                    providers: [DestroyService],
                 }]
         }] });
 
 const EMAIL_INPUT_TOKEN = new InjectionToken('ET_EMAIL_INPUT_DIRECTIVE_TOKEN');
 class EmailInputDirective {
     constructor() {
-        this._destroy$ = inject(DestroyService, { host: true }).destroy$;
+        this._destroy$ = createDestroy();
         this.input = inject(INPUT_TOKEN);
     }
     ngOnInit() {
@@ -2507,21 +2497,21 @@ class EmailInputDirective {
         this.input._setShouldDisplayError(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EmailInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: EmailInputDirective, isStandalone: true, providers: [{ provide: EMAIL_INPUT_TOKEN, useExisting: EmailInputDirective }, DestroyService], exportAs: ["etEmailInput"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: EmailInputDirective, isStandalone: true, providers: [{ provide: EMAIL_INPUT_TOKEN, useExisting: EmailInputDirective }], exportAs: ["etEmailInput"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EmailInputDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     exportAs: 'etEmailInput',
-                    providers: [{ provide: EMAIL_INPUT_TOKEN, useExisting: EmailInputDirective }, DestroyService],
+                    providers: [{ provide: EMAIL_INPUT_TOKEN, useExisting: EmailInputDirective }],
                 }]
         }] });
 
 const NUMBER_INPUT_TOKEN = new InjectionToken('ET_NUMBER_INPUT_DIRECTIVE_TOKEN');
 class NumberInputDirective {
     constructor() {
-        this._destroy$ = inject(DestroyService, { host: true }).destroy$;
+        this._destroy$ = createDestroy();
         this.input = inject(INPUT_TOKEN);
     }
     ngOnInit() {
@@ -2553,21 +2543,21 @@ class NumberInputDirective {
         this.input._setShouldDisplayError(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NumberInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NumberInputDirective, isStandalone: true, providers: [{ provide: NUMBER_INPUT_TOKEN, useExisting: NumberInputDirective }, DestroyService], exportAs: ["etNumberInput"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NumberInputDirective, isStandalone: true, providers: [{ provide: NUMBER_INPUT_TOKEN, useExisting: NumberInputDirective }], exportAs: ["etNumberInput"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NumberInputDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     exportAs: 'etNumberInput',
-                    providers: [{ provide: NUMBER_INPUT_TOKEN, useExisting: NumberInputDirective }, DestroyService],
+                    providers: [{ provide: NUMBER_INPUT_TOKEN, useExisting: NumberInputDirective }],
                 }]
         }] });
 
 const PASSWORD_INPUT_TOKEN = new InjectionToken('ET_PASSWORD_INPUT_DIRECTIVE_TOKEN');
 class PasswordInputDirective {
     constructor() {
-        this._destroy$ = inject(DestroyService, { host: true }).destroy$;
+        this._destroy$ = createDestroy();
         this.input = inject(INPUT_TOKEN);
         this.showPassword$ = new BehaviorSubject(false);
     }
@@ -2602,21 +2592,21 @@ class PasswordInputDirective {
         this.showPassword$.next(!this.showPassword$.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: PasswordInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: PasswordInputDirective, isStandalone: true, providers: [{ provide: PASSWORD_INPUT_TOKEN, useExisting: PasswordInputDirective }, DestroyService], exportAs: ["etPasswordInput"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: PasswordInputDirective, isStandalone: true, providers: [{ provide: PASSWORD_INPUT_TOKEN, useExisting: PasswordInputDirective }], exportAs: ["etPasswordInput"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: PasswordInputDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     exportAs: 'etPasswordInput',
-                    providers: [{ provide: PASSWORD_INPUT_TOKEN, useExisting: PasswordInputDirective }, DestroyService],
+                    providers: [{ provide: PASSWORD_INPUT_TOKEN, useExisting: PasswordInputDirective }],
                 }]
         }] });
 
 const SEARCH_INPUT_TOKEN = new InjectionToken('ET_SEARCH_INPUT_DIRECTIVE_TOKEN');
 class SearchInputDirective {
     constructor() {
-        this._destroy$ = inject(DestroyService, { host: true }).destroy$;
+        this._destroy$ = createDestroy();
         this.input = inject(INPUT_TOKEN);
     }
     ngOnInit() {
@@ -2651,21 +2641,21 @@ class SearchInputDirective {
         this._controlTouched();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SearchInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SearchInputDirective, isStandalone: true, providers: [{ provide: SEARCH_INPUT_TOKEN, useExisting: SearchInputDirective }, DestroyService], exportAs: ["etSearchInput"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SearchInputDirective, isStandalone: true, providers: [{ provide: SEARCH_INPUT_TOKEN, useExisting: SearchInputDirective }], exportAs: ["etSearchInput"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SearchInputDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     exportAs: 'etSearchInput',
-                    providers: [{ provide: SEARCH_INPUT_TOKEN, useExisting: SearchInputDirective }, DestroyService],
+                    providers: [{ provide: SEARCH_INPUT_TOKEN, useExisting: SearchInputDirective }],
                 }]
         }] });
 
 const TEXT_INPUT_TOKEN = new InjectionToken('ET_TEXT_INPUT_DIRECTIVE_TOKEN');
 class TextInputDirective {
     constructor() {
-        this._destroy$ = inject(DestroyService, { host: true }).destroy$;
+        this._destroy$ = createDestroy();
         this.input = inject(INPUT_TOKEN);
     }
     ngOnInit() {
@@ -2696,21 +2686,21 @@ class TextInputDirective {
         this.input._setShouldDisplayError(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: TextInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: TextInputDirective, isStandalone: true, providers: [{ provide: TEXT_INPUT_TOKEN, useExisting: TextInputDirective }, DestroyService], exportAs: ["etTextInput"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: TextInputDirective, isStandalone: true, providers: [{ provide: TEXT_INPUT_TOKEN, useExisting: TextInputDirective }], exportAs: ["etTextInput"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: TextInputDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     exportAs: 'etTextInput',
-                    providers: [{ provide: TEXT_INPUT_TOKEN, useExisting: TextInputDirective }, DestroyService],
+                    providers: [{ provide: TEXT_INPUT_TOKEN, useExisting: TextInputDirective }],
                 }]
         }] });
 
 const TEXTAREA_INPUT_TOKEN = new InjectionToken('ET_TEXTAREA_INPUT_DIRECTIVE_TOKEN');
 class TextareaInputDirective {
     constructor() {
-        this._destroy$ = inject(DestroyService, { host: true }).destroy$;
+        this._destroy$ = createDestroy();
         this.input = inject(INPUT_TOKEN);
     }
     ngOnInit() {
@@ -2741,14 +2731,14 @@ class TextareaInputDirective {
         this.input._setShouldDisplayError(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: TextareaInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: TextareaInputDirective, isStandalone: true, providers: [{ provide: TEXTAREA_INPUT_TOKEN, useExisting: TextareaInputDirective }, DestroyService], exportAs: ["etTextareaInput"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: TextareaInputDirective, isStandalone: true, providers: [{ provide: TEXTAREA_INPUT_TOKEN, useExisting: TextareaInputDirective }], exportAs: ["etTextareaInput"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: TextareaInputDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     exportAs: 'etTextareaInput',
-                    providers: [{ provide: TEXTAREA_INPUT_TOKEN, useExisting: TextareaInputDirective }, DestroyService],
+                    providers: [{ provide: TEXTAREA_INPUT_TOKEN, useExisting: TextareaInputDirective }],
                 }]
         }] });
 
@@ -2758,13 +2748,13 @@ class EmailInputComponent extends DecoratedInputBase {
         this.emailInput = inject(EMAIL_INPUT_TOKEN);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EmailInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: EmailInputComponent, isStandalone: true, selector: "et-email-input", host: { classAttribute: "et-email-input" }, providers: [DestroyService], usesInheritance: true, hostDirectives: [{ directive: EmailInputDirective }, { directive: InputDirective, inputs: ["autocomplete", "autocomplete", "placeholder", "placeholder"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"emailInput._onInputInteraction($event)\"\n  (blur)=\"emailInput._controlTouched()\"\n  class=\"et-input-native-control et-email-input-native-control\"\n  type=\"email\"\n  etNativeInputRef\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: EmailInputComponent, isStandalone: true, selector: "et-email-input", host: { classAttribute: "et-email-input" }, usesInheritance: true, hostDirectives: [{ directive: EmailInputDirective }, { directive: InputDirective, inputs: ["autocomplete", "autocomplete", "placeholder", "placeholder"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"emailInput._onInputInteraction($event)\"\n  (blur)=\"emailInput._controlTouched()\"\n  class=\"et-input-native-control et-email-input-native-control\"\n  type=\"email\"\n  etNativeInputRef\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EmailInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-email-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'et-email-input',
-                    }, providers: [DestroyService], imports: [AsyncPipe, NativeInputRefDirective], hostDirectives: [EmailInputDirective, { directive: InputDirective, inputs: ['autocomplete', 'placeholder'] }], template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"emailInput._onInputInteraction($event)\"\n  (blur)=\"emailInput._controlTouched()\"\n  class=\"et-input-native-control et-email-input-native-control\"\n  type=\"email\"\n  etNativeInputRef\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n" }]
+                    }, imports: [AsyncPipe, NativeInputRefDirective], hostDirectives: [EmailInputDirective, { directive: InputDirective, inputs: ['autocomplete', 'placeholder'] }], template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"emailInput._onInputInteraction($event)\"\n  (blur)=\"emailInput._controlTouched()\"\n  class=\"et-input-native-control et-email-input-native-control\"\n  type=\"email\"\n  etNativeInputRef\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n" }]
         }] });
 
 class InputFieldComponent extends DecoratedFormFieldBase {
@@ -2820,13 +2810,13 @@ class NumberInputComponent extends DecoratedInputBase {
         this.numberInput = inject(NUMBER_INPUT_TOKEN);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NumberInputComponent, isStandalone: true, selector: "et-number-input", host: { classAttribute: "et-number-input" }, providers: [DestroyService], usesInheritance: true, hostDirectives: [{ directive: NumberInputDirective }, { directive: InputDirective, inputs: ["autocomplete", "autocomplete", "placeholder", "placeholder"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"numberInput._onInputInteraction($event)\"\n  (blur)=\"numberInput._controlTouched()\"\n  class=\"et-input-native-control et-number-input-native-control\"\n  type=\"number\"\n  etNativeInputRef\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NumberInputComponent, isStandalone: true, selector: "et-number-input", host: { classAttribute: "et-number-input" }, usesInheritance: true, hostDirectives: [{ directive: NumberInputDirective }, { directive: InputDirective, inputs: ["autocomplete", "autocomplete", "placeholder", "placeholder"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"numberInput._onInputInteraction($event)\"\n  (blur)=\"numberInput._controlTouched()\"\n  class=\"et-input-native-control et-number-input-native-control\"\n  type=\"number\"\n  etNativeInputRef\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NumberInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-number-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'et-number-input',
-                    }, providers: [DestroyService], imports: [AsyncPipe, NativeInputRefDirective], hostDirectives: [NumberInputDirective, { directive: InputDirective, inputs: ['autocomplete', 'placeholder'] }], template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"numberInput._onInputInteraction($event)\"\n  (blur)=\"numberInput._controlTouched()\"\n  class=\"et-input-native-control et-number-input-native-control\"\n  type=\"number\"\n  etNativeInputRef\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n" }]
+                    }, imports: [AsyncPipe, NativeInputRefDirective], hostDirectives: [NumberInputDirective, { directive: InputDirective, inputs: ['autocomplete', 'placeholder'] }], template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"numberInput._onInputInteraction($event)\"\n  (blur)=\"numberInput._controlTouched()\"\n  class=\"et-input-native-control et-number-input-native-control\"\n  type=\"number\"\n  etNativeInputRef\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n" }]
         }] });
 
 class PasswordInputComponent extends DecoratedInputBase {
@@ -2835,13 +2825,13 @@ class PasswordInputComponent extends DecoratedInputBase {
         this.passwordInput = inject(PASSWORD_INPUT_TOKEN);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: PasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: PasswordInputComponent, isStandalone: true, selector: "et-password-input", host: { classAttribute: "et-password-input" }, providers: [DestroyService], usesInheritance: true, hostDirectives: [{ directive: PasswordInputDirective }, { directive: InputDirective, inputs: ["autocomplete", "autocomplete", "placeholder", "placeholder"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.type]=\"(passwordInput.showPassword$ | async) ? 'text' : 'password'\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"passwordInput._onInputInteraction($event)\"\n  (blur)=\"passwordInput._controlTouched()\"\n  class=\"et-input-native-control et-password-input-native-control\"\n  etNativeInputRef\n  spellcheck=\"false\"\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: PasswordInputComponent, isStandalone: true, selector: "et-password-input", host: { classAttribute: "et-password-input" }, usesInheritance: true, hostDirectives: [{ directive: PasswordInputDirective }, { directive: InputDirective, inputs: ["autocomplete", "autocomplete", "placeholder", "placeholder"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.type]=\"(passwordInput.showPassword$ | async) ? 'text' : 'password'\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"passwordInput._onInputInteraction($event)\"\n  (blur)=\"passwordInput._controlTouched()\"\n  class=\"et-input-native-control et-password-input-native-control\"\n  etNativeInputRef\n  spellcheck=\"false\"\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: PasswordInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-password-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'et-password-input',
-                    }, providers: [DestroyService], imports: [AsyncPipe, NativeInputRefDirective], hostDirectives: [PasswordInputDirective, { directive: InputDirective, inputs: ['autocomplete', 'placeholder'] }], template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.type]=\"(passwordInput.showPassword$ | async) ? 'text' : 'password'\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"passwordInput._onInputInteraction($event)\"\n  (blur)=\"passwordInput._controlTouched()\"\n  class=\"et-input-native-control et-password-input-native-control\"\n  etNativeInputRef\n  spellcheck=\"false\"\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n" }]
+                    }, imports: [AsyncPipe, NativeInputRefDirective], hostDirectives: [PasswordInputDirective, { directive: InputDirective, inputs: ['autocomplete', 'placeholder'] }], template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.type]=\"(passwordInput.showPassword$ | async) ? 'text' : 'password'\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"passwordInput._onInputInteraction($event)\"\n  (blur)=\"passwordInput._controlTouched()\"\n  class=\"et-input-native-control et-password-input-native-control\"\n  etNativeInputRef\n  spellcheck=\"false\"\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n" }]
         }] });
 
 class SearchInputComponent extends DecoratedInputBase {
@@ -2850,13 +2840,13 @@ class SearchInputComponent extends DecoratedInputBase {
         this.searchInput = inject(SEARCH_INPUT_TOKEN);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SearchInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SearchInputComponent, isStandalone: true, selector: "et-search-input", host: { classAttribute: "et-search-input" }, providers: [DestroyService], usesInheritance: true, hostDirectives: [{ directive: SearchInputDirective }, { directive: InputDirective, inputs: ["autocomplete", "autocomplete", "placeholder", "placeholder"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"searchInput._onInputInteraction($event)\"\n  (blur)=\"searchInput._controlTouched()\"\n  (keyup.escape)=\"searchInput._clear()\"\n  class=\"et-input-native-control et-search-input-native-control\"\n  type=\"search\"\n  etNativeInputRef\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n", styles: [".et-search-input input[type=search]::-webkit-search-cancel-button,.et-search-input input[type=search]::-webkit-search-decoration{-webkit-appearance:none}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SearchInputComponent, isStandalone: true, selector: "et-search-input", host: { classAttribute: "et-search-input" }, usesInheritance: true, hostDirectives: [{ directive: SearchInputDirective }, { directive: InputDirective, inputs: ["autocomplete", "autocomplete", "placeholder", "placeholder"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"searchInput._onInputInteraction($event)\"\n  (blur)=\"searchInput._controlTouched()\"\n  (keyup.escape)=\"searchInput._clear()\"\n  class=\"et-input-native-control et-search-input-native-control\"\n  type=\"search\"\n  etNativeInputRef\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n", styles: [".et-search-input input[type=search]::-webkit-search-cancel-button,.et-search-input input[type=search]::-webkit-search-decoration{-webkit-appearance:none}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SearchInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-search-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'et-search-input',
-                    }, providers: [DestroyService], imports: [AsyncPipe, NativeInputRefDirective], hostDirectives: [SearchInputDirective, { directive: InputDirective, inputs: ['autocomplete', 'placeholder'] }], template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"searchInput._onInputInteraction($event)\"\n  (blur)=\"searchInput._controlTouched()\"\n  (keyup.escape)=\"searchInput._clear()\"\n  class=\"et-input-native-control et-search-input-native-control\"\n  type=\"search\"\n  etNativeInputRef\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n", styles: [".et-search-input input[type=search]::-webkit-search-cancel-button,.et-search-input input[type=search]::-webkit-search-decoration{-webkit-appearance:none}\n"] }]
+                    }, imports: [AsyncPipe, NativeInputRefDirective], hostDirectives: [SearchInputDirective, { directive: InputDirective, inputs: ['autocomplete', 'placeholder'] }], template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"searchInput._onInputInteraction($event)\"\n  (blur)=\"searchInput._controlTouched()\"\n  (keyup.escape)=\"searchInput._clear()\"\n  class=\"et-input-native-control et-search-input-native-control\"\n  type=\"search\"\n  etNativeInputRef\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n", styles: [".et-search-input input[type=search]::-webkit-search-cancel-button,.et-search-input input[type=search]::-webkit-search-decoration{-webkit-appearance:none}\n"] }]
         }] });
 
 class TextInputComponent extends DecoratedInputBase {
@@ -2865,13 +2855,13 @@ class TextInputComponent extends DecoratedInputBase {
         this.textInput = inject(TEXT_INPUT_TOKEN);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: TextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: TextInputComponent, isStandalone: true, selector: "et-text-input", host: { classAttribute: "et-text-input" }, providers: [DestroyService], usesInheritance: true, hostDirectives: [{ directive: TextInputDirective }, { directive: InputDirective, inputs: ["autocomplete", "autocomplete", "placeholder", "placeholder"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"textInput._onInputInteraction($event)\"\n  (blur)=\"textInput._controlTouched()\"\n  class=\"et-input-native-control et-text-input-native-control\"\n  type=\"text\"\n  etNativeInputRef\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: TextInputComponent, isStandalone: true, selector: "et-text-input", host: { classAttribute: "et-text-input" }, usesInheritance: true, hostDirectives: [{ directive: TextInputDirective }, { directive: InputDirective, inputs: ["autocomplete", "autocomplete", "placeholder", "placeholder"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"textInput._onInputInteraction($event)\"\n  (blur)=\"textInput._controlTouched()\"\n  class=\"et-input-native-control et-text-input-native-control\"\n  type=\"text\"\n  etNativeInputRef\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-text-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'et-text-input',
-                    }, providers: [DestroyService], imports: [AsyncPipe, NativeInputRefDirective], hostDirectives: [TextInputDirective, { directive: InputDirective, inputs: ['autocomplete', 'placeholder'] }], template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"textInput._onInputInteraction($event)\"\n  (blur)=\"textInput._controlTouched()\"\n  class=\"et-input-native-control et-text-input-native-control\"\n  type=\"text\"\n  etNativeInputRef\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n" }]
+                    }, imports: [AsyncPipe, NativeInputRefDirective], hostDirectives: [TextInputDirective, { directive: InputDirective, inputs: ['autocomplete', 'placeholder'] }], template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"textInput._onInputInteraction($event)\"\n  (blur)=\"textInput._controlTouched()\"\n  class=\"et-input-native-control et-text-input-native-control\"\n  type=\"text\"\n  etNativeInputRef\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n" }]
         }] });
 
 class TextareaInputComponent extends DecoratedInputBase {
@@ -2894,13 +2884,13 @@ class TextareaInputComponent extends DecoratedInputBase {
         this._rows = coerceNumberProperty(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: TextareaInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: TextareaInputComponent, isStandalone: true, selector: "et-textarea-input", inputs: { cols: "cols", rows: "rows" }, host: { classAttribute: "et-textarea-input" }, providers: [DestroyService], usesInheritance: true, hostDirectives: [{ directive: TextareaInputDirective }, { directive: InputDirective, inputs: ["autocomplete", "autocomplete", "placeholder", "placeholder"] }], ngImport: i0, template: "<textarea\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  [cols]=\"cols\"\n  [rows]=\"rows\"\n  (input)=\"textareaInput._onInputInteraction($event)\"\n  (blur)=\"textareaInput._controlTouched()\"\n  class=\"et-input-native-control et-textarea-input-native-control\"\n  etNativeInputRef\n></textarea>\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: TextareaInputComponent, isStandalone: true, selector: "et-textarea-input", inputs: { cols: "cols", rows: "rows" }, host: { classAttribute: "et-textarea-input" }, usesInheritance: true, hostDirectives: [{ directive: TextareaInputDirective }, { directive: InputDirective, inputs: ["autocomplete", "autocomplete", "placeholder", "placeholder"] }], ngImport: i0, template: "<textarea\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  [cols]=\"cols\"\n  [rows]=\"rows\"\n  (input)=\"textareaInput._onInputInteraction($event)\"\n  (blur)=\"textareaInput._controlTouched()\"\n  class=\"et-input-native-control et-textarea-input-native-control\"\n  etNativeInputRef\n></textarea>\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: TextareaInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-textarea-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'et-textarea-input',
-                    }, providers: [DestroyService], imports: [AsyncPipe, NativeInputRefDirective], hostDirectives: [TextareaInputDirective, { directive: InputDirective, inputs: ['autocomplete', 'placeholder'] }], template: "<textarea\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  [cols]=\"cols\"\n  [rows]=\"rows\"\n  (input)=\"textareaInput._onInputInteraction($event)\"\n  (blur)=\"textareaInput._controlTouched()\"\n  class=\"et-input-native-control et-textarea-input-native-control\"\n  etNativeInputRef\n></textarea>\n" }]
+                    }, imports: [AsyncPipe, NativeInputRefDirective], hostDirectives: [TextareaInputDirective, { directive: InputDirective, inputs: ['autocomplete', 'placeholder'] }], template: "<textarea\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  [cols]=\"cols\"\n  [rows]=\"rows\"\n  (input)=\"textareaInput._onInputInteraction($event)\"\n  (blur)=\"textareaInput._controlTouched()\"\n  class=\"et-input-native-control et-textarea-input-native-control\"\n  etNativeInputRef\n></textarea>\n" }]
         }], propDecorators: { cols: [{
                 type: Input
             }], rows: [{
@@ -3000,13 +2990,13 @@ class RadioDirective {
         this.input._setShouldDisplayError(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: RadioDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: RadioDirective, isStandalone: true, inputs: { value: "value", disabled: "disabled" }, providers: [{ provide: RADIO_TOKEN, useExisting: RadioDirective }, DestroyService], exportAs: ["etRadio"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: RadioDirective, isStandalone: true, inputs: { value: "value", disabled: "disabled" }, providers: [{ provide: RADIO_TOKEN, useExisting: RadioDirective }], exportAs: ["etRadio"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: RadioDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
-                    providers: [{ provide: RADIO_TOKEN, useExisting: RadioDirective }, DestroyService],
+                    providers: [{ provide: RADIO_TOKEN, useExisting: RadioDirective }],
                     exportAs: 'etRadio',
                 }]
         }], propDecorators: { value: [{
@@ -3035,13 +3025,13 @@ class RadioFieldDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: RadioFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: RadioFieldDirective, isStandalone: true, providers: [{ provide: RADIO_FIELD_TOKEN, useExisting: RadioFieldDirective }, DestroyService], queries: [{ propertyName: "_radio", predicate: i0.forwardRef(function () { return RADIO_TOKEN; }), descendants: true }], exportAs: ["etRadioField"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: RadioFieldDirective, isStandalone: true, providers: [{ provide: RADIO_FIELD_TOKEN, useExisting: RadioFieldDirective }], queries: [{ propertyName: "_radio", predicate: i0.forwardRef(function () { return RADIO_TOKEN; }), descendants: true }], exportAs: ["etRadioField"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: RadioFieldDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
-                    providers: [{ provide: RADIO_FIELD_TOKEN, useExisting: RadioFieldDirective }, DestroyService],
+                    providers: [{ provide: RADIO_FIELD_TOKEN, useExisting: RadioFieldDirective }],
                     exportAs: 'etRadioField',
                 }]
         }], propDecorators: { _radio: [{
@@ -3066,13 +3056,13 @@ class RadioGroupDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: RadioGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: RadioGroupDirective, isStandalone: true, host: { attributes: { "role": "radiogroup" } }, providers: [{ provide: RADIO_GROUP_TOKEN, useExisting: RadioGroupDirective }, DestroyService], exportAs: ["etRadioGroup"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: RadioGroupDirective, isStandalone: true, host: { attributes: { "role": "radiogroup" } }, providers: [{ provide: RADIO_GROUP_TOKEN, useExisting: RadioGroupDirective }], exportAs: ["etRadioGroup"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: RadioGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
-                    providers: [{ provide: RADIO_GROUP_TOKEN, useExisting: RadioGroupDirective }, DestroyService],
+                    providers: [{ provide: RADIO_GROUP_TOKEN, useExisting: RadioGroupDirective }],
                     exportAs: 'etRadioGroup',
                     host: {
                         role: 'radiogroup',
@@ -3214,13 +3204,13 @@ class SegmentedButtonDirective {
         this.input._setShouldDisplayError(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SegmentedButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SegmentedButtonDirective, isStandalone: true, inputs: { value: "value", disabled: "disabled" }, providers: [{ provide: SEGMENTED_BUTTON_TOKEN, useExisting: SegmentedButtonDirective }, DestroyService], exportAs: ["etSegmentedButton"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SegmentedButtonDirective, isStandalone: true, inputs: { value: "value", disabled: "disabled" }, providers: [{ provide: SEGMENTED_BUTTON_TOKEN, useExisting: SegmentedButtonDirective }], exportAs: ["etSegmentedButton"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SegmentedButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
-                    providers: [{ provide: SEGMENTED_BUTTON_TOKEN, useExisting: SegmentedButtonDirective }, DestroyService],
+                    providers: [{ provide: SEGMENTED_BUTTON_TOKEN, useExisting: SegmentedButtonDirective }],
                     exportAs: 'etSegmentedButton',
                 }]
         }], propDecorators: { value: [{
@@ -3249,13 +3239,13 @@ class SegmentedButtonFieldDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SegmentedButtonFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SegmentedButtonFieldDirective, isStandalone: true, providers: [{ provide: SEGMENTED_BUTTON_FIELD_TOKEN, useExisting: SegmentedButtonFieldDirective }, DestroyService], queries: [{ propertyName: "_segmentedButton", predicate: i0.forwardRef(function () { return SEGMENTED_BUTTON_TOKEN; }), descendants: true }], exportAs: ["etSegmentedButtonField"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SegmentedButtonFieldDirective, isStandalone: true, providers: [{ provide: SEGMENTED_BUTTON_FIELD_TOKEN, useExisting: SegmentedButtonFieldDirective }], queries: [{ propertyName: "_segmentedButton", predicate: i0.forwardRef(function () { return SEGMENTED_BUTTON_TOKEN; }), descendants: true }], exportAs: ["etSegmentedButtonField"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SegmentedButtonFieldDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
-                    providers: [{ provide: SEGMENTED_BUTTON_FIELD_TOKEN, useExisting: SegmentedButtonFieldDirective }, DestroyService],
+                    providers: [{ provide: SEGMENTED_BUTTON_FIELD_TOKEN, useExisting: SegmentedButtonFieldDirective }],
                     exportAs: 'etSegmentedButtonField',
                 }]
         }], propDecorators: { _segmentedButton: [{
@@ -3269,7 +3259,7 @@ class SegmentedButtonGroupDirective {
     constructor() {
         this._formGroupStateService = inject(FormGroupStateService);
         this._inputStateService = inject(InputStateService);
-        this._destroy$ = inject(DestroyService, { host: true }).destroy$;
+        this._destroy$ = createDestroy();
         this.name = `et-segmented-button-group-${++nextUniqueId$3}`;
         this._bindings = createReactiveBindings({
             attribute: 'aria-labelledby',
@@ -3308,13 +3298,13 @@ class SegmentedButtonGroupDirective {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SegmentedButtonGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SegmentedButtonGroupDirective, isStandalone: true, host: { attributes: { "role": "group" } }, providers: [{ provide: SEGMENTED_BUTTON_GROUP_TOKEN, useExisting: SegmentedButtonGroupDirective }, DestroyService], queries: [{ propertyName: "_segmentedButtons", predicate: i0.forwardRef(function () { return SEGMENTED_BUTTON_TOKEN; }), descendants: true }], exportAs: ["etSegmentedButtonGroup"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SegmentedButtonGroupDirective, isStandalone: true, host: { attributes: { "role": "group" } }, providers: [{ provide: SEGMENTED_BUTTON_GROUP_TOKEN, useExisting: SegmentedButtonGroupDirective }], queries: [{ propertyName: "_segmentedButtons", predicate: i0.forwardRef(function () { return SEGMENTED_BUTTON_TOKEN; }), descendants: true }], exportAs: ["etSegmentedButtonGroup"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SegmentedButtonGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
-                    providers: [{ provide: SEGMENTED_BUTTON_GROUP_TOKEN, useExisting: SegmentedButtonGroupDirective }, DestroyService],
+                    providers: [{ provide: SEGMENTED_BUTTON_GROUP_TOKEN, useExisting: SegmentedButtonGroupDirective }],
                     exportAs: 'etSegmentedButtonGroup',
                     host: {
                         role: 'group',
@@ -3466,7 +3456,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
 const NATIVE_SELECT_INPUT_TOKEN = new InjectionToken('ET_NATIVE_SELECT_INPUT_DIRECTIVE_TOKEN');
 class NativeSelectInputDirective {
     constructor() {
-        this._destroy$ = inject(DestroyService, { host: true }).destroy$;
+        this._destroy$ = createDestroy();
         this.input = inject(INPUT_TOKEN);
         this._trackByFn = (index, option) => option.key ?? option.value;
     }
@@ -3501,14 +3491,14 @@ class NativeSelectInputDirective {
         this.input._setShouldDisplayError(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NativeSelectInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NativeSelectInputDirective, isStandalone: true, providers: [{ provide: NATIVE_SELECT_INPUT_TOKEN, useExisting: NativeSelectInputDirective }, DestroyService], queries: [{ propertyName: "options", predicate: NATIVE_SELECT_OPTION_TOKEN, descendants: true }], exportAs: ["etNativeSelectInput"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NativeSelectInputDirective, isStandalone: true, providers: [{ provide: NATIVE_SELECT_INPUT_TOKEN, useExisting: NativeSelectInputDirective }], queries: [{ propertyName: "options", predicate: NATIVE_SELECT_OPTION_TOKEN, descendants: true }], exportAs: ["etNativeSelectInput"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NativeSelectInputDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     exportAs: 'etNativeSelectInput',
-                    providers: [{ provide: NATIVE_SELECT_INPUT_TOKEN, useExisting: NativeSelectInputDirective }, DestroyService],
+                    providers: [{ provide: NATIVE_SELECT_INPUT_TOKEN, useExisting: NativeSelectInputDirective }],
                 }]
         }], propDecorators: { options: [{
                 type: ContentChildren,
@@ -3521,13 +3511,13 @@ class NativeSelectInputComponent extends DecoratedInputBase {
         this.select = inject(NATIVE_SELECT_INPUT_TOKEN);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NativeSelectInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NativeSelectInputComponent, isStandalone: true, selector: "et-native-select", host: { classAttribute: "et-native-select" }, providers: [DestroyService], usesInheritance: true, hostDirectives: [{ directive: NativeSelectInputDirective }, { directive: InputDirective, inputs: ["autocomplete", "autocomplete"] }], ngImport: i0, template: "<ng-template>\n  <ng-content select=\"et-native-select-option\" />\n</ng-template>\n\n<ng-content select=\"[etInputPrefix]\" />\n\n<select\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"select._onInputInteraction($event)\"\n  (blur)=\"select._controlTouched()\"\n  class=\"et-native-select-native-input\"\n  etNativeInputRef\n>\n  <option\n    *ngFor=\"let option of select.options; trackBy: select._trackByFn\"\n    [value]=\"option.value\"\n    [disabled]=\"option.disabled\"\n    [attr.selected]=\"option.value === input.value ? '' : null\"\n    [attr.hidden]=\"option.hidden ? '' : null\"\n    class=\"et-native-select-native-option\"\n  >\n    <ng-container *ngTemplateOutlet=\"option.textTemplate$ | async\" />\n  </option>\n</select>\n\n<ng-content select=\"[etInputSuffix]\" />\n", dependencies: [{ kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NativeSelectInputComponent, isStandalone: true, selector: "et-native-select", host: { classAttribute: "et-native-select" }, usesInheritance: true, hostDirectives: [{ directive: NativeSelectInputDirective }, { directive: InputDirective, inputs: ["autocomplete", "autocomplete"] }], ngImport: i0, template: "<ng-template>\n  <ng-content select=\"et-native-select-option\" />\n</ng-template>\n\n<ng-content select=\"[etInputPrefix]\" />\n\n<select\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"select._onInputInteraction($event)\"\n  (blur)=\"select._controlTouched()\"\n  class=\"et-native-select-native-input\"\n  etNativeInputRef\n>\n  <option\n    *ngFor=\"let option of select.options; trackBy: select._trackByFn\"\n    [value]=\"option.value\"\n    [disabled]=\"option.disabled\"\n    [attr.selected]=\"option.value === input.value ? '' : null\"\n    [attr.hidden]=\"option.hidden ? '' : null\"\n    class=\"et-native-select-native-option\"\n  >\n    <ng-container *ngTemplateOutlet=\"option.textTemplate$ | async\" />\n  </option>\n</select>\n\n<ng-content select=\"[etInputSuffix]\" />\n", dependencies: [{ kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NativeSelectInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-native-select', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'et-native-select',
-                    }, providers: [DestroyService], imports: [NativeInputRefDirective, NgForOf, NgTemplateOutlet, AsyncPipe], hostDirectives: [NativeSelectInputDirective, { directive: InputDirective, inputs: ['autocomplete'] }], template: "<ng-template>\n  <ng-content select=\"et-native-select-option\" />\n</ng-template>\n\n<ng-content select=\"[etInputPrefix]\" />\n\n<select\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"select._onInputInteraction($event)\"\n  (blur)=\"select._controlTouched()\"\n  class=\"et-native-select-native-input\"\n  etNativeInputRef\n>\n  <option\n    *ngFor=\"let option of select.options; trackBy: select._trackByFn\"\n    [value]=\"option.value\"\n    [disabled]=\"option.disabled\"\n    [attr.selected]=\"option.value === input.value ? '' : null\"\n    [attr.hidden]=\"option.hidden ? '' : null\"\n    class=\"et-native-select-native-option\"\n  >\n    <ng-container *ngTemplateOutlet=\"option.textTemplate$ | async\" />\n  </option>\n</select>\n\n<ng-content select=\"[etInputSuffix]\" />\n" }]
+                    }, imports: [NativeInputRefDirective, NgForOf, NgTemplateOutlet, AsyncPipe], hostDirectives: [NativeSelectInputDirective, { directive: InputDirective, inputs: ['autocomplete'] }], template: "<ng-template>\n  <ng-content select=\"et-native-select-option\" />\n</ng-template>\n\n<ng-content select=\"[etInputPrefix]\" />\n\n<select\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"select._onInputInteraction($event)\"\n  (blur)=\"select._controlTouched()\"\n  class=\"et-native-select-native-input\"\n  etNativeInputRef\n>\n  <option\n    *ngFor=\"let option of select.options; trackBy: select._trackByFn\"\n    [value]=\"option.value\"\n    [disabled]=\"option.disabled\"\n    [attr.selected]=\"option.value === input.value ? '' : null\"\n    [attr.hidden]=\"option.hidden ? '' : null\"\n    class=\"et-native-select-native-option\"\n  >\n    <ng-container *ngTemplateOutlet=\"option.textTemplate$ | async\" />\n  </option>\n</select>\n\n<ng-content select=\"[etInputSuffix]\" />\n" }]
         }] });
 
 class SelectFieldComponent extends DecoratedFormFieldBase {
@@ -3612,52 +3602,19 @@ const NativeSelectImports = [
     LabelComponent,
 ];
 
-class SelectComponent extends DecoratedInputBase {
-    constructor() {
-        super(...arguments);
-        this._searchable$ = new BehaviorSubject(false);
-        this.selectBodyTpl = null;
-    }
-    get searchable() {
-        return this._searchable$.value;
-    }
-    set searchable(value) {
-        this._searchable$.next(coerceBooleanProperty(value));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SelectComponent, isStandalone: true, selector: "et-select", inputs: { searchable: "searchable" }, host: { classAttribute: "et-select" }, providers: [DestroyService], viewQueries: [{ propertyName: "selectBodyTpl", first: true, predicate: ["selectBodyTpl"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: InputDirective, inputs: ["autocomplete", "autocomplete"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<div></div>\n\n<div *ngIf=\"searchable; then searchInput; else noInput\" class=\"et-select-wrapper\"></div>\n<ng-template #searchInput>\n  <input\n    [attr.id]=\"input.id\"\n    [attr.aria-labelledby]=\"input.labelId$ | async\"\n    [attr.aria-describedby]=\"input.describedBy$ | async\"\n    [attr.autocomplete]=\"input.autocomplete || null\"\n    [attr.tabindex]=\"(input.disabled$ | async) ? -1 : 0\"\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    type=\"text\"\n    role=\"combobox\"\n    aria-controls=\"joketypes\"\n    aria-autocomplete=\"list\"\n    aria-expanded=\"false\"\n    data-active-option=\"item1\"\n    aria-activedescendant=\"\"\n    aria-haspopup=\"listbox\"\n    etNativeInputRef\n  />\n</ng-template>\n<ng-template #noInput>\n  <div\n    [attr.id]=\"input.id\"\n    [attr.aria-labelledby]=\"input.labelId$ | async\"\n    [attr.aria-describedby]=\"input.describedBy$ | async\"\n    [attr.tabindex]=\"(input.disabled$ | async) ? -1 : 0\"\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    role=\"combobox\"\n    aria-controls=\"joketypes\"\n    aria-autocomplete=\"list\"\n    aria-expanded=\"false\"\n    data-active-option=\"item1\"\n    aria-activedescendant=\"\"\n    aria-haspopup=\"listbox\"\n  ></div>\n</ng-template>\n\n<ng-content select=\"[etInputSuffix]\" />\n\n<ng-template #selectBodyTpl>\n  <ng-content />\n</ng-template>\n", styles: [""], 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'et-select', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'et-select',
-                    }, providers: [DestroyService], imports: [NgIf, NativeInputRefDirective, AsyncPipe], hostDirectives: [{ directive: InputDirective, inputs: ['autocomplete'] }], template: "<ng-content select=\"[etInputPrefix]\" />\n\n<div></div>\n\n<div *ngIf=\"searchable; then searchInput; else noInput\" class=\"et-select-wrapper\"></div>\n<ng-template #searchInput>\n  <input\n    [attr.id]=\"input.id\"\n    [attr.aria-labelledby]=\"input.labelId$ | async\"\n    [attr.aria-describedby]=\"input.describedBy$ | async\"\n    [attr.autocomplete]=\"input.autocomplete || null\"\n    [attr.tabindex]=\"(input.disabled$ | async) ? -1 : 0\"\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    type=\"text\"\n    role=\"combobox\"\n    aria-controls=\"joketypes\"\n    aria-autocomplete=\"list\"\n    aria-expanded=\"false\"\n    data-active-option=\"item1\"\n    aria-activedescendant=\"\"\n    aria-haspopup=\"listbox\"\n    etNativeInputRef\n  />\n</ng-template>\n<ng-template #noInput>\n  <div\n    [attr.id]=\"input.id\"\n    [attr.aria-labelledby]=\"input.labelId$ | async\"\n    [attr.aria-describedby]=\"input.describedBy$ | async\"\n    [attr.tabindex]=\"(input.disabled$ | async) ? -1 : 0\"\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    role=\"combobox\"\n    aria-controls=\"joketypes\"\n    aria-autocomplete=\"list\"\n    aria-expanded=\"false\"\n    data-active-option=\"item1\"\n    aria-activedescendant=\"\"\n    aria-haspopup=\"listbox\"\n  ></div>\n</ng-template>\n\n<ng-content select=\"[etInputSuffix]\" />\n\n<ng-template #selectBodyTpl>\n  <ng-content />\n</ng-template>\n" }]
-        }], propDecorators: { searchable: [{
-                type: Input
-            }], selectBodyTpl: [{
-                type: ViewChild,
-                args: ['selectBodyTpl']
-            }] } });
-
 class SelectBodyComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SelectBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SelectBodyComponent, isStandalone: true, selector: "et-select-body", host: { classAttribute: "et-select-body" }, ngImport: i0, template: ` <h1>body</h1> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", 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 }], ngImport: i0, template: `<div class="et-select-body-container" etAnimatedLifecycle><h1>body</h1></div>`, isInline: true, 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}.et-select-body.et-with-default-animation .et-select-body-container.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}.et-select-body.et-with-default-animation .et-select-body-container.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-select-body.et-with-default-animation[data-popper-placement^=top] .et-select-body-container.et-animation-enter-from,.et-select-body.et-with-default-animation[data-popper-placement^=top] .et-select-body-container.et-animation-leave-to{transform:translateY(5px)}.et-select-body.et-with-default-animation[data-popper-placement^=right] .et-select-body-container.et-animation-enter-from,.et-select-body.et-with-default-animation[data-popper-placement^=right] .et-select-body-container.et-animation-leave-to{transform:translate(-5px)}.et-select-body.et-with-default-animation[data-popper-placement^=bottom] .et-select-body-container.et-animation-enter-from,.et-select-body.et-with-default-animation[data-popper-placement^=bottom] .et-select-body-container.et-animation-leave-to{transform:translateY(-5px)}.et-select-body.et-with-default-animation[data-popper-placement^=left] .et-select-body-container.et-animation-enter-from,.et-select-body.et-with-default-animation[data-popper-placement^=left] .et-select-body-container.et-animation-leave-to{transform:translate(5px)}.et-select-body-container{display:block;background-color:#3d3d3d;color:#fff}.et-select-body-container h1{margin:0}\n"], dependencies: [{ kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", exportAs: ["etAnimatedLifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SelectBodyComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'et-select-body',
-                    template: ` <h1>body</h1> `,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: {
-                        class: 'et-select-body',
-                    },
-                    imports: [],
-                    hostDirectives: [],
-                }]
-        }] });
+            args: [{ selector: 'et-select-body', template: `<div class="et-select-body-container" etAnimatedLifecycle><h1>body</h1></div>`, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'et-select-body et-with-default-animation',
+                    }, imports: [AnimatedLifecycleDirective], hostDirectives: [], 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}.et-select-body.et-with-default-animation .et-select-body-container.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}.et-select-body.et-with-default-animation .et-select-body-container.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-select-body.et-with-default-animation[data-popper-placement^=top] .et-select-body-container.et-animation-enter-from,.et-select-body.et-with-default-animation[data-popper-placement^=top] .et-select-body-container.et-animation-leave-to{transform:translateY(5px)}.et-select-body.et-with-default-animation[data-popper-placement^=right] .et-select-body-container.et-animation-enter-from,.et-select-body.et-with-default-animation[data-popper-placement^=right] .et-select-body-container.et-animation-leave-to{transform:translate(-5px)}.et-select-body.et-with-default-animation[data-popper-placement^=bottom] .et-select-body-container.et-animation-enter-from,.et-select-body.et-with-default-animation[data-popper-placement^=bottom] .et-select-body-container.et-animation-leave-to{transform:translateY(-5px)}.et-select-body.et-with-default-animation[data-popper-placement^=left] .et-select-body-container.et-animation-enter-from,.et-select-body.et-with-default-animation[data-popper-placement^=left] .et-select-body-container.et-animation-leave-to{transform:translate(5px)}.et-select-body-container{display:block;background-color:#3d3d3d;color:#fff}.et-select-body-container h1{margin:0}\n"] }]
+        }], propDecorators: { _animatedLifecycle: [{
+                type: ViewChild,
+                args: [ANIMATED_LIFECYCLE_TOKEN, { static: true }]
+            }] } });
 
 class SelectOptionComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -3699,6 +3656,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 }]
         }] });
 
+class SelectComponent extends DecoratedInputBase {
+    get searchable() {
+        return this._searchable$.value;
+    }
+    set searchable(value) {
+        this._searchable$.next(coerceBooleanProperty(value));
+    }
+    constructor() {
+        super();
+        this._animatedOverlay = inject(AnimatedOverlayDirective);
+        this._searchable$ = new BehaviorSubject(false);
+        this.selectBodyTpl = null;
+        this._animatedOverlay.placement = 'bottom';
+    }
+    mountOrUnmountSelectBody() {
+        if (!this._animatedOverlay.isMounted) {
+            this._animatedOverlay.mount({ component: SelectBodyComponent });
+        }
+        else {
+            this._animatedOverlay.unmount();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SelectComponent, isStandalone: true, selector: "et-select", inputs: { searchable: "searchable" }, host: { classAttribute: "et-select" }, viewQueries: [{ propertyName: "selectBodyTpl", first: true, predicate: ["selectBodyTpl"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: InputDirective, inputs: ["autocomplete", "autocomplete"] }, { directive: i2.AnimatedOverlayDirective }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<div></div>\n\n<div *ngIf=\"searchable; then searchInput; else noInput\" class=\"et-select-wrapper\"></div>\n<ng-template #searchInput>\n  <input\n    [attr.id]=\"input.id\"\n    [attr.aria-labelledby]=\"input.labelId$ | async\"\n    [attr.aria-describedby]=\"input.describedBy$ | async\"\n    [attr.autocomplete]=\"input.autocomplete || null\"\n    [attr.tabindex]=\"(input.disabled$ | async) ? -1 : 0\"\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    type=\"text\"\n    role=\"combobox\"\n    aria-controls=\"joketypes\"\n    aria-autocomplete=\"list\"\n    aria-expanded=\"false\"\n    data-active-option=\"item1\"\n    aria-activedescendant=\"\"\n    aria-haspopup=\"listbox\"\n    etNativeInputRef\n  />\n</ng-template>\n<ng-template #noInput>\n  <div\n    [attr.id]=\"input.id\"\n    [attr.aria-labelledby]=\"input.labelId$ | async\"\n    [attr.aria-describedby]=\"input.describedBy$ | async\"\n    [attr.tabindex]=\"(input.disabled$ | async) ? -1 : 0\"\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    role=\"combobox\"\n    aria-controls=\"joketypes\"\n    aria-autocomplete=\"list\"\n    aria-expanded=\"false\"\n    data-active-option=\"item1\"\n    aria-activedescendant=\"\"\n    aria-haspopup=\"listbox\"\n  ></div>\n</ng-template>\n\n<ng-content select=\"[etInputSuffix]\" />\n\n<ng-template #selectBodyTpl>\n  <ng-content />\n</ng-template>\n\n<button (click)=\"mountOrUnmountSelectBody()\">Toggle</button>\n", styles: [""], 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-select', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'et-select',
+                    }, imports: [NgIf, NativeInputRefDirective, AsyncPipe], hostDirectives: [{ directive: InputDirective, inputs: ['autocomplete'] }, AnimatedOverlayDirective], template: "<ng-content select=\"[etInputPrefix]\" />\n\n<div></div>\n\n<div *ngIf=\"searchable; then searchInput; else noInput\" class=\"et-select-wrapper\"></div>\n<ng-template #searchInput>\n  <input\n    [attr.id]=\"input.id\"\n    [attr.aria-labelledby]=\"input.labelId$ | async\"\n    [attr.aria-describedby]=\"input.describedBy$ | async\"\n    [attr.autocomplete]=\"input.autocomplete || null\"\n    [attr.tabindex]=\"(input.disabled$ | async) ? -1 : 0\"\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    type=\"text\"\n    role=\"combobox\"\n    aria-controls=\"joketypes\"\n    aria-autocomplete=\"list\"\n    aria-expanded=\"false\"\n    data-active-option=\"item1\"\n    aria-activedescendant=\"\"\n    aria-haspopup=\"listbox\"\n    etNativeInputRef\n  />\n</ng-template>\n<ng-template #noInput>\n  <div\n    [attr.id]=\"input.id\"\n    [attr.aria-labelledby]=\"input.labelId$ | async\"\n    [attr.aria-describedby]=\"input.describedBy$ | async\"\n    [attr.tabindex]=\"(input.disabled$ | async) ? -1 : 0\"\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    role=\"combobox\"\n    aria-controls=\"joketypes\"\n    aria-autocomplete=\"list\"\n    aria-expanded=\"false\"\n    data-active-option=\"item1\"\n    aria-activedescendant=\"\"\n    aria-haspopup=\"listbox\"\n  ></div>\n</ng-template>\n\n<ng-content select=\"[etInputSuffix]\" />\n\n<ng-template #selectBodyTpl>\n  <ng-content />\n</ng-template>\n\n<button (click)=\"mountOrUnmountSelectBody()\">Toggle</button>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { searchable: [{
+                type: Input
+            }], selectBodyTpl: [{
+                type: ViewChild,
+                args: ['selectBodyTpl']
+            }] } });
+
 const SelectImports = [
     SelectComponent,
     SelectOptionComponent,
@@ -3885,7 +3879,7 @@ class SliderComponent {
         this._elementRef = inject(ElementRef);
         this._dirService = inject(Directionality);
         this._document = inject(DOCUMENT);
-        this._destroy$ = inject(DestroyService, { host: true }).destroy$;
+        this._destroy$ = createDestroy();
         this._mouseDown$ = fromEvent(this._elementRef.nativeElement, 'mousedown', { passive: false });
         this._touchStart$ = fromEvent(this._elementRef.nativeElement, 'touchstart', {
             passive: false,
@@ -4156,7 +4150,7 @@ class SliderComponent {
         return this._sliderDimensions$;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SliderComponent, isStandalone: true, selector: "et-slider", inputs: { min: "min", max: "max", step: "step", vertical: "vertical", inverted: "inverted" }, host: { attributes: { "role": "slider" }, properties: { "id": "_input.id" }, classAttribute: "et-slider" }, providers: [DestroyService], hostDirectives: [{ directive: InputDirective, inputs: ["autocomplete", "autocomplete"] }], ngImport: i0, template: "<div class=\"et-slider-track-container\">\n  <div\n    *ngIf=\"trackBackgroundStyles$ | async as trackBackgroundStyles\"\n    [style.transform]=\"trackBackgroundStyles.transform\"\n    class=\"et-slider-track-background\"\n  ></div>\n  <div\n    *ngIf=\"trackFillStyles$ | async as trackFillStyles\"\n    [style.transform]=\"trackFillStyles.transform\"\n    [style.display]=\"trackFillStyles.display\"\n    class=\"et-slider-track-fill\"\n  ></div>\n</div>\n\n<div\n  *ngIf=\"thumbContainerStyles$ | async as thumbContainerStyles\"\n  [style.transform]=\"thumbContainerStyles.transform\"\n  class=\"et-slider-thumb-container\"\n>\n  <div class=\"et-slider-thumb\"></div>\n</div>\n", styles: [":where(.et-slider){--et-slider-track-block-size: 2px;--et-slider-track-border-radius: 0;--et-slider-inactive-track-color: #646464;--et-slider-active-track-color: #ffffff;--et-slider-block-size: 32px;--et-slider-min-inline-size: 112px;--et-slider-thumb-target-size: 32px;--et-slider-thumb-size: 12px;--et-slider-thumb-border-radius: 9999px;--et-slider-thumb-color: #ffffff;--et-slider-transition-duration: 80ms;outline:none}.et-slider{position:relative;display:block}.et-slider.et-slider--disable-animations{--et-slider-transition-duration: 0ms}.et-slider[aria-orientation=horizontal]{block-size:var(--et-slider-block-size);min-inline-size:var(--et-slider-min-inline-size)}.et-slider[aria-orientation=horizontal] .et-slider-track-container{inset-block-start:calc(50% - var(--et-slider-track-block-size) / 2);inset-inline-start:0;block-size:var(--et-slider-track-block-size);inline-size:100%}.et-slider[aria-orientation=horizontal] .et-slider-track-fill{block-size:var(--et-slider-track-block-size);inline-size:100%;transform-origin:0 0}.et-slider[aria-orientation=horizontal] .et-slider-track-background{block-size:var(--et-slider-track-block-size);inline-size:100%;transform-origin:100% 100%}.et-slider[aria-orientation=horizontal] .et-slider-thumb-container{inline-size:100%;block-size:0;inset-block-start:50%}.et-slider[aria-orientation=horizontal].et-slider--inverted .et-slider-track-fill{transform-origin:100% 100%}.et-slider[aria-orientation=horizontal].et-slider--inverted .et-slider-track-background{transform-origin:0 0}.et-slider[aria-orientation=vertical]{inline-size:var(--et-slider-block-size);min-block-size:var(--et-slider-min-inline-size)}.et-slider[aria-orientation=vertical] .et-slider-track-container{inset-block-start:0;inset-inline-start:calc(50% - var(--et-slider-track-block-size) / 2);block-size:100%;inline-size:var(--et-slider-track-block-size)}.et-slider[aria-orientation=vertical] .et-slider-track-fill{inline-size:var(--et-slider-track-block-size);block-size:100%;transform-origin:100% 100%}.et-slider[aria-orientation=vertical] .et-slider-track-background{inline-size:var(--et-slider-track-block-size);block-size:100%;transform-origin:0 0}.et-slider[aria-orientation=vertical] .et-slider-thumb-container{inline-size:0;block-size:100%;inset-inline-start:50%}.et-slider[aria-orientation=vertical].et-slider--inverted .et-slider-track-fill{transform-origin:0 0}.et-slider[aria-orientation=vertical].et-slider--inverted .et-slider-track-background,[dir=rtl] .et-slider[aria-orientation=horizontal] .et-slider-track-fill{transform-origin:100% 100%}[dir=rtl] .et-slider[aria-orientation=horizontal] .et-slider-track-background,[dir=rtl] .et-slider[aria-orientation=horizontal].et-slider--inverted .et-slider-track-fill{transform-origin:0 0}[dir=rtl] .et-slider[aria-orientation=horizontal].et-slider--inverted .et-slider-track-background{transform-origin:100% 100%}.et-slider .et-slider-track-container{position:absolute;overflow:hidden}.et-slider .et-slider-track-fill{position:absolute;transition:transform var(--et-slider-transition-duration);background-color:var(--et-slider-active-track-color)}.et-slider .et-slider-track-background{position:absolute;transition:transform var(--et-slider-transition-duration);background-color:var(--et-slider-inactive-track-color)}.et-slider .et-slider-thumb-container{position:absolute;z-index:1;transition:transform var(--et-slider-transition-duration)}.et-slider .et-slider-thumb{position:absolute;inset-inline-end:calc(var(--et-slider-thumb-target-size) / 2 * -1);inset-block-end:calc(var(--et-slider-thumb-target-size) / 2 * -1);inline-size:var(--et-slider-thumb-target-size);block-size:var(--et-slider-thumb-target-size);transition:transform var(--et-slider-transition-duration);display:flex;justify-content:center;align-items:center}.et-slider .et-slider-thumb:after{content:\"\";position:relative;inline-size:var(--et-slider-thumb-size);block-size:var(--et-slider-thumb-size);background-color:var(--et-slider-thumb-color);border-radius:var(--et-slider-thumb-border-radius);cursor:grab}.et-slider.et-slider--is-sliding .et-slider-thumb:after{cursor:grabbing}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SliderComponent, isStandalone: true, selector: "et-slider", inputs: { min: "min", max: "max", step: "step", vertical: "vertical", inverted: "inverted" }, host: { attributes: { "role": "slider" }, properties: { "id": "_input.id" }, classAttribute: "et-slider" }, hostDirectives: [{ directive: InputDirective, inputs: ["autocomplete", "autocomplete"] }], ngImport: i0, template: "<div class=\"et-slider-track-container\">\n  <div\n    *ngIf=\"trackBackgroundStyles$ | async as trackBackgroundStyles\"\n    [style.transform]=\"trackBackgroundStyles.transform\"\n    class=\"et-slider-track-background\"\n  ></div>\n  <div\n    *ngIf=\"trackFillStyles$ | async as trackFillStyles\"\n    [style.transform]=\"trackFillStyles.transform\"\n    [style.display]=\"trackFillStyles.display\"\n    class=\"et-slider-track-fill\"\n  ></div>\n</div>\n\n<div\n  *ngIf=\"thumbContainerStyles$ | async as thumbContainerStyles\"\n  [style.transform]=\"thumbContainerStyles.transform\"\n  class=\"et-slider-thumb-container\"\n>\n  <div class=\"et-slider-thumb\"></div>\n</div>\n", styles: [":where(.et-slider){--et-slider-track-block-size: 2px;--et-slider-track-border-radius: 0;--et-slider-inactive-track-color: #646464;--et-slider-active-track-color: #ffffff;--et-slider-block-size: 32px;--et-slider-min-inline-size: 112px;--et-slider-thumb-target-size: 32px;--et-slider-thumb-size: 12px;--et-slider-thumb-border-radius: 9999px;--et-slider-thumb-color: #ffffff;--et-slider-transition-duration: 80ms;outline:none}.et-slider{position:relative;display:block}.et-slider.et-slider--disable-animations{--et-slider-transition-duration: 0ms}.et-slider[aria-orientation=horizontal]{block-size:var(--et-slider-block-size);min-inline-size:var(--et-slider-min-inline-size)}.et-slider[aria-orientation=horizontal] .et-slider-track-container{inset-block-start:calc(50% - var(--et-slider-track-block-size) / 2);inset-inline-start:0;block-size:var(--et-slider-track-block-size);inline-size:100%}.et-slider[aria-orientation=horizontal] .et-slider-track-fill{block-size:var(--et-slider-track-block-size);inline-size:100%;transform-origin:0 0}.et-slider[aria-orientation=horizontal] .et-slider-track-background{block-size:var(--et-slider-track-block-size);inline-size:100%;transform-origin:100% 100%}.et-slider[aria-orientation=horizontal] .et-slider-thumb-container{inline-size:100%;block-size:0;inset-block-start:50%}.et-slider[aria-orientation=horizontal].et-slider--inverted .et-slider-track-fill{transform-origin:100% 100%}.et-slider[aria-orientation=horizontal].et-slider--inverted .et-slider-track-background{transform-origin:0 0}.et-slider[aria-orientation=vertical]{inline-size:var(--et-slider-block-size);min-block-size:var(--et-slider-min-inline-size)}.et-slider[aria-orientation=vertical] .et-slider-track-container{inset-block-start:0;inset-inline-start:calc(50% - var(--et-slider-track-block-size) / 2);block-size:100%;inline-size:var(--et-slider-track-block-size)}.et-slider[aria-orientation=vertical] .et-slider-track-fill{inline-size:var(--et-slider-track-block-size);block-size:100%;transform-origin:100% 100%}.et-slider[aria-orientation=vertical] .et-slider-track-background{inline-size:var(--et-slider-track-block-size);block-size:100%;transform-origin:0 0}.et-slider[aria-orientation=vertical] .et-slider-thumb-container{inline-size:0;block-size:100%;inset-inline-start:50%}.et-slider[aria-orientation=vertical].et-slider--inverted .et-slider-track-fill{transform-origin:0 0}.et-slider[aria-orientation=vertical].et-slider--inverted .et-slider-track-background,[dir=rtl] .et-slider[aria-orientation=horizontal] .et-slider-track-fill{transform-origin:100% 100%}[dir=rtl] .et-slider[aria-orientation=horizontal] .et-slider-track-background,[dir=rtl] .et-slider[aria-orientation=horizontal].et-slider--inverted .et-slider-track-fill{transform-origin:0 0}[dir=rtl] .et-slider[aria-orientation=horizontal].et-slider--inverted .et-slider-track-background{transform-origin:100% 100%}.et-slider .et-slider-track-container{position:absolute;overflow:hidden}.et-slider .et-slider-track-fill{position:absolute;transition:transform var(--et-slider-transition-duration);background-color:var(--et-slider-active-track-color)}.et-slider .et-slider-track-background{position:absolute;transition:transform var(--et-slider-transition-duration);background-color:var(--et-slider-inactive-track-color)}.et-slider .et-slider-thumb-container{position:absolute;z-index:1;transition:transform var(--et-slider-transition-duration)}.et-slider .et-slider-thumb{position:absolute;inset-inline-end:calc(var(--et-slider-thumb-target-size) / 2 * -1);inset-block-end:calc(var(--et-slider-thumb-target-size) / 2 * -1);inline-size:var(--et-slider-thumb-target-size);block-size:var(--et-slider-thumb-target-size);transition:transform var(--et-slider-transition-duration);display:flex;justify-content:center;align-items:center}.et-slider .et-slider-thumb:after{content:\"\";position:relative;inline-size:var(--et-slider-thumb-size);block-size:var(--et-slider-thumb-size);background-color:var(--et-slider-thumb-color);border-radius:var(--et-slider-thumb-border-radius);cursor:grab}.et-slider.et-slider--is-sliding .et-slider-thumb:after{cursor:grabbing}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
@@ -4164,7 +4158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                         class: 'et-slider',
                         role: 'slider',
                         '[id]': '_input.id',
-                    }, providers: [DestroyService], imports: [LetDirective, AsyncPipe, NgIf], hostDirectives: [{ directive: InputDirective, inputs: ['autocomplete'] }], template: "<div class=\"et-slider-track-container\">\n  <div\n    *ngIf=\"trackBackgroundStyles$ | async as trackBackgroundStyles\"\n    [style.transform]=\"trackBackgroundStyles.transform\"\n    class=\"et-slider-track-background\"\n  ></div>\n  <div\n    *ngIf=\"trackFillStyles$ | async as trackFillStyles\"\n    [style.transform]=\"trackFillStyles.transform\"\n    [style.display]=\"trackFillStyles.display\"\n    class=\"et-slider-track-fill\"\n  ></div>\n</div>\n\n<div\n  *ngIf=\"thumbContainerStyles$ | async as thumbContainerStyles\"\n  [style.transform]=\"thumbContainerStyles.transform\"\n  class=\"et-slider-thumb-container\"\n>\n  <div class=\"et-slider-thumb\"></div>\n</div>\n", styles: [":where(.et-slider){--et-slider-track-block-size: 2px;--et-slider-track-border-radius: 0;--et-slider-inactive-track-color: #646464;--et-slider-active-track-color: #ffffff;--et-slider-block-size: 32px;--et-slider-min-inline-size: 112px;--et-slider-thumb-target-size: 32px;--et-slider-thumb-size: 12px;--et-slider-thumb-border-radius: 9999px;--et-slider-thumb-color: #ffffff;--et-slider-transition-duration: 80ms;outline:none}.et-slider{position:relative;display:block}.et-slider.et-slider--disable-animations{--et-slider-transition-duration: 0ms}.et-slider[aria-orientation=horizontal]{block-size:var(--et-slider-block-size);min-inline-size:var(--et-slider-min-inline-size)}.et-slider[aria-orientation=horizontal] .et-slider-track-container{inset-block-start:calc(50% - var(--et-slider-track-block-size) / 2);inset-inline-start:0;block-size:var(--et-slider-track-block-size);inline-size:100%}.et-slider[aria-orientation=horizontal] .et-slider-track-fill{block-size:var(--et-slider-track-block-size);inline-size:100%;transform-origin:0 0}.et-slider[aria-orientation=horizontal] .et-slider-track-background{block-size:var(--et-slider-track-block-size);inline-size:100%;transform-origin:100% 100%}.et-slider[aria-orientation=horizontal] .et-slider-thumb-container{inline-size:100%;block-size:0;inset-block-start:50%}.et-slider[aria-orientation=horizontal].et-slider--inverted .et-slider-track-fill{transform-origin:100% 100%}.et-slider[aria-orientation=horizontal].et-slider--inverted .et-slider-track-background{transform-origin:0 0}.et-slider[aria-orientation=vertical]{inline-size:var(--et-slider-block-size);min-block-size:var(--et-slider-min-inline-size)}.et-slider[aria-orientation=vertical] .et-slider-track-container{inset-block-start:0;inset-inline-start:calc(50% - var(--et-slider-track-block-size) / 2);block-size:100%;inline-size:var(--et-slider-track-block-size)}.et-slider[aria-orientation=vertical] .et-slider-track-fill{inline-size:var(--et-slider-track-block-size);block-size:100%;transform-origin:100% 100%}.et-slider[aria-orientation=vertical] .et-slider-track-background{inline-size:var(--et-slider-track-block-size);block-size:100%;transform-origin:0 0}.et-slider[aria-orientation=vertical] .et-slider-thumb-container{inline-size:0;block-size:100%;inset-inline-start:50%}.et-slider[aria-orientation=vertical].et-slider--inverted .et-slider-track-fill{transform-origin:0 0}.et-slider[aria-orientation=vertical].et-slider--inverted .et-slider-track-background,[dir=rtl] .et-slider[aria-orientation=horizontal] .et-slider-track-fill{transform-origin:100% 100%}[dir=rtl] .et-slider[aria-orientation=horizontal] .et-slider-track-background,[dir=rtl] .et-slider[aria-orientation=horizontal].et-slider--inverted .et-slider-track-fill{transform-origin:0 0}[dir=rtl] .et-slider[aria-orientation=horizontal].et-slider--inverted .et-slider-track-background{transform-origin:100% 100%}.et-slider .et-slider-track-container{position:absolute;overflow:hidden}.et-slider .et-slider-track-fill{position:absolute;transition:transform var(--et-slider-transition-duration);background-color:var(--et-slider-active-track-color)}.et-slider .et-slider-track-background{position:absolute;transition:transform var(--et-slider-transition-duration);background-color:var(--et-slider-inactive-track-color)}.et-slider .et-slider-thumb-container{position:absolute;z-index:1;transition:transform var(--et-slider-transition-duration)}.et-slider .et-slider-thumb{position:absolute;inset-inline-end:calc(var(--et-slider-thumb-target-size) / 2 * -1);inset-block-end:calc(var(--et-slider-thumb-target-size) / 2 * -1);inline-size:var(--et-slider-thumb-target-size);block-size:var(--et-slider-thumb-target-size);transition:transform var(--et-slider-transition-duration);display:flex;justify-content:center;align-items:center}.et-slider .et-slider-thumb:after{content:\"\";position:relative;inline-size:var(--et-slider-thumb-size);block-size:var(--et-slider-thumb-size);background-color:var(--et-slider-thumb-color);border-radius:var(--et-slider-thumb-border-radius);cursor:grab}.et-slider.et-slider--is-sliding .et-slider-thumb:after{cursor:grabbing}\n"] }]
+                    }, imports: [LetDirective, AsyncPipe, NgIf], hostDirectives: [{ directive: InputDirective, inputs: ['autocomplete'] }], template: "<div class=\"et-slider-track-container\">\n  <div\n    *ngIf=\"trackBackgroundStyles$ | async as trackBackgroundStyles\"\n    [style.transform]=\"trackBackgroundStyles.transform\"\n    class=\"et-slider-track-background\"\n  ></div>\n  <div\n    *ngIf=\"trackFillStyles$ | async as trackFillStyles\"\n    [style.transform]=\"trackFillStyles.transform\"\n    [style.display]=\"trackFillStyles.display\"\n    class=\"et-slider-track-fill\"\n  ></div>\n</div>\n\n<div\n  *ngIf=\"thumbContainerStyles$ | async as thumbContainerStyles\"\n  [style.transform]=\"thumbContainerStyles.transform\"\n  class=\"et-slider-thumb-container\"\n>\n  <div class=\"et-slider-thumb\"></div>\n</div>\n", styles: [":where(.et-slider){--et-slider-track-block-size: 2px;--et-slider-track-border-radius: 0;--et-slider-inactive-track-color: #646464;--et-slider-active-track-color: #ffffff;--et-slider-block-size: 32px;--et-slider-min-inline-size: 112px;--et-slider-thumb-target-size: 32px;--et-slider-thumb-size: 12px;--et-slider-thumb-border-radius: 9999px;--et-slider-thumb-color: #ffffff;--et-slider-transition-duration: 80ms;outline:none}.et-slider{position:relative;display:block}.et-slider.et-slider--disable-animations{--et-slider-transition-duration: 0ms}.et-slider[aria-orientation=horizontal]{block-size:var(--et-slider-block-size);min-inline-size:var(--et-slider-min-inline-size)}.et-slider[aria-orientation=horizontal] .et-slider-track-container{inset-block-start:calc(50% - var(--et-slider-track-block-size) / 2);inset-inline-start:0;block-size:var(--et-slider-track-block-size);inline-size:100%}.et-slider[aria-orientation=horizontal] .et-slider-track-fill{block-size:var(--et-slider-track-block-size);inline-size:100%;transform-origin:0 0}.et-slider[aria-orientation=horizontal] .et-slider-track-background{block-size:var(--et-slider-track-block-size);inline-size:100%;transform-origin:100% 100%}.et-slider[aria-orientation=horizontal] .et-slider-thumb-container{inline-size:100%;block-size:0;inset-block-start:50%}.et-slider[aria-orientation=horizontal].et-slider--inverted .et-slider-track-fill{transform-origin:100% 100%}.et-slider[aria-orientation=horizontal].et-slider--inverted .et-slider-track-background{transform-origin:0 0}.et-slider[aria-orientation=vertical]{inline-size:var(--et-slider-block-size);min-block-size:var(--et-slider-min-inline-size)}.et-slider[aria-orientation=vertical] .et-slider-track-container{inset-block-start:0;inset-inline-start:calc(50% - var(--et-slider-track-block-size) / 2);block-size:100%;inline-size:var(--et-slider-track-block-size)}.et-slider[aria-orientation=vertical] .et-slider-track-fill{inline-size:var(--et-slider-track-block-size);block-size:100%;transform-origin:100% 100%}.et-slider[aria-orientation=vertical] .et-slider-track-background{inline-size:var(--et-slider-track-block-size);block-size:100%;transform-origin:0 0}.et-slider[aria-orientation=vertical] .et-slider-thumb-container{inline-size:0;block-size:100%;inset-inline-start:50%}.et-slider[aria-orientation=vertical].et-slider--inverted .et-slider-track-fill{transform-origin:0 0}.et-slider[aria-orientation=vertical].et-slider--inverted .et-slider-track-background,[dir=rtl] .et-slider[aria-orientation=horizontal] .et-slider-track-fill{transform-origin:100% 100%}[dir=rtl] .et-slider[aria-orientation=horizontal] .et-slider-track-background,[dir=rtl] .et-slider[aria-orientation=horizontal].et-slider--inverted .et-slider-track-fill{transform-origin:0 0}[dir=rtl] .et-slider[aria-orientation=horizontal].et-slider--inverted .et-slider-track-background{transform-origin:100% 100%}.et-slider .et-slider-track-container{position:absolute;overflow:hidden}.et-slider .et-slider-track-fill{position:absolute;transition:transform var(--et-slider-transition-duration);background-color:var(--et-slider-active-track-color)}.et-slider .et-slider-track-background{position:absolute;transition:transform var(--et-slider-transition-duration);background-color:var(--et-slider-inactive-track-color)}.et-slider .et-slider-thumb-container{position:absolute;z-index:1;transition:transform var(--et-slider-transition-duration)}.et-slider .et-slider-thumb{position:absolute;inset-inline-end:calc(var(--et-slider-thumb-target-size) / 2 * -1);inset-block-end:calc(var(--et-slider-thumb-target-size) / 2 * -1);inline-size:var(--et-slider-thumb-target-size);block-size:var(--et-slider-thumb-target-size);transition:transform var(--et-slider-transition-duration);display:flex;justify-content:center;align-items:center}.et-slider .et-slider-thumb:after{content:\"\";position:relative;inline-size:var(--et-slider-thumb-size);block-size:var(--et-slider-thumb-size);background-color:var(--et-slider-thumb-color);border-radius:var(--et-slider-thumb-border-radius);cursor:grab}.et-slider.et-slider--is-sliding .et-slider-thumb:after{cursor:grabbing}\n"] }]
         }], propDecorators: { min: [{
                 type: Input
             }], max: [{
@@ -4251,7 +4245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
 
 class MasonryComponent {
     constructor() {
-        this._destroy$ = inject(DestroyService, { host: true }).destroy$;
+        this._destroy$ = createDestroy();
         this._elementRef = inject(ElementRef);
         this._delayable = inject(DELAYABLE_TOKEN, { optional: true });
         this._columWidth$ = new BehaviorSubject(250);
@@ -4421,7 +4415,7 @@ class MasonryComponent {
         this._elementRef.nativeElement.style.setProperty('--et-masonry-column-width', `${width}px`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MasonryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: MasonryComponent, isStandalone: true, selector: "et-masonry", inputs: { columWidth: "columWidth", gap: "gap" }, outputs: { initializing: "initializing", initialized: "initialized" }, host: { classAttribute: "et-masonry" }, providers: [DestroyService], queries: [{ propertyName: "_items", predicate: i0.forwardRef(function () { return MASONRY_ITEM_TOKEN; }), descendants: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: MasonryComponent, isStandalone: true, selector: "et-masonry", inputs: { columWidth: "columWidth", gap: "gap" }, outputs: { initializing: "initializing", initialized: "initialized" }, host: { classAttribute: "et-masonry" }, queries: [{ propertyName: "_items", predicate: i0.forwardRef(function () { return MASONRY_ITEM_TOKEN; }), descendants: true }], ngImport: i0, template: `
     <div (etObserveResize)="setResizeEvent()"></div>
     <ng-content select="[etMasonryItem], et-masonry-item, ng-container" />
   `, isInline: true, styles: [".et-masonry{position:relative;display:block}.et-masonry-item{position:absolute;top:0;left:0}.et-masonry.et-masonry--hide-overflow{overflow:hidden}.et-masonry.et-masonry--initialized .et-masonry-item{transition:transform .15s var(--ease-out-3)}\n"], dependencies: [{ kind: "directive", type: ObserveResizeDirective, selector: "[etObserveResize]", inputs: ["etObserveResizeDisabled", "etObserveResizeDebounce"], outputs: ["etObserveResize"], exportAs: ["etObserveResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -4433,7 +4427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
     <ng-content select="[etMasonryItem], et-masonry-item, ng-container" />
   `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'et-masonry',
-                    }, imports: [ObserveResizeDirective], providers: [DestroyService], styles: [".et-masonry{position:relative;display:block}.et-masonry-item{position:absolute;top:0;left:0}.et-masonry.et-masonry--hide-overflow{overflow:hidden}.et-masonry.et-masonry--initialized .et-masonry-item{transition:transform .15s var(--ease-out-3)}\n"] }]
+                    }, imports: [ObserveResizeDirective], styles: [".et-masonry{position:relative;display:block}.et-masonry-item{position:absolute;top:0;left:0}.et-masonry.et-masonry--hide-overflow{overflow:hidden}.et-masonry.et-masonry--initialized .et-masonry-item{transition:transform .15s var(--ease-out-3)}\n"] }]
         }], propDecorators: { _items: [{
                 type: ContentChildren,
                 args: [forwardRef(() => MASONRY_ITEM_TOKEN), { descendants: true }]
@@ -4493,7 +4487,7 @@ class BottomSheetContainerBaseComponent extends CdkDialogContainer {
             this._trapFocus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BottomSheetContainerBaseComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.FocusTrapFactory }, { token: DOCUMENT, optional: true }, { token: BOTTOM_SHEET_CONFIG }, { token: i1$1.InteractivityChecker }, { token: i0.NgZone }, { token: i2.OverlayRef }, { token: i1$1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BottomSheetContainerBaseComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.FocusTrapFactory }, { token: DOCUMENT, optional: true }, { token: BOTTOM_SHEET_CONFIG }, { token: i1$1.InteractivityChecker }, { token: i0.NgZone }, { token: i2$1.OverlayRef }, { token: i1$1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: BottomSheetContainerBaseComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BottomSheetContainerBaseComponent, decorators: [{
@@ -4507,7 +4501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BOTTOM_SHEET_CONFIG]
-                }] }, { type: i1$1.InteractivityChecker }, { type: i0.NgZone }, { type: i2.OverlayRef }, { type: i1$1.FocusMonitor }]; } });
+                }] }, { type: i1$1.InteractivityChecker }, { type: i0.NgZone }, { type: i2$1.OverlayRef }, { type: i1$1.FocusMonitor }]; } });
 
 const createBottomSheetConfig = (globalConfig, localConfig) => ({
     ...BOTTOM_SHEET_DEFAULT_CONFIG,
@@ -4725,7 +4719,7 @@ class BottomSheetServiceBase {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BottomSheetServiceBase, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i2.Overlay }, { type: i0.Injector }, { type: undefined }, { type: undefined }, { type: undefined }, { type: i0.Type }, { type: i0.Type }, { type: i0.InjectionToken }]; } });
+        }], ctorParameters: function () { return [{ type: i2$1.Overlay }, { type: i0.Injector }, { type: undefined }, { type: undefined }, { type: undefined }, { type: i0.Type }, { type: i0.Type }, { type: i0.InjectionToken }]; } });
 
 let nextUniqueId$2 = 0;
 class SwipeHandlerService {
@@ -4861,12 +4855,12 @@ class BottomSheetService extends BottomSheetServiceBase {
     constructor(overlay, injector, defaultOptions, scrollStrategy, parentBottomSheetService) {
         super(overlay, injector, defaultOptions, parentBottomSheetService, scrollStrategy, BottomSheetRef, BottomSheetContainerComponent, BOTTOM_SHEET_DATA);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BottomSheetService, deps: [{ token: i2.Overlay }, { token: i0.Injector }, { token: BOTTOM_SHEET_DEFAULT_OPTIONS, optional: true }, { token: BOTTOM_SHEET_SCROLL_STRATEGY }, { token: BottomSheetService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BottomSheetService, deps: [{ token: i2$1.Overlay }, { token: i0.Injector }, { token: BOTTOM_SHEET_DEFAULT_OPTIONS, optional: true }, { token: BOTTOM_SHEET_SCROLL_STRATEGY }, { token: BottomSheetService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BottomSheetService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BottomSheetService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i2.Overlay }, { type: i0.Injector }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i2$1.Overlay }, { type: i0.Injector }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -4886,7 +4880,7 @@ class BottomSheetDragHandleComponent {
         this._elementRef = inject(ElementRef);
         this._bottomSheetService = inject(BottomSheetService);
         this._bottomSheetSwipeHandlerService = inject(BottomSheetSwipeHandlerService);
-        this._destroy$ = inject(DestroyService, { host: true }).destroy$;
+        this._destroy$ = createDestroy();
         this.ariaLabel = 'Close sheet';
         this.type = 'button';
         this._swipeHandlerId = null;
@@ -4950,14 +4944,14 @@ class BottomSheetDragHandleComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BottomSheetDragHandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: BottomSheetDragHandleComponent, isStandalone: true, selector: "[et-bottom-sheet-drag-handle], [etBottomSheetDragHandle]", inputs: { ariaLabel: ["aria-label", "ariaLabel"], type: "type", bottomSheetResult: ["et-bottom-sheet-drag-handle", "bottomSheetResult"], _etBottomSheetDragHandle: ["etBottomSheetDragHandle", "_etBottomSheetDragHandle"] }, host: { listeners: { "click": "_onButtonClick($event)" }, properties: { "attr.aria-label": "ariaLabel || null", "attr.type": "this.type" }, classAttribute: "et-bottom-sheet-drag-handle" }, providers: [BottomSheetSwipeHandlerService, DestroyService], exportAs: ["etBottomSheetDragHandle"], usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: [":where(.et-bottom-sheet-drag-handle){--background-color: red}.et-bottom-sheet-drag-handle{--_tap-target-width: 100px;--_tap-target-height: 25px;inset-inline-start:calc(50% - var(--_tap-target-width) / 2);inline-size:var(--_tap-target-width);block-size:var(--_tap-target-height);border:none;position:relative;background-color:#0000;touch-action:manipulation;-webkit-appearance:none;appearance:none}.et-bottom-sheet-drag-handle:before{--_toggle-width: 32px;--_toggle-height: 4px;inline-size:var(--_toggle-width);block-size:var(--_toggle-height);content:\"\";position:absolute;background-color:var(--background-color);border-radius:9999px;inset-inline-start:calc(50% - var(--_toggle-width) / 2);inset-block-start:calc(50% - var(--_toggle-height) / 2);z-index:1}.et-bottom-sheet-drag-handle:after{opacity:0;inline-size:100%;block-size:100%;content:\"\";position:absolute;background-color:#0003;border-radius:8px;inset-block-start:0;inset-inline-start:0;transform:scale(0);transition:opacity .3s var(--ease-5),transform .3s var(--ease-5)}.et-bottom-sheet-drag-handle:focus-visible{outline:none}.et-bottom-sheet-drag-handle:focus-visible:after{opacity:1;transform:scale(1);transition:opacity .3s var(--ease-5),transform .3s var(--ease-squish-3)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: BottomSheetDragHandleComponent, isStandalone: true, selector: "[et-bottom-sheet-drag-handle], [etBottomSheetDragHandle]", inputs: { ariaLabel: ["aria-label", "ariaLabel"], type: "type", bottomSheetResult: ["et-bottom-sheet-drag-handle", "bottomSheetResult"], _etBottomSheetDragHandle: ["etBottomSheetDragHandle", "_etBottomSheetDragHandle"] }, host: { listeners: { "click": "_onButtonClick($event)" }, properties: { "attr.aria-label": "ariaLabel || null", "attr.type": "this.type" }, classAttribute: "et-bottom-sheet-drag-handle" }, providers: [BottomSheetSwipeHandlerService], exportAs: ["etBottomSheetDragHandle"], usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: [":where(.et-bottom-sheet-drag-handle){--background-color: red}.et-bottom-sheet-drag-handle{--_tap-target-width: 100px;--_tap-target-height: 25px;inset-inline-start:calc(50% - var(--_tap-target-width) / 2);inline-size:var(--_tap-target-width);block-size:var(--_tap-target-height);border:none;position:relative;background-color:#0000;touch-action:manipulation;-webkit-appearance:none;appearance:none}.et-bottom-sheet-drag-handle:before{--_toggle-width: 32px;--_toggle-height: 4px;inline-size:var(--_toggle-width);block-size:var(--_toggle-height);content:\"\";position:absolute;background-color:var(--background-color);border-radius:9999px;inset-inline-start:calc(50% - var(--_toggle-width) / 2);inset-block-start:calc(50% - var(--_toggle-height) / 2);z-index:1}.et-bottom-sheet-drag-handle:after{opacity:0;inline-size:100%;block-size:100%;content:\"\";position:absolute;background-color:#0003;border-radius:8px;inset-block-start:0;inset-inline-start:0;transform:scale(0);transition:opacity .3s var(--ease-5),transform .3s var(--ease-5)}.et-bottom-sheet-drag-handle:focus-visible{outline:none}.et-bottom-sheet-drag-handle:focus-visible:after{opacity:1;transform:scale(1);transition:opacity .3s var(--ease-5),transform .3s var(--ease-squish-3)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BottomSheetDragHandleComponent, decorators: [{
             type: Component,
             args: [{ selector: '[et-bottom-sheet-drag-handle], [etBottomSheetDragHandle]', template: '', exportAs: 'etBottomSheetDragHandle', host: {
                         class: 'et-bottom-sheet-drag-handle',
                         '[attr.aria-label]': 'ariaLabel || null',
-                    }, standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [BottomSheetSwipeHandlerService, DestroyService], styles: [":where(.et-bottom-sheet-drag-handle){--background-color: red}.et-bottom-sheet-drag-handle{--_tap-target-width: 100px;--_tap-target-height: 25px;inset-inline-start:calc(50% - var(--_tap-target-width) / 2);inline-size:var(--_tap-target-width);block-size:var(--_tap-target-height);border:none;position:relative;background-color:#0000;touch-action:manipulation;-webkit-appearance:none;appearance:none}.et-bottom-sheet-drag-handle:before{--_toggle-width: 32px;--_toggle-height: 4px;inline-size:var(--_toggle-width);block-size:var(--_toggle-height);content:\"\";position:absolute;background-color:var(--background-color);border-radius:9999px;inset-inline-start:calc(50% - var(--_toggle-width) / 2);inset-block-start:calc(50% - var(--_toggle-height) / 2);z-index:1}.et-bottom-sheet-drag-handle:after{opacity:0;inline-size:100%;block-size:100%;content:\"\";position:absolute;background-color:#0003;border-radius:8px;inset-block-start:0;inset-inline-start:0;transform:scale(0);transition:opacity .3s var(--ease-5),transform .3s var(--ease-5)}.et-bottom-sheet-drag-handle:focus-visible{outline:none}.et-bottom-sheet-drag-handle:focus-visible:after{opacity:1;transform:scale(1);transition:opacity .3s var(--ease-5),transform .3s var(--ease-squish-3)}\n"] }]
+                    }, standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [BottomSheetSwipeHandlerService], styles: [":where(.et-bottom-sheet-drag-handle){--background-color: red}.et-bottom-sheet-drag-handle{--_tap-target-width: 100px;--_tap-target-height: 25px;inset-inline-start:calc(50% - var(--_tap-target-width) / 2);inline-size:var(--_tap-target-width);block-size:var(--_tap-target-height);border:none;position:relative;background-color:#0000;touch-action:manipulation;-webkit-appearance:none;appearance:none}.et-bottom-sheet-drag-handle:before{--_toggle-width: 32px;--_toggle-height: 4px;inline-size:var(--_toggle-width);block-size:var(--_toggle-height);content:\"\";position:absolute;background-color:var(--background-color);border-radius:9999px;inset-inline-start:calc(50% - var(--_toggle-width) / 2);inset-block-start:calc(50% - var(--_toggle-height) / 2);z-index:1}.et-bottom-sheet-drag-handle:after{opacity:0;inline-size:100%;block-size:100%;content:\"\";position:absolute;background-color:#0003;border-radius:8px;inset-block-start:0;inset-inline-start:0;transform:scale(0);transition:opacity .3s var(--ease-5),transform .3s var(--ease-5)}.et-bottom-sheet-drag-handle:focus-visible{outline:none}.et-bottom-sheet-drag-handle:focus-visible:after{opacity:1;transform:scale(1);transition:opacity .3s var(--ease-5),transform .3s var(--ease-squish-3)}\n"] }]
         }], propDecorators: { ariaLabel: [{
                 type: Input,
                 args: ['aria-label']
@@ -5033,8 +5027,8 @@ class BottomSheetContainerComponent extends BottomSheetContainerBaseComponent {
             this._animatedLifecycle.enter();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BottomSheetContainerComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.FocusTrapFactory }, { token: DOCUMENT, optional: true }, { token: BOTTOM_SHEET_CONFIG }, { token: i1$1.InteractivityChecker }, { token: i0.NgZone }, { token: i2.OverlayRef }, { token: i1$1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: BottomSheetContainerComponent, isStandalone: true, selector: "et-bottom-sheet-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", "class": "_config.containerClass" }, classAttribute: "et-bottom-sheet" }, usesInheritance: true, hostDirectives: [{ directive: i3.AnimatedLifecycleDirective }], ngImport: i0, template: `<ng-template cdkPortalOutlet></ng-template>`, isInline: true, styles: [".et-bottom-sheet{transform:translateY(var(--touch-translate-y))}.et-bottom-sheet.et-with-default-animation{outline:none}.et-bottom-sheet.et-with-default-animation.et-animation-enter-from,.et-bottom-sheet.et-with-default-animation.et-animation-leave-to{transform:translateY(100%)}.et-bottom-sheet.et-with-default-animation.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}.et-bottom-sheet.et-with-default-animation.et-animation-leave-active{transition:transform .15s var(--ease-in-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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BottomSheetContainerComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.FocusTrapFactory }, { token: DOCUMENT, optional: true }, { token: BOTTOM_SHEET_CONFIG }, { token: i1$1.InteractivityChecker }, { token: i0.NgZone }, { token: i2$1.OverlayRef }, { token: i1$1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: BottomSheetContainerComponent, isStandalone: true, selector: "et-bottom-sheet-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", "class": "_config.containerClass" }, classAttribute: "et-bottom-sheet" }, usesInheritance: true, hostDirectives: [{ directive: i2.AnimatedLifecycleDirective }], ngImport: i0, template: `<ng-template cdkPortalOutlet></ng-template>`, isInline: true, styles: [".et-bottom-sheet{transform:translateY(var(--touch-translate-y))}.et-bottom-sheet.et-with-default-animation{outline:none}.et-bottom-sheet.et-with-default-animation.et-animation-enter-from,.et-bottom-sheet.et-with-default-animation.et-animation-leave-to{transform:translateY(100%)}.et-bottom-sheet.et-with-default-animation.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}.et-bottom-sheet.et-with-default-animation.et-animation-leave-active{transition:transform .15s var(--ease-in-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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: BottomSheetContainerComponent, decorators: [{
             type: Component,
@@ -5058,7 +5052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BOTTOM_SHEET_CONFIG]
-                }] }, { type: i1$1.InteractivityChecker }, { type: i0.NgZone }, { type: i2.OverlayRef }, { type: i1$1.FocusMonitor }]; } });
+                }] }, { type: i1$1.InteractivityChecker }, { type: i0.NgZone }, { type: i2$1.OverlayRef }, { type: i1$1.FocusMonitor }]; } });
 
 const BottomSheetImports = [
     BottomSheetContainerComponent,
@@ -5331,18 +5325,18 @@ class DialogServiceBase {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: DialogServiceBase, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i2.Overlay }, { type: i0.Injector }, { type: undefined }, { type: undefined }, { type: undefined }, { type: i0.Type }, { type: i0.Type }, { type: i0.InjectionToken }]; } });
+        }], ctorParameters: function () { return [{ type: i2$1.Overlay }, { type: i0.Injector }, { type: undefined }, { type: undefined }, { type: undefined }, { type: i0.Type }, { type: i0.Type }, { type: i0.InjectionToken }]; } });
 
 class DialogService extends DialogServiceBase {
     constructor(overlay, injector, defaultOptions, scrollStrategy, parentDialogService) {
         super(overlay, injector, defaultOptions, parentDialogService, scrollStrategy, DialogRef, DialogContainerComponent, DIALOG_DATA);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: DialogService, deps: [{ token: i2.Overlay }, { token: i0.Injector }, { token: DIALOG_DEFAULT_OPTIONS, optional: true }, { token: DIALOG_SCROLL_STRATEGY }, { token: DialogService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: DialogService, deps: [{ token: i2$1.Overlay }, { token: i0.Injector }, { token: DIALOG_DEFAULT_OPTIONS, optional: true }, { token: DIALOG_SCROLL_STRATEGY }, { token: DialogService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: DialogService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i2.Overlay }, { type: i0.Injector }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i2$1.Overlay }, { type: i0.Injector }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -5433,7 +5427,7 @@ class DialogContainerBaseComponent extends CdkDialogContainer {
             this._trapFocus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: DialogContainerBaseComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.FocusTrapFactory }, { token: DOCUMENT, optional: true }, { token: DIALOG_CONFIG }, { token: i1$1.InteractivityChecker }, { token: i0.NgZone }, { token: i2.OverlayRef }, { token: i1$1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: DialogContainerBaseComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.FocusTrapFactory }, { token: DOCUMENT, optional: true }, { token: DIALOG_CONFIG }, { token: i1$1.InteractivityChecker }, { token: i0.NgZone }, { token: i2$1.OverlayRef }, { token: i1$1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: DialogContainerBaseComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: DialogContainerBaseComponent, decorators: [{
@@ -5447,7 +5441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DIALOG_CONFIG]
-                }] }, { type: i1$1.InteractivityChecker }, { type: i0.NgZone }, { type: i2.OverlayRef }, { type: i1$1.FocusMonitor }]; } });
+                }] }, { type: i1$1.InteractivityChecker }, { type: i0.NgZone }, { type: i2$1.OverlayRef }, { type: i1$1.FocusMonitor }]; } });
 
 let dialogElementUid = 0;
 class DialogTitleDirective {
@@ -5505,8 +5499,8 @@ class DialogContainerComponent extends DialogContainerBaseComponent {
             this._animatedLifecycle.enter();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: DialogContainerComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.FocusTrapFactory }, { token: DOCUMENT, optional: true }, { token: DIALOG_CONFIG }, { token: i1$1.InteractivityChecker }, { token: i0.NgZone }, { token: i2.OverlayRef }, { token: i1$1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: DialogContainerComponent, isStandalone: true, selector: "et-dialog-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", "class": "_config.containerClass" }, classAttribute: "et-dialog" }, usesInheritance: true, hostDirectives: [{ directive: i3.AnimatedLifecycleDirective }], ngImport: i0, template: `<ng-template cdkPortalOutlet></ng-template>`, isInline: true, styles: [".et-dialog.et-with-default-animation{outline:none}.et-dialog.et-with-default-animation.et-animation-enter-from{opacity:0;transform:scale(1.15)}.et-dialog.et-with-default-animation.et-animation-leave-to{opacity:0;transform:scale(.8)}.et-dialog.et-with-default-animation.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}.et-dialog.et-with-default-animation.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: DialogContainerComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.FocusTrapFactory }, { token: DOCUMENT, optional: true }, { token: DIALOG_CONFIG }, { token: i1$1.InteractivityChecker }, { token: i0.NgZone }, { token: i2$1.OverlayRef }, { token: i1$1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: DialogContainerComponent, isStandalone: true, selector: "et-dialog-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", "class": "_config.containerClass" }, classAttribute: "et-dialog" }, usesInheritance: true, hostDirectives: [{ directive: i2.AnimatedLifecycleDirective }], ngImport: i0, template: `<ng-template cdkPortalOutlet></ng-template>`, isInline: true, styles: [".et-dialog.et-with-default-animation{outline:none}.et-dialog.et-with-default-animation.et-animation-enter-from{opacity:0;transform:scale(1.15)}.et-dialog.et-with-default-animation.et-animation-leave-to{opacity:0;transform:scale(.8)}.et-dialog.et-with-default-animation.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}.et-dialog.et-with-default-animation.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: DialogContainerComponent, decorators: [{
             type: Component,
@@ -5530,7 +5524,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DIALOG_CONFIG]
-                }] }, { type: i1$1.InteractivityChecker }, { type: i0.NgZone }, { type: i2.OverlayRef }, { type: i1$1.FocusMonitor }]; } });
+                }] }, { type: i1$1.InteractivityChecker }, { type: i0.NgZone }, { type: i2$1.OverlayRef }, { type: i1$1.FocusMonitor }]; } });
 
 const DialogImports = [DialogContainerComponent, DialogCloseDirective, DialogTitleDirective];
 const provideDialog = () => {
@@ -5558,24 +5552,6 @@ const provideToggletipConfig = (config = {}) => {
 
 const TOGGLETIP_DIRECTIVE = new InjectionToken('TOGGLETIP_DIRECTIVE');
 class ToggletipDirective {
-    constructor() {
-        this._defaultConfig = inject(TOGGLETIP_CONFIG, { optional: true }) ?? createToggletipConfig();
-        this._toggletip = null;
-        this._showToggletip = false;
-        this.placement = this._defaultConfig.placement;
-        this.toggletipClose = new EventEmitter();
-        this._hostElementRef = inject(ElementRef);
-        this._viewContainerRef = inject(ViewContainerRef);
-        this._overlayService = inject(Overlay);
-        this._clickObserverService = inject(ClickObserverService);
-        this._injector = inject(Injector);
-        this._zone = inject(NgZone);
-        this._overlayRef = null;
-        this._portal = null;
-        this._toggletipRef = null;
-        this._popper = null;
-        this._listenerSubscriptions = [];
-    }
     get toggletip() {
         return this._toggletip;
     }
@@ -5587,32 +5563,54 @@ class ToggletipDirective {
     }
     set showToggletip(value) {
         this._showToggletip = coerceBooleanProperty(value);
-        if (this._showToggletip && !this._overlayRef) {
+        if (this._showToggletip && !this._animatedOverlay.isMounted) {
             nextFrame(() => {
                 this._mountToggletip();
                 this._addListeners();
             });
         }
-        else if (!this._showToggletip && this._overlayRef) {
-            this._animateUnmount();
+        else if (!this._showToggletip && this._animatedOverlay.isMounted) {
+            this._animatedOverlay.unmount();
             this._removeListeners();
         }
     }
+    constructor() {
+        this._destroy$ = createDestroy();
+        this._defaultConfig = inject(TOGGLETIP_CONFIG, { optional: true }) ?? createToggletipConfig();
+        this._animatedOverlay = inject(AnimatedOverlayDirective);
+        this._toggletip = null;
+        this._showToggletip = false;
+        this.toggletipClose = new EventEmitter();
+        this._clickObserverService = inject(ClickObserverService);
+        this._listenerSubscriptions = [];
+        this._animatedOverlay.placement = this._defaultConfig.placement;
+        this._animatedOverlay.offset = this._defaultConfig.offset;
+        this._animatedOverlay.arrowPadding = this._defaultConfig.arrowPadding;
+    }
+    ngOnInit() {
+        this._animatedOverlay
+            .afterClosed()
+            .pipe(tap(() => {
+            this._removeListeners();
+            this.toggletipClose.emit();
+        }), takeUntil(this._destroy$))
+            .subscribe();
+    }
     ngOnDestroy() {
-        this._unmountToggletip();
+        this._animatedOverlay._destroy();
         this._removeListeners();
     }
     _addListeners() {
         const keyupEscSub = fromEvent(document, 'keyup')
-            .pipe(filter((e) => e.key === 'Escape'), tap(() => this._animateUnmount()))
+            .pipe(filter((e) => e.key === 'Escape'), tap(() => this._animatedOverlay.unmount()))
             .subscribe();
         const clickOutsideSub = this._clickObserverService
-            .observe(this._toggletipRef?.location.nativeElement)
+            .observe(this._animatedOverlay.componentRef?.location.nativeElement)
             .subscribe((e) => {
             const targetElement = e.target;
-            const isInside = this._toggletipRef?.location.nativeElement.contains(targetElement);
+            const isInside = this._animatedOverlay.componentRef?.location.nativeElement.contains(targetElement);
             if (!isInside) {
-                this._animateUnmount();
+                this._animatedOverlay.unmount();
             }
         });
         this._listenerSubscriptions.push(keyupEscSub, clickOutsideSub);
@@ -5622,9 +5620,8 @@ class ToggletipDirective {
         this._listenerSubscriptions.length = 0;
     }
     _mountToggletip() {
-        this._overlayRef = this._createOverlay();
-        const injector = Injector.create({
-            parent: this._injector,
+        this._animatedOverlay.mount({
+            component: ToggletipComponent,
             providers: [
                 {
                     provide: TOGGLETIP_CONFIG,
@@ -5643,80 +5640,14 @@ class ToggletipDirective {
                 ],
             ],
         });
-        this._portal = this._portal ?? new ComponentPortal(ToggletipComponent, this._viewContainerRef, injector);
-        this._toggletipRef = this._overlayRef.attach(this._portal);
-        this._toggletipRef.instance._markForCheck();
-        this._zone.runOutsideAngular(() => {
-            if (!this._toggletipRef) {
-                return;
-            }
-            this._popper = createPopper(this._hostElementRef.nativeElement, this._toggletipRef.location.nativeElement, {
-                placement: this.placement,
-                modifiers: [
-                    ...(this._defaultConfig.offset
-                        ? [
-                            {
-                                name: 'offset',
-                                options: {
-                                    offset: this._defaultConfig.offset,
-                                },
-                            },
-                        ]
-                        : []),
-                    ...(this._defaultConfig.arrowPadding
-                        ? [
-                            {
-                                name: 'arrow',
-                                options: {
-                                    padding: this._defaultConfig.arrowPadding,
-                                },
-                            },
-                        ]
-                        : []),
-                ],
-            });
-            // We need to wait for the toggletip content to be rendered
-            nextFrame(() => {
-                if (!this._toggletipRef) {
-                    return;
-                }
-                this._popper?.update();
-                this._toggletipRef.instance._animatedLifecycle?.enter();
-            });
-        });
-    }
-    _animateUnmount() {
-        if (!this._toggletipRef || this._toggletipRef.instance._animatedLifecycle?.state === 'leaving') {
-            return;
-        }
-        this._toggletipRef.instance._animatedLifecycle?.leave();
-        this._toggletipRef.instance._animatedLifecycle?.state$
-            .pipe(filter((s) => s === 'left'), take(1))
-            .subscribe(() => this._unmountToggletip());
-    }
-    _unmountToggletip() {
-        this._zone.runOutsideAngular(() => {
-            this._popper?.destroy();
-            this._popper = null;
-        });
-        if (this._overlayRef) {
-            this._overlayRef.dispose();
-            this._overlayRef = null;
-        }
-        this._removeListeners();
-        this.toggletipClose.emit();
-    }
-    _createOverlay() {
-        const overlay = this._overlayService.create();
-        return overlay;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ToggletipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: ToggletipDirective, isStandalone: true, selector: "[etToggletip]", inputs: { toggletip: ["etToggletip", "toggletip"], showToggletip: "showToggletip", placement: "placement" }, outputs: { toggletipClose: "toggletipClose" }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: ToggletipDirective, isStandalone: true, selector: "[etToggletip]", inputs: { toggletip: ["etToggletip", "toggletip"], showToggletip: "showToggletip" }, outputs: { toggletipClose: "toggletipClose" }, providers: [
             {
                 provide: TOGGLETIP_DIRECTIVE,
                 useExisting: ToggletipDirective,
             },
-        ], ngImport: i0 }); }
+        ], hostDirectives: [{ directive: i2.AnimatedOverlayDirective, inputs: ["placement", "placement"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ToggletipDirective, decorators: [{
             type: Directive,
@@ -5729,14 +5660,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                             useExisting: ToggletipDirective,
                         },
                     ],
+                    hostDirectives: [{ directive: AnimatedOverlayDirective, inputs: ['placement'] }],
                 }]
-        }], propDecorators: { toggletip: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { toggletip: [{
                 type: Input,
                 args: ['etToggletip']
             }], showToggletip: [{
                 type: Input
-            }], placement: [{
-                type: Input
             }], toggletipClose: [{
                 type: Output
             }] } });
@@ -5820,28 +5750,6 @@ const provideTooltipConfig = (config = {}) => {
 
 const TOOLTIP_DIRECTIVE = new InjectionToken('TOOLTIP_DIRECTIVE');
 class TooltipDirective {
-    constructor() {
-        this._defaultConfig = inject(TOOLTIP_CONFIG, { optional: true }) ?? createTooltipConfig();
-        this._tooltip = null;
-        this.placement = this._defaultConfig.placement;
-        this._tooltipAriaDescription = null;
-        this._lastTooltipText = null;
-        this._hostElementRef = inject(ElementRef);
-        this._viewContainerRef = inject(ViewContainerRef);
-        this._overlayService = inject(Overlay);
-        this._ariaDescriberService = inject(AriaDescriber);
-        this._focusVisibleService = inject(FocusVisibleService);
-        this._injector = inject(Injector);
-        this._zone = inject(NgZone);
-        this._overlayRef = null;
-        this._portal = null;
-        this._tooltipRef = null;
-        this._popper = null;
-        this._willMount = true;
-        this._hasFocus = false;
-        this._hasHover = false;
-        this._listenerSubscriptions = [];
-    }
     get tooltip() {
         return this._tooltip;
     }
@@ -5862,61 +5770,75 @@ class TooltipDirective {
         this._tooltipAriaDescription = v;
         this._updateAriaDescription();
     }
-    get _isMounted() {
-        return this._overlayRef !== null;
+    constructor() {
+        this._defaultConfig = inject(TOOLTIP_CONFIG, { optional: true }) ?? createTooltipConfig();
+        this._animatedOverlay = inject(AnimatedOverlayDirective);
+        this._tooltip = null;
+        this._tooltipAriaDescription = null;
+        this._lastTooltipText = null;
+        this._elementRef = inject(ElementRef);
+        this._ariaDescriberService = inject(AriaDescriber);
+        this._focusVisibleService = inject(FocusVisibleService);
+        this._willMount = true;
+        this._hasFocus = false;
+        this._hasHover = false;
+        this._listenerSubscriptions = [];
+        this._animatedOverlay.placement = this._defaultConfig.placement;
+        this._animatedOverlay.offset = this._defaultConfig.offset;
+        this._animatedOverlay.arrowPadding = this._defaultConfig.arrowPadding;
     }
     ngOnDestroy() {
-        this._unmountTooltip();
+        this._animatedOverlay._destroy();
         this._removeListeners();
     }
     _updateAriaDescription() {
         const tooltipText = this._getTooltipText();
         if (tooltipText) {
-            this._ariaDescriberService.describe(this._hostElementRef.nativeElement, tooltipText);
+            this._ariaDescriberService.describe(this._elementRef.nativeElement, tooltipText);
         }
         else if (this._lastTooltipText) {
-            this._ariaDescriberService.removeDescription(this._hostElementRef.nativeElement, this._lastTooltipText);
+            this._ariaDescriberService.removeDescription(this._elementRef.nativeElement, this._lastTooltipText);
         }
         this._lastTooltipText = tooltipText;
     }
     _addListeners() {
-        const mouseEnterSub = fromEvent(this._hostElementRef.nativeElement, 'mouseenter')
+        const mouseEnterSub = fromEvent(this._elementRef.nativeElement, 'mouseenter')
             .pipe(tap(() => {
             this._willMount = true;
             this._hasHover = true;
         }), debounceTime(200))
             .subscribe(() => {
-            if (!this._willMount || this._isMounted) {
+            if (!this._willMount || this._animatedOverlay.isMounted) {
                 return;
             }
             this._mountTooltip();
         });
-        const focusSub = fromEvent(this._hostElementRef.nativeElement, 'focus').subscribe(() => {
+        const focusSub = fromEvent(this._elementRef.nativeElement, 'focus').subscribe(() => {
             if (!this._focusVisibleService.isFocusVisible) {
                 return;
             }
             this._hasFocus = true;
-            if (this._isMounted) {
+            if (this._animatedOverlay.isMounted) {
                 return;
             }
             this._mountTooltip();
         });
-        const mouseLeaveSub = fromEvent(this._hostElementRef.nativeElement, 'mouseleave').subscribe(() => {
+        const mouseLeaveSub = fromEvent(this._elementRef.nativeElement, 'mouseleave').subscribe(() => {
             this._hasHover = false;
             this._willMount = false;
-            if (this._isMounted && !this._hasFocus) {
-                this._animateUnmount();
+            if (this._animatedOverlay.isMounted && !this._hasFocus) {
+                this._animatedOverlay.unmount();
             }
         });
-        const blurSub = fromEvent(this._hostElementRef.nativeElement, 'blur').subscribe(() => {
+        const blurSub = fromEvent(this._elementRef.nativeElement, 'blur').subscribe(() => {
             this._hasFocus = false;
             this._willMount = false;
-            if (this._isMounted && !this._hasHover) {
-                this._animateUnmount();
+            if (this._animatedOverlay.isMounted && !this._hasHover) {
+                this._animatedOverlay.unmount();
             }
         });
         const keyupEscSub = fromEvent(document, 'keyup')
-            .pipe(filter((e) => e.key === 'Escape'), filter(() => this._isMounted), tap(() => this._animateUnmount()))
+            .pipe(filter((e) => e.key === 'Escape'), filter(() => this._animatedOverlay.isMounted), tap(() => this._animatedOverlay.unmount()))
             .subscribe();
         this._listenerSubscriptions.push(mouseEnterSub, mouseLeaveSub, focusSub, blurSub, keyupEscSub);
     }
@@ -5925,9 +5847,8 @@ class TooltipDirective {
         this._listenerSubscriptions.length = 0;
     }
     _mountTooltip() {
-        this._overlayRef = this._createOverlay();
-        const injector = Injector.create({
-            parent: this._injector,
+        this._animatedOverlay.mount({
+            component: TooltipComponent,
             providers: [
                 {
                     provide: TOOLTIP_CONFIG,
@@ -5946,70 +5867,6 @@ class TooltipDirective {
                 ],
             ],
         });
-        this._portal = this._portal ?? new ComponentPortal(TooltipComponent, this._viewContainerRef, injector);
-        this._tooltipRef = this._overlayRef.attach(this._portal);
-        this._tooltipRef.instance._markForCheck();
-        this._zone.runOutsideAngular(() => {
-            if (!this._tooltipRef) {
-                return;
-            }
-            this._popper = createPopper(this._hostElementRef.nativeElement, this._tooltipRef.location.nativeElement, {
-                placement: this.placement,
-                modifiers: [
-                    ...(this._defaultConfig.offset
-                        ? [
-                            {
-                                name: 'offset',
-                                options: {
-                                    offset: this._defaultConfig.offset,
-                                },
-                            },
-                        ]
-                        : []),
-                    ...(this._defaultConfig.arrowPadding
-                        ? [
-                            {
-                                name: 'arrow',
-                                options: {
-                                    padding: this._defaultConfig.arrowPadding,
-                                },
-                            },
-                        ]
-                        : []),
-                ],
-            });
-            // We need to wait for the tooltip content to be rendered
-            nextFrame(() => {
-                if (!this._tooltipRef) {
-                    return;
-                }
-                this._popper?.update();
-                this._tooltipRef.instance._animatedLifecycle?.enter();
-            });
-        });
-    }
-    _animateUnmount() {
-        if (!this._tooltipRef) {
-            return;
-        }
-        this._tooltipRef.instance._animatedLifecycle?.leave();
-        this._tooltipRef.instance._animatedLifecycle?.state$
-            .pipe(filter((s) => s === 'left'), take(1))
-            .subscribe(() => this._unmountTooltip());
-    }
-    _unmountTooltip() {
-        this._zone.runOutsideAngular(() => {
-            this._popper?.destroy();
-            this._popper = null;
-        });
-        if (this._overlayRef) {
-            this._overlayRef.dispose();
-            this._overlayRef = null;
-        }
-    }
-    _createOverlay() {
-        const overlay = this._overlayService.create();
-        return overlay;
     }
     _getTooltipText() {
         return this._tooltipAriaDescription
@@ -6019,12 +5876,12 @@ class TooltipDirective {
                 : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: TooltipDirective, isStandalone: true, selector: "[etTooltip]", inputs: { tooltip: ["etTooltip", "tooltip"], placement: "placement", tooltipAriaDescription: "tooltipAriaDescription" }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: TooltipDirective, isStandalone: true, selector: "[etTooltip]", inputs: { tooltip: ["etTooltip", "tooltip"], tooltipAriaDescription: "tooltipAriaDescription" }, providers: [
             {
                 provide: TOOLTIP_DIRECTIVE,
                 useExisting: TooltipDirective,
             },
-        ], ngImport: i0 }); }
+        ], hostDirectives: [{ directive: i2.AnimatedOverlayDirective, inputs: ["placement", "placement"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
@@ -6037,12 +5894,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                             useExisting: TooltipDirective,
                         },
                     ],
+                    hostDirectives: [{ directive: AnimatedOverlayDirective, inputs: ['placement'] }],
                 }]
-        }], propDecorators: { tooltip: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { tooltip: [{
                 type: Input,
                 args: ['etTooltip']
-            }], placement: [{
-                type: Input
             }], tooltipAriaDescription: [{
                 type: Input
             }] } });
@@ -6116,7 +5972,7 @@ class DynamicOverlayService {
         }
         return this._bottomSheetService.open(componentOrTemplateRef, config.bottomSheetConfig);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: DynamicOverlayService, deps: [{ token: DialogService }, { token: BottomSheetService }, { token: i3.ViewportService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: DynamicOverlayService, deps: [{ token: DialogService }, { token: BottomSheetService }, { token: i2.ViewportService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: DynamicOverlayService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: DynamicOverlayService, decorators: [{
@@ -6124,7 +5980,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: DialogService }, { type: BottomSheetService }, { type: i3.ViewportService }]; } });
+        }], ctorParameters: function () { return [{ type: DialogService }, { type: BottomSheetService }, { type: i2.ViewportService }]; } });
 
 class PaginationLinkDirective {
     constructor() {
@@ -6577,7 +6433,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
 
 class ScrollableComponent {
     constructor() {
-        this._destroy$ = inject(DestroyService, { host: true }).destroy$;
+        this._destroy$ = createDestroy();
         this._renderer = inject(Renderer2);
         this._elementRef = inject(ElementRef);
         this.itemSize = 'auto';
@@ -6587,6 +6443,9 @@ class ScrollableComponent {
         this._renderScrollbars = false;
         this._stickyButtons = false;
         this._cursorDragScroll = true;
+        this._activeElementScrollMargin = 40;
+        this._disableActiveElementScrolling = false;
+        this.activeElements = null;
         this.scrollState$ = new BehaviorSubject(null);
     }
     get renderMasks() {
@@ -6619,6 +6478,18 @@ class ScrollableComponent {
     set cursorDragScroll(value) {
         this._cursorDragScroll = coerceBooleanProperty(value);
     }
+    get activeElementScrollMargin() {
+        return this._activeElementScrollMargin;
+    }
+    set activeElementScrollMargin(value) {
+        this._activeElementScrollMargin = coerceNumberProperty(value);
+    }
+    get disableActiveElementScrolling() {
+        return this._disableActiveElementScrolling;
+    }
+    set disableActiveElementScrolling(value) {
+        this._disableActiveElementScrolling = coerceBooleanProperty(value);
+    }
     ngOnInit() {
         this.scrollState$
             .pipe(tap((state) => {
@@ -6632,6 +6503,31 @@ class ScrollableComponent {
         }), takeUntil(this._destroy$))
             .subscribe();
     }
+    ngAfterContentInit() {
+        if (!this.activeElements) {
+            return;
+        }
+        this.activeElements.changes
+            .pipe(startWith(this.activeElements), tap((activeElements) => {
+            if (this.disableActiveElementScrolling) {
+                return;
+            }
+            const firstActive = activeElements
+                .filter((a) => !!a)
+                .find((a) => a.isActiveElement);
+            if (!firstActive) {
+                return;
+            }
+            scrollToElement({
+                behavior: 'auto',
+                container: this.scrollable.nativeElement,
+                element: firstActive.elementRef.nativeElement,
+                scrollInlineMargin: this.direction === 'horizontal' ? this.activeElementScrollMargin : 0,
+                scrollBlockMargin: this.direction === 'horizontal' ? 0 : this.activeElementScrollMargin,
+            });
+        }), takeUntil(this._destroy$))
+            .subscribe();
+    }
     _scrollStateChanged(scrollState) {
         if (equal(this.scrollState$.value, scrollState)) {
             return;
@@ -6655,13 +6551,13 @@ class ScrollableComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ScrollableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: ScrollableComponent, isStandalone: true, selector: "et-scrollable", inputs: { itemSize: "itemSize", direction: "direction", scrollableRole: "scrollableRole", scrollableClass: "scrollableClass", renderMasks: "renderMasks", renderButtons: "renderButtons", renderScrollbars: "renderScrollbars", stickyButtons: "stickyButtons", cursorDragScroll: "cursorDragScroll" }, host: { properties: { "attr.item-size": "this.itemSize", "attr.direction": "this.direction", "attr.render-scrollbars": "this.renderScrollbars", "attr.sticky-buttons": "this.stickyButtons" }, classAttribute: "et-scrollable" }, providers: [DestroyService], viewQueries: [{ propertyName: "scrollable", first: true, predicate: ["scrollable"], descendants: true, static: true }], ngImport: i0, template: "<div\n  #scrollable\n  [attr.role]=\"scrollableRole ?? undefined\"\n  [ngClass]=\"scrollableClass\"\n  [etCursorDragScroll]=\"cursorDragScroll\"\n  (etObserveScrollState)=\"_scrollStateChanged($event)\"\n  class=\"et-scrollable-container\"\n>\n  <ng-content />\n</div>\n\n<div *ngIf=\"renderMasks\" class=\"et-scrollable-masks\">\n  <div class=\"et-scrollable-mask et-scrollable-mask--start\"></div>\n  <div class=\"et-scrollable-mask et-scrollable-mask--end\"></div>\n</div>\n\n<div *ngIf=\"renderButtons\" class=\"et-scrollable-buttons\">\n  <button\n    (click)=\"scrollOneContainerSizeToStart()\"\n    class=\"et-scrollable-button et-scrollable-button--start\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n  >\n    <et-chevron-icon />\n  </button>\n  <button\n    (click)=\"scrollOneContainerSizeToEnd()\"\n    class=\"et-scrollable-button et-scrollable-button--end\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n  >\n    <et-chevron-icon />\n  </button>\n</div>\n", styles: [".et-scrollable{--mask: #121212 0, transparent 100%;--mask-size: 25px;--_auto-size: min-content;--_flow: column;display:grid;position:relative}.et-scrollable[item-size=same]{--auto-size: 1fr}.et-scrollable[render-scrollbars=false] .et-scrollable-container{scrollbar-width:none}.et-scrollable[render-scrollbars=false] .et-scrollable-container::-webkit-scrollbar{display:none}.et-scrollable[direction=horizontal] .et-scrollable-container{grid-auto-columns:var(--_auto-size)}.et-scrollable[direction=horizontal] .et-scrollable-mask,.et-scrollable[direction=horizontal] .et-scrollable-button{inline-size:var(--mask-size);block-size:100%}.et-scrollable[direction=horizontal] .et-scrollable-mask--start,.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:0;inset-inline:0 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--end,.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:0;inset-inline:calc(100% - 40px) 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--start{background:linear-gradient(to right,var(--mask))}.et-scrollable[direction=horizontal] .et-scrollable-mask--end{background:linear-gradient(to left,var(--mask));inset-inline:calc(100% - var(--mask-size)) 100%}.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:calc(50% - 20px);transform:rotate(-90deg)}.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:calc(50% - 20px);transform:rotate(90deg)}.et-scrollable[direction=vertical]{--_flow: row}.et-scrollable[direction=vertical] .et-scrollable-container{grid-auto-rows:var(--_auto-size)}.et-scrollable[direction=vertical] .et-scrollable-mask,.et-scrollable[direction=vertical] .et-scrollable-button{block-size:var(--mask-size);inline-size:100%}.et-scrollable[direction=vertical] .et-scrollable-mask--start,.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-block-start:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--end,.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-block-end:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--start{background:linear-gradient(to bottom,var(--mask))}.et-scrollable[direction=vertical] .et-scrollable-mask--end{background:linear-gradient(to top,var(--mask))}.et-scrollable[at-start=false] .et-scrollable-masks .et-scrollable-mask--start,.et-scrollable[at-start=false] .et-scrollable-buttons .et-scrollable-button--start{opacity:1}.et-scrollable[at-start=false] .et-scrollable-buttons .et-scrollable-button--start{pointer-events:all}.et-scrollable[at-end=false] .et-scrollable-masks .et-scrollable-mask--end,.et-scrollable[at-end=false] .et-scrollable-buttons .et-scrollable-button--end{opacity:1}.et-scrollable[at-end=false] .et-scrollable-buttons .et-scrollable-button--end{pointer-events:all}.et-scrollable .et-scrollable-container{display:grid;grid-auto-flow:var(--_flow);overflow:auto;grid-row:1/1;grid-column:1/1}.et-scrollable .et-scrollable-masks,.et-scrollable .et-scrollable-buttons{grid-row:1/1;grid-column:1/1;pointer-events:none}.et-scrollable .et-scrollable-masks .et-scrollable-mask,.et-scrollable .et-scrollable-masks .et-scrollable-button,.et-scrollable .et-scrollable-buttons .et-scrollable-mask,.et-scrollable .et-scrollable-buttons .et-scrollable-button{position:absolute;opacity:0;transition:opacity .3s var(--ease-5)}.et-scrollable .et-scrollable-buttons .et-scrollable-button{background:transparent;border:none;padding:12px;inline-size:40px;block-size:40px;border-radius:4px;cursor:pointer}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-chevron-icon{pointer-events:none}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--start{inset-inline:0 0}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--end{inset-inline:calc(100% - 40px) 0}.et-scrollable[sticky-buttons=true] .et-scrollable-buttons{margin-block:10%}.et-scrollable[sticky-buttons=true] .et-scrollable-buttons .et-scrollable-button{position:sticky}\n"], dependencies: [{ kind: "directive", type: CursorDragScrollDirective, selector: "[etCursorDragScroll]", inputs: ["etCursorDragScroll"], exportAs: ["etCursorDragScroll"] }, { kind: "directive", type: ObserveScrollStateDirective, selector: "[etObserveScrollState]", inputs: ["observerRootMargin", "observerThreshold"], outputs: ["etObserveScrollState"], exportAs: ["etObserveScrollState"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChevronIconComponent, selector: "et-chevron-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: ScrollableComponent, isStandalone: true, selector: "et-scrollable", inputs: { itemSize: "itemSize", direction: "direction", scrollableRole: "scrollableRole", scrollableClass: "scrollableClass", renderMasks: "renderMasks", renderButtons: "renderButtons", renderScrollbars: "renderScrollbars", stickyButtons: "stickyButtons", cursorDragScroll: "cursorDragScroll", activeElementScrollMargin: "activeElementScrollMargin", disableActiveElementScrolling: "disableActiveElementScrolling" }, host: { properties: { "attr.item-size": "this.itemSize", "attr.direction": "this.direction", "attr.render-scrollbars": "this.renderScrollbars", "attr.sticky-buttons": "this.stickyButtons" }, classAttribute: "et-scrollable" }, queries: [{ propertyName: "activeElements", predicate: IS_ACTIVE_ELEMENT, descendants: true }], viewQueries: [{ propertyName: "scrollable", first: true, predicate: ["scrollable"], descendants: true, static: true }], ngImport: i0, template: "<div\n  #scrollable\n  [attr.role]=\"scrollableRole ?? undefined\"\n  [ngClass]=\"scrollableClass\"\n  [etCursorDragScroll]=\"cursorDragScroll\"\n  (etObserveScrollState)=\"_scrollStateChanged($event)\"\n  class=\"et-scrollable-container\"\n>\n  <ng-content />\n</div>\n\n<div *ngIf=\"renderMasks\" class=\"et-scrollable-masks\">\n  <div class=\"et-scrollable-mask et-scrollable-mask--start\"></div>\n  <div class=\"et-scrollable-mask et-scrollable-mask--end\"></div>\n</div>\n\n<div *ngIf=\"renderButtons\" class=\"et-scrollable-buttons\">\n  <button\n    (click)=\"scrollOneContainerSizeToStart()\"\n    class=\"et-scrollable-button et-scrollable-button--start\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n  >\n    <et-chevron-icon />\n  </button>\n  <button\n    (click)=\"scrollOneContainerSizeToEnd()\"\n    class=\"et-scrollable-button et-scrollable-button--end\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n  >\n    <et-chevron-icon />\n  </button>\n</div>\n", styles: [".et-scrollable{--mask: #121212 0, transparent 100%;--mask-size: 25px;--_auto-size: min-content;--_flow: column;display:grid;position:relative}.et-scrollable[item-size=same]{--auto-size: 1fr}.et-scrollable[render-scrollbars=false] .et-scrollable-container{scrollbar-width:none}.et-scrollable[render-scrollbars=false] .et-scrollable-container::-webkit-scrollbar{display:none}.et-scrollable[direction=horizontal] .et-scrollable-container{grid-auto-columns:var(--_auto-size)}.et-scrollable[direction=horizontal] .et-scrollable-mask,.et-scrollable[direction=horizontal] .et-scrollable-button{inline-size:var(--mask-size);block-size:100%}.et-scrollable[direction=horizontal] .et-scrollable-mask--start,.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:0;inset-inline:0 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--end,.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:0;inset-inline:calc(100% - 40px) 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--start{background:linear-gradient(to right,var(--mask))}.et-scrollable[direction=horizontal] .et-scrollable-mask--end{background:linear-gradient(to left,var(--mask));inset-inline:calc(100% - var(--mask-size)) 100%}.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:calc(50% - 20px);transform:rotate(-90deg)}.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:calc(50% - 20px);transform:rotate(90deg)}.et-scrollable[direction=vertical]{--_flow: row}.et-scrollable[direction=vertical] .et-scrollable-container{grid-auto-rows:var(--_auto-size)}.et-scrollable[direction=vertical] .et-scrollable-mask,.et-scrollable[direction=vertical] .et-scrollable-button{block-size:var(--mask-size);inline-size:100%}.et-scrollable[direction=vertical] .et-scrollable-mask--start,.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-block-start:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--end,.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-block-end:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--start{background:linear-gradient(to bottom,var(--mask))}.et-scrollable[direction=vertical] .et-scrollable-mask--end{background:linear-gradient(to top,var(--mask))}.et-scrollable[at-start=false] .et-scrollable-masks .et-scrollable-mask--start,.et-scrollable[at-start=false] .et-scrollable-buttons .et-scrollable-button--start{opacity:1}.et-scrollable[at-start=false] .et-scrollable-buttons .et-scrollable-button--start{pointer-events:all}.et-scrollable[at-end=false] .et-scrollable-masks .et-scrollable-mask--end,.et-scrollable[at-end=false] .et-scrollable-buttons .et-scrollable-button--end{opacity:1}.et-scrollable[at-end=false] .et-scrollable-buttons .et-scrollable-button--end{pointer-events:all}.et-scrollable .et-scrollable-container{display:grid;grid-auto-flow:var(--_flow);overflow:auto;grid-row:1/1;grid-column:1/1}.et-scrollable .et-scrollable-masks,.et-scrollable .et-scrollable-buttons{grid-row:1/1;grid-column:1/1;pointer-events:none}.et-scrollable .et-scrollable-masks .et-scrollable-mask,.et-scrollable .et-scrollable-masks .et-scrollable-button,.et-scrollable .et-scrollable-buttons .et-scrollable-mask,.et-scrollable .et-scrollable-buttons .et-scrollable-button{position:absolute;opacity:0;transition:opacity .3s var(--ease-5)}.et-scrollable .et-scrollable-buttons .et-scrollable-button{background:transparent;border:none;padding:12px;inline-size:40px;block-size:40px;border-radius:4px;cursor:pointer}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-chevron-icon{pointer-events:none}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--start{inset-inline:0 0}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--end{inset-inline:calc(100% - 40px) 0}.et-scrollable[sticky-buttons=true] .et-scrollable-buttons{margin-block:10%}.et-scrollable[sticky-buttons=true] .et-scrollable-buttons .et-scrollable-button{position:sticky}\n"], dependencies: [{ kind: "directive", type: CursorDragScrollDirective, selector: "[etCursorDragScroll]", inputs: ["etCursorDragScroll"], exportAs: ["etCursorDragScroll"] }, { kind: "directive", type: ObserveScrollStateDirective, selector: "[etObserveScrollState]", inputs: ["observerRootMargin", "observerThreshold"], outputs: ["etObserveScrollState"], exportAs: ["etObserveScrollState"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChevronIconComponent, selector: "et-chevron-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ScrollableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-scrollable', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CursorDragScrollDirective, ObserveScrollStateDirective, NgClass, NgIf, LetDirective, ChevronIconComponent], host: {
                         class: 'et-scrollable',
-                    }, providers: [DestroyService], template: "<div\n  #scrollable\n  [attr.role]=\"scrollableRole ?? undefined\"\n  [ngClass]=\"scrollableClass\"\n  [etCursorDragScroll]=\"cursorDragScroll\"\n  (etObserveScrollState)=\"_scrollStateChanged($event)\"\n  class=\"et-scrollable-container\"\n>\n  <ng-content />\n</div>\n\n<div *ngIf=\"renderMasks\" class=\"et-scrollable-masks\">\n  <div class=\"et-scrollable-mask et-scrollable-mask--start\"></div>\n  <div class=\"et-scrollable-mask et-scrollable-mask--end\"></div>\n</div>\n\n<div *ngIf=\"renderButtons\" class=\"et-scrollable-buttons\">\n  <button\n    (click)=\"scrollOneContainerSizeToStart()\"\n    class=\"et-scrollable-button et-scrollable-button--start\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n  >\n    <et-chevron-icon />\n  </button>\n  <button\n    (click)=\"scrollOneContainerSizeToEnd()\"\n    class=\"et-scrollable-button et-scrollable-button--end\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n  >\n    <et-chevron-icon />\n  </button>\n</div>\n", styles: [".et-scrollable{--mask: #121212 0, transparent 100%;--mask-size: 25px;--_auto-size: min-content;--_flow: column;display:grid;position:relative}.et-scrollable[item-size=same]{--auto-size: 1fr}.et-scrollable[render-scrollbars=false] .et-scrollable-container{scrollbar-width:none}.et-scrollable[render-scrollbars=false] .et-scrollable-container::-webkit-scrollbar{display:none}.et-scrollable[direction=horizontal] .et-scrollable-container{grid-auto-columns:var(--_auto-size)}.et-scrollable[direction=horizontal] .et-scrollable-mask,.et-scrollable[direction=horizontal] .et-scrollable-button{inline-size:var(--mask-size);block-size:100%}.et-scrollable[direction=horizontal] .et-scrollable-mask--start,.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:0;inset-inline:0 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--end,.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:0;inset-inline:calc(100% - 40px) 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--start{background:linear-gradient(to right,var(--mask))}.et-scrollable[direction=horizontal] .et-scrollable-mask--end{background:linear-gradient(to left,var(--mask));inset-inline:calc(100% - var(--mask-size)) 100%}.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:calc(50% - 20px);transform:rotate(-90deg)}.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:calc(50% - 20px);transform:rotate(90deg)}.et-scrollable[direction=vertical]{--_flow: row}.et-scrollable[direction=vertical] .et-scrollable-container{grid-auto-rows:var(--_auto-size)}.et-scrollable[direction=vertical] .et-scrollable-mask,.et-scrollable[direction=vertical] .et-scrollable-button{block-size:var(--mask-size);inline-size:100%}.et-scrollable[direction=vertical] .et-scrollable-mask--start,.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-block-start:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--end,.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-block-end:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--start{background:linear-gradient(to bottom,var(--mask))}.et-scrollable[direction=vertical] .et-scrollable-mask--end{background:linear-gradient(to top,var(--mask))}.et-scrollable[at-start=false] .et-scrollable-masks .et-scrollable-mask--start,.et-scrollable[at-start=false] .et-scrollable-buttons .et-scrollable-button--start{opacity:1}.et-scrollable[at-start=false] .et-scrollable-buttons .et-scrollable-button--start{pointer-events:all}.et-scrollable[at-end=false] .et-scrollable-masks .et-scrollable-mask--end,.et-scrollable[at-end=false] .et-scrollable-buttons .et-scrollable-button--end{opacity:1}.et-scrollable[at-end=false] .et-scrollable-buttons .et-scrollable-button--end{pointer-events:all}.et-scrollable .et-scrollable-container{display:grid;grid-auto-flow:var(--_flow);overflow:auto;grid-row:1/1;grid-column:1/1}.et-scrollable .et-scrollable-masks,.et-scrollable .et-scrollable-buttons{grid-row:1/1;grid-column:1/1;pointer-events:none}.et-scrollable .et-scrollable-masks .et-scrollable-mask,.et-scrollable .et-scrollable-masks .et-scrollable-button,.et-scrollable .et-scrollable-buttons .et-scrollable-mask,.et-scrollable .et-scrollable-buttons .et-scrollable-button{position:absolute;opacity:0;transition:opacity .3s var(--ease-5)}.et-scrollable .et-scrollable-buttons .et-scrollable-button{background:transparent;border:none;padding:12px;inline-size:40px;block-size:40px;border-radius:4px;cursor:pointer}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-chevron-icon{pointer-events:none}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--start{inset-inline:0 0}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--end{inset-inline:calc(100% - 40px) 0}.et-scrollable[sticky-buttons=true] .et-scrollable-buttons{margin-block:10%}.et-scrollable[sticky-buttons=true] .et-scrollable-buttons .et-scrollable-button{position:sticky}\n"] }]
+                    }, template: "<div\n  #scrollable\n  [attr.role]=\"scrollableRole ?? undefined\"\n  [ngClass]=\"scrollableClass\"\n  [etCursorDragScroll]=\"cursorDragScroll\"\n  (etObserveScrollState)=\"_scrollStateChanged($event)\"\n  class=\"et-scrollable-container\"\n>\n  <ng-content />\n</div>\n\n<div *ngIf=\"renderMasks\" class=\"et-scrollable-masks\">\n  <div class=\"et-scrollable-mask et-scrollable-mask--start\"></div>\n  <div class=\"et-scrollable-mask et-scrollable-mask--end\"></div>\n</div>\n\n<div *ngIf=\"renderButtons\" class=\"et-scrollable-buttons\">\n  <button\n    (click)=\"scrollOneContainerSizeToStart()\"\n    class=\"et-scrollable-button et-scrollable-button--start\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n  >\n    <et-chevron-icon />\n  </button>\n  <button\n    (click)=\"scrollOneContainerSizeToEnd()\"\n    class=\"et-scrollable-button et-scrollable-button--end\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n  >\n    <et-chevron-icon />\n  </button>\n</div>\n", styles: [".et-scrollable{--mask: #121212 0, transparent 100%;--mask-size: 25px;--_auto-size: min-content;--_flow: column;display:grid;position:relative}.et-scrollable[item-size=same]{--auto-size: 1fr}.et-scrollable[render-scrollbars=false] .et-scrollable-container{scrollbar-width:none}.et-scrollable[render-scrollbars=false] .et-scrollable-container::-webkit-scrollbar{display:none}.et-scrollable[direction=horizontal] .et-scrollable-container{grid-auto-columns:var(--_auto-size)}.et-scrollable[direction=horizontal] .et-scrollable-mask,.et-scrollable[direction=horizontal] .et-scrollable-button{inline-size:var(--mask-size);block-size:100%}.et-scrollable[direction=horizontal] .et-scrollable-mask--start,.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:0;inset-inline:0 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--end,.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:0;inset-inline:calc(100% - 40px) 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--start{background:linear-gradient(to right,var(--mask))}.et-scrollable[direction=horizontal] .et-scrollable-mask--end{background:linear-gradient(to left,var(--mask));inset-inline:calc(100% - var(--mask-size)) 100%}.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:calc(50% - 20px);transform:rotate(-90deg)}.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:calc(50% - 20px);transform:rotate(90deg)}.et-scrollable[direction=vertical]{--_flow: row}.et-scrollable[direction=vertical] .et-scrollable-container{grid-auto-rows:var(--_auto-size)}.et-scrollable[direction=vertical] .et-scrollable-mask,.et-scrollable[direction=vertical] .et-scrollable-button{block-size:var(--mask-size);inline-size:100%}.et-scrollable[direction=vertical] .et-scrollable-mask--start,.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-block-start:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--end,.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-block-end:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--start{background:linear-gradient(to bottom,var(--mask))}.et-scrollable[direction=vertical] .et-scrollable-mask--end{background:linear-gradient(to top,var(--mask))}.et-scrollable[at-start=false] .et-scrollable-masks .et-scrollable-mask--start,.et-scrollable[at-start=false] .et-scrollable-buttons .et-scrollable-button--start{opacity:1}.et-scrollable[at-start=false] .et-scrollable-buttons .et-scrollable-button--start{pointer-events:all}.et-scrollable[at-end=false] .et-scrollable-masks .et-scrollable-mask--end,.et-scrollable[at-end=false] .et-scrollable-buttons .et-scrollable-button--end{opacity:1}.et-scrollable[at-end=false] .et-scrollable-buttons .et-scrollable-button--end{pointer-events:all}.et-scrollable .et-scrollable-container{display:grid;grid-auto-flow:var(--_flow);overflow:auto;grid-row:1/1;grid-column:1/1}.et-scrollable .et-scrollable-masks,.et-scrollable .et-scrollable-buttons{grid-row:1/1;grid-column:1/1;pointer-events:none}.et-scrollable .et-scrollable-masks .et-scrollable-mask,.et-scrollable .et-scrollable-masks .et-scrollable-button,.et-scrollable .et-scrollable-buttons .et-scrollable-mask,.et-scrollable .et-scrollable-buttons .et-scrollable-button{position:absolute;opacity:0;transition:opacity .3s var(--ease-5)}.et-scrollable .et-scrollable-buttons .et-scrollable-button{background:transparent;border:none;padding:12px;inline-size:40px;block-size:40px;border-radius:4px;cursor:pointer}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-chevron-icon{pointer-events:none}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--start{inset-inline:0 0}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--end{inset-inline:calc(100% - 40px) 0}.et-scrollable[sticky-buttons=true] .et-scrollable-buttons{margin-block:10%}.et-scrollable[sticky-buttons=true] .et-scrollable-buttons .et-scrollable-button{position:sticky}\n"] }]
         }], propDecorators: { itemSize: [{
                 type: Input
             }, {
@@ -6692,9 +6588,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 args: ['attr.sticky-buttons']
             }], cursorDragScroll: [{
                 type: Input
+            }], activeElementScrollMargin: [{
+                type: Input
+            }], disableActiveElementScrolling: [{
+                type: Input
             }], scrollable: [{
                 type: ViewChild,
                 args: ['scrollable', { static: true }]
+            }], activeElements: [{
+                type: ContentChildren,
+                args: [IS_ACTIVE_ELEMENT, { descendants: true }]
             }] } });
 
 const ScrollableImports = [ScrollableComponent];
@@ -7164,7 +7067,7 @@ class TableComponent extends CdkTable {
         this._isShowingTableBusy = shouldShow;
         this._cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: TableComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: 'role', attribute: true }, { token: i1$3.Directionality, optional: true }, { token: DOCUMENT }, { token: i2$1.Platform }, { token: _VIEW_REPEATER_STRATEGY }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i1$4.ViewportRuler }, { token: STICKY_POSITIONING_LISTENER, optional: true, skipSelf: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: TableComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: 'role', attribute: true }, { token: i1$3.Directionality, optional: true }, { token: DOCUMENT }, { token: i2$2.Platform }, { token: _VIEW_REPEATER_STRATEGY }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i1$4.ViewportRuler }, { token: STICKY_POSITIONING_LISTENER, optional: true, skipSelf: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", 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: [
             { provide: CdkTable, useExisting: TableComponent },
             { provide: CDK_TABLE, useExisting: TableComponent },
@@ -7213,7 +7116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 }] }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i2$1.Platform }, { type: undefined, decorators: [{
+                }] }, { type: i2$2.Platform }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [_VIEW_REPEATER_STRATEGY]
                 }] }, { type: i1$2._CoalescedStyleScheduler, decorators: [{
@@ -8155,7 +8058,7 @@ class PaginatedTabHeaderDirective {
         this._ngZone = _ngZone;
         this._scrollDistance = 0;
         this._selectedIndexChanged = false;
-        this._destroy$ = new Subject();
+        this._destroy$ = createDestroy();
         this._stopScrolling = new Subject();
         this._selectedIndex = 0;
         this.itemSize = 'auto';
@@ -8220,8 +8123,6 @@ class PaginatedTabHeaderDirective {
         }
     }
     ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
         this._stopScrolling.complete();
     }
     _handleKeydown(event) {
@@ -8440,7 +8341,7 @@ class InlineTabHeaderComponent extends PaginatedTabHeaderDirective {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: InlineTabHeaderComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$4.ViewportRuler }, { token: i1$3.Directionality, optional: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: InlineTabHeaderComponent, isStandalone: true, selector: "et-inline-tab-header", host: { classAttribute: "et-inline-tab-header" }, queries: [{ propertyName: "_items", predicate: InlineTabLabelWrapperDirective }, { propertyName: "_inkBars", predicate: i0.forwardRef(function () { return ActiveTabUnderlineDirective; }), descendants: true }], viewQueries: [{ propertyName: "_scrollable", first: true, predicate: ScrollableComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<et-scrollable\n  [itemSize]=\"itemSize\"\n  [renderButtons]=\"renderButtons\"\n  [scrollableClass]=\"scrollableClass\"\n  [renderMasks]=\"renderMasks\"\n  [renderScrollbars]=\"renderScrollbars\"\n  (keydown)=\"_handleKeydown($event)\"\n  (contentChanged)=\"_onContentChanges()\"\n>\n  <ng-content />\n</et-scrollable>\n", dependencies: [{ kind: "component", type: ScrollableComponent, selector: "et-scrollable", inputs: ["itemSize", "direction", "scrollableRole", "scrollableClass", "renderMasks", "renderButtons", "renderScrollbars", "stickyButtons", "cursorDragScroll"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: InlineTabHeaderComponent, isStandalone: true, selector: "et-inline-tab-header", host: { classAttribute: "et-inline-tab-header" }, queries: [{ propertyName: "_items", predicate: InlineTabLabelWrapperDirective }, { propertyName: "_inkBars", predicate: i0.forwardRef(function () { return ActiveTabUnderlineDirective; }), descendants: true }], viewQueries: [{ propertyName: "_scrollable", first: true, predicate: ScrollableComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<et-scrollable\n  [itemSize]=\"itemSize\"\n  [renderButtons]=\"renderButtons\"\n  [scrollableClass]=\"scrollableClass\"\n  [renderMasks]=\"renderMasks\"\n  [renderScrollbars]=\"renderScrollbars\"\n  (keydown)=\"_handleKeydown($event)\"\n  (contentChanged)=\"_onContentChanges()\"\n>\n  <ng-content />\n</et-scrollable>\n", dependencies: [{ kind: "component", type: ScrollableComponent, selector: "et-scrollable", inputs: ["itemSize", "direction", "scrollableRole", "scrollableClass", "renderMasks", "renderButtons", "renderScrollbars", "stickyButtons", "cursorDragScroll", "activeElementScrollMargin", "disableActiveElementScrolling"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: InlineTabHeaderComponent, decorators: [{
             type: Component,
@@ -8664,8 +8565,8 @@ class NavTabsComponent extends PaginatedTabHeaderDirective {
     _getRole() {
         return this.tabOutlet ? 'tablist' : this._elementRef.nativeElement.getAttribute('role');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NavTabsComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.Directionality, optional: true }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1$4.ViewportRuler }, { token: i3$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NavTabsComponent, isStandalone: true, selector: "[et-nav-tabs]", inputs: { tabOutlet: "tabOutlet" }, host: { properties: { "attr.role": "this._attrRole" }, classAttribute: "et-nav-tabs" }, queries: [{ propertyName: "_items", predicate: i0.forwardRef(function () { return NavTabLinkComponent; }), descendants: true }, { propertyName: "_inkBars", predicate: i0.forwardRef(function () { return ActiveTabUnderlineDirective; }), descendants: true }], viewQueries: [{ propertyName: "_scrollable", first: true, predicate: ScrollableComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<et-scrollable\n  [itemSize]=\"itemSize\"\n  [renderButtons]=\"renderButtons\"\n  [scrollableClass]=\"scrollableClass\"\n  [renderMasks]=\"renderMasks\"\n  [renderScrollbars]=\"renderScrollbars\"\n  (keydown)=\"_handleKeydown($event)\"\n  (contentChanged)=\"_onContentChanges()\"\n>\n  <ng-content />\n</et-scrollable>\n", dependencies: [{ kind: "component", type: ScrollableComponent, selector: "et-scrollable", inputs: ["itemSize", "direction", "scrollableRole", "scrollableClass", "renderMasks", "renderButtons", "renderScrollbars", "stickyButtons", "cursorDragScroll"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NavTabsComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.Directionality, optional: true }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1$4.ViewportRuler }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NavTabsComponent, isStandalone: true, selector: "[et-nav-tabs]", inputs: { tabOutlet: "tabOutlet" }, host: { properties: { "attr.role": "this._attrRole" }, classAttribute: "et-nav-tabs" }, queries: [{ propertyName: "_items", predicate: i0.forwardRef(function () { return NavTabLinkComponent; }), descendants: true }, { propertyName: "_inkBars", predicate: i0.forwardRef(function () { return ActiveTabUnderlineDirective; }), descendants: true }], viewQueries: [{ propertyName: "_scrollable", first: true, predicate: ScrollableComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<et-scrollable\n  [itemSize]=\"itemSize\"\n  [renderButtons]=\"renderButtons\"\n  [scrollableClass]=\"scrollableClass\"\n  [renderMasks]=\"renderMasks\"\n  [renderScrollbars]=\"renderScrollbars\"\n  (keydown)=\"_handleKeydown($event)\"\n  (contentChanged)=\"_onContentChanges()\"\n>\n  <ng-content />\n</et-scrollable>\n", dependencies: [{ kind: "component", type: ScrollableComponent, selector: "et-scrollable", inputs: ["itemSize", "direction", "scrollableRole", "scrollableClass", "renderMasks", "renderButtons", "renderScrollbars", "stickyButtons", "cursorDragScroll", "activeElementScrollMargin", "disableActiveElementScrolling"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NavTabsComponent, decorators: [{
             type: Component,
@@ -8674,7 +8575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     }, template: "<et-scrollable\n  [itemSize]=\"itemSize\"\n  [renderButtons]=\"renderButtons\"\n  [scrollableClass]=\"scrollableClass\"\n  [renderMasks]=\"renderMasks\"\n  [renderScrollbars]=\"renderScrollbars\"\n  (keydown)=\"_handleKeydown($event)\"\n  (contentChanged)=\"_onContentChanges()\"\n>\n  <ng-content />\n</et-scrollable>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$3.Directionality, decorators: [{
                     type: Optional
-                }] }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1$4.ViewportRuler }, { type: i3$1.Router }]; }, propDecorators: { tabOutlet: [{
+                }] }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1$4.ViewportRuler }, { type: i3.Router }]; }, propDecorators: { tabOutlet: [{
                 type: Input
             }], _items: [{
                 type: ContentChildren,
@@ -8812,7 +8713,7 @@ class NavTabLinkComponent {
     _markForCheck() {
         this._cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NavTabLinkComponent, deps: [{ token: NavTabsComponent }, { token: i0.ElementRef }, { token: 'tabindex', attribute: true }, { token: i1$1.FocusMonitor }, { token: i3$1.Router }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i3$1.RouterLink, optional: true }, { token: i3$1.RouterLink, optional: true }, { token: i3$1.RouterLinkActive, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NavTabLinkComponent, deps: [{ token: NavTabsComponent }, { token: i0.ElementRef }, { token: 'tabindex', attribute: true }, { token: i1$1.FocusMonitor }, { token: i3.Router }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i3.RouterLink, optional: true }, { token: i3.RouterLink, optional: true }, { token: i3.RouterLinkActive, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NavTabLinkComponent, isStandalone: true, selector: "[et-nav-tab-link]", inputs: { tabIndex: "tabIndex", disabled: "disabled", id: "id" }, host: { listeners: { "focus": "_handleFocus()", "keydown": "_handleKeydown($event)" }, properties: { "attr.id": "this.id", "attr.aria-controls": "this._attrAriaControls", "attr.aria-current": "this._attrAriaCurrent", "attr.aria-disabled": "this._attrAriaDisabled", "attr.aria-selected": "this._attrAriaSelected", "attr.tabIndex": "this._attrTabIndex", "attr.role": "this._attrRole" }, classAttribute: "et-nav-tab-link" }, hostDirectives: [{ directive: ActiveTabUnderlineDirective, inputs: ["fitUnderlineToContent", "fitUnderlineToContent"] }], ngImport: i0, template: `
     <span class="et-tab-content">
       <ng-content />
@@ -8837,11 +8738,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
         }], ctorParameters: function () { return [{ type: NavTabsComponent }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Attribute,
                     args: ['tabindex']
-                }] }, { type: i1$1.FocusMonitor }, { type: i3$1.Router }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i3$1.RouterLink, decorators: [{
+                }] }, { type: i1$1.FocusMonitor }, { type: i3.Router }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i3.RouterLink, decorators: [{
                     type: Optional
-                }] }, { type: i3$1.RouterLink, decorators: [{
+                }] }, { type: i3.RouterLink, decorators: [{
                     type: Optional
-                }] }, { type: i3$1.RouterLinkActive, decorators: [{
+                }] }, { type: i3.RouterLinkActive, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { tabIndex: [{
                 type: Input