@ethlete/cdk 5.0.0-next.4 → 5.0.0-next.6

package/fesm2022/ethlete-cdk.mjs

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, TemplateRef, ViewContainerRef, Directive, input, booleanAttribute, computed, isDevMode, model, contentChild, effect, untracked, ChangeDetectionStrategy, ViewEncapsulation, Component, contentChildren, ElementRef, Injector, Input, numberAttribute, DOCUMENT, Injectable, ChangeDetectorRef, signal, forwardRef, ViewChild, ContentChildren, assertInInjectionContext, createComponent, EnvironmentInjector, createEnvironmentInjector, runInInjectionContext, linkedSignal, viewChild, DestroyRef, isSignal, viewChildren, provideEnvironmentInitializer, ApplicationRef, output, ContentChild, ViewChildren, EventEmitter, Output, Optional, SkipSelf, IterableDiffers, ComponentFactoryResolver, NgZone, HostAttributeToken } from '@angular/core';
+import { InjectionToken, inject, TemplateRef, ViewContainerRef, Directive, input, booleanAttribute, computed, isDevMode, model, contentChild, effect, untracked, ChangeDetectionStrategy, ViewEncapsulation, Component, contentChildren, ElementRef, Injector, Input, numberAttribute, DOCUMENT, Injectable, ChangeDetectorRef, signal, forwardRef, ViewChild, ContentChildren, assertInInjectionContext, createComponent, EnvironmentInjector, createEnvironmentInjector, runInInjectionContext, linkedSignal, DestroyRef, isSignal, viewChild, viewChildren, provideEnvironmentInitializer, ApplicationRef, output, ContentChild, ViewChildren, EventEmitter, Output, Optional, SkipSelf, PLATFORM_ID, inputBinding, afterRenderEffect, IterableDiffers, ComponentFactoryResolver, NgZone, HostAttributeToken } from '@angular/core';
 import * as i1 from '@angular/cdk/portal';
 import { CdkPortal, PortalModule, ComponentPortal, CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
 import { DomSanitizer, Title } from '@angular/platform-browser';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import { toObservable, takeUntilDestroyed, toSignal, outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
-import { map, switchMap, combineLatest, pairwise, tap, BehaviorSubject, filter, Subject, Observable, of, takeUntil, startWith, debounceTime, withLatestFrom, take, merge, skipUntil, fromEvent, timer, distinctUntilChanged, from, finalize, skip, takeWhile, shareReplay, skipWhile, catchError, throwError, Subscription } from 'rxjs';
+import { toObservable, takeUntilDestroyed, toSignal, outputFromObservable, outputToObservable, rxResource } from '@angular/core/rxjs-interop';
+import { map, switchMap, combineLatest, pairwise, tap, BehaviorSubject, filter, Subject, Observable, of, takeUntil, startWith, debounceTime, withLatestFrom, take, merge, skipUntil, fromEvent, timer, distinctUntilChanged, EMPTY, from, finalize, skip, takeWhile, shareReplay, skipWhile, catchError, throwError, Subscription } from 'rxjs';
 import { __decorate, __metadata } from 'tslib';
-import { AsyncPipe, NgComponentOutlet, Location, NgTemplateOutlet, NgClass, DOCUMENT as DOCUMENT$1, NgStyle } from '@angular/common';
+import { AsyncPipe, NgComponentOutlet, Location, NgTemplateOutlet, NgClass, DOCUMENT as DOCUMENT$1, isPlatformBrowser, NgStyle } from '@angular/common';
 import * as i1$1 from '@ethlete/core';
-import { createComponentId, injectRenderer, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, AT_LEAST_ONE_REQUIRED, createDestroy, equal, signalHostClasses, signalAttributes, signalHostAttributes, switchQueryListChanges, controlValueSignal, fromNextFrame, elementCanScroll, AnimatedLifecycleDirective, forceReflow, nextFrame, createRootProvider, injectBreakpointObserver, THEME_PROVIDER, ProvideThemeDirective, BOUNDARY_ELEMENT_TOKEN, signalElementScrollState, signalElementIntersection, isElementVisible, provideBoundaryElement, applyHostListener, injectBoundaryElement, ANIMATED_LIFECYCLE_TOKEN, cloneFormGroup, getFormGroupValue, injectQueryParam, injectRoute, AnimatedIfDirective, injectObserveBreakpoint, syncSignal, createDocumentElementSignal, createStaticRootProvider, AnimatedOverlayDirective, setInputSignal, signalElementMutations, signalElementDimensions, createIsRenderedSignal, createCanAnimateSignal, useCursorDragScroll, signalElementChildren, signalClasses, signalHostStyles, signalStyles, getElementScrollCoordinates, injectTemplateRef, signalHostElementScrollState, signalHostElementDimensions, createProvider, previousSignalValue, injectHostElement, signalHostElementIntersection, createFlipAnimation, isObject, getObjectProperty, RuntimeError, KeyPressManager, scrollToElement, ClickOutsideDirective, clamp, injectFocusVisibleTracker, inferMimeType, applyHostListeners, TypedQueryList } from '@ethlete/core';
+import { createComponentId, injectRenderer, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, AT_LEAST_ONE_REQUIRED, createDestroy, equal, signalHostClasses, signalAttributes, signalHostAttributes, switchQueryListChanges, controlValueSignal, fromNextFrame, elementCanScroll, AnimatedLifecycleDirective, forceReflow, nextFrame, createRootProvider, injectBreakpointObserver, THEME_PROVIDER, ProvideThemeDirective, BOUNDARY_ELEMENT_TOKEN, ScrollObserverDirective, signalElementScrollState, ScrollObserverStartDirective, ScrollObserverEndDirective, provideBoundaryElement, applyHostListener, injectBoundaryElement, ANIMATED_LIFECYCLE_TOKEN, cloneFormGroup, getFormGroupValue, injectQueryParam, injectRoute, AnimatedIfDirective, injectObserveBreakpoint, syncSignal, createDocumentElementSignal, createStaticRootProvider, AnimatedOverlayDirective, setInputSignal, typedBreakpointTransform, boolBreakpointTransform, numberBreakpointTransform, signalElementDimensions, createCanAnimateSignal, useCursorDragScroll, signalElementChildren, signalElementIntersection, signalClasses, signalHostStyles, signalStyles, getScrollSnapTarget, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, injectTemplateRef, signalHostElementScrollState, signalHostElementDimensions, createProvider, previousSignalValue, signalHostElementIntersection, injectHostElement, createFlipAnimation, isObject, getObjectProperty, RuntimeError, KeyPressManager, scrollToElement, ClickOutsideDirective, clamp, injectFocusVisibleTracker, inferMimeType, applyHostListeners, TypedQueryList } from '@ethlete/core';
 import * as i1$5 from '@angular/cdk/a11y';
 import { FocusMonitor, FocusKeyManager, AriaDescriber, A11yModule } from '@angular/cdk/a11y';
 import { AutofillMonitor } from '@angular/cdk/text-field';
@@ -19,7 +19,7 @@ import { coerceCssPixelValue, coerceElement, _isNumberValue } from '@angular/cdk
 import { Dialog, DialogConfig, CdkDialogContainer } from '@angular/cdk/dialog';
 import { NoopScrollStrategy, OverlayRef as OverlayRef$1, Overlay } from '@angular/cdk/overlay';
 import * as i1$2 from '@angular/router';
-import { RouterLink, Router, isActive, RouterLinkActive, NavigationEnd } from '@angular/router';
+import { Router, RouterLink, isActive, RouterLinkActive, NavigationEnd } from '@angular/router';
 import { isQueryStateLoading, isQueryStateFailure, queryComputed, switchQueryState, isQueryStateSuccess, extractQuery, QueryDirective, injectInfinityQueryResponseDelay, v2ShouldRetryRequest, parseHttpErrorCodeToTitleEn, parseHttpErrorCodeToTitleDe, parseHttpErrorCodeToMessageEn, parseHttpErrorCodeToMessageDe, isClassValidatorError, isSymfonyFormViolationListError, isSymfonyListError } from '@ethlete/query';
 import { format, parse } from 'date-fns';
 import { Platform } from '@angular/cdk/platform';
@@ -4154,7 +4154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             }] } });
 
 const INPUT_TOKEN = new InjectionToken('ET_INPUT_DIRECTIVE_TOKEN');
-let nextUniqueId$6 = 0;
+let nextUniqueId$5 = 0;
 class InputDirective {
     get control() {
         if (!this._ngControl) {
@@ -4282,7 +4282,7 @@ class InputDirective {
         this._focusMonitor = inject(FocusMonitor);
         this._elementRef = inject(ElementRef);
         this._neverEmptyInputs = ['date', 'datetime', 'datetime-local', 'month', 'time', 'week'];
-        this._id = `et-input-${++nextUniqueId$6}`;
+        this._id = `et-input-${++nextUniqueId$5}`;
         this.autocomplete = input(null, ...(ngDevMode ? [{ debugName: "autocomplete" }] : []));
         this.placeholder = input(null, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
         this.min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : []));
@@ -4699,11 +4699,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         }] });
 
 const LABEL_TOKEN = new InjectionToken('ET_LABEL_COMPONENT_TOKEN');
-let nextUniqueId$5 = 0;
+let nextUniqueId$4 = 0;
 class LabelComponent {
     constructor() {
         this.formFieldStateService = inject(FormFieldStateService);
-        this.id = `et-label-${++nextUniqueId$5}`;
+        this.id = `et-label-${++nextUniqueId$4}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: LabelComponent, isStandalone: true, selector: "et-label", host: { classAttribute: "et-label" }, providers: [{ provide: LABEL_TOKEN, useExisting: LabelComponent }], exportAs: ["etLabel"], ngImport: i0, template: `
@@ -5265,7 +5265,131 @@ const mergeOverlayBreakpointConfigs = (...configs) => {
     return combinedConfig;
 };
 
-const isTouchEvent$3 = (event) => {
+const FLOATING_UI_PLACEMENTS = [
+    'top',
+    'left',
+    'bottom',
+    'right',
+    'top-start',
+    'top-end',
+    'right-start',
+    'right-end',
+    'bottom-start',
+    'bottom-end',
+    'left-start',
+    'left-end',
+];
+
+/**
+ * A utility function to enhance the ux of views containing forms.
+ * It helps to prevent the user from accidentally losing unsaved form changes.
+ */
+const createNavigationDismissChecker = (config) => {
+    assertInInjectionContext(createNavigationDismissChecker);
+    const { form, compareFn, dismissCheckFn } = config;
+    const currentFormValue = controlValueSignal(form);
+    const hasChanges = computed(() => {
+        const formValue = currentFormValue();
+        if (!formValue)
+            return false;
+        return !(compareFn ? compareFn(formValue, defaultFormValue()) : equal(formValue, defaultFormValue()));
+    }, ...(ngDevMode ? [{ debugName: "hasChanges" }] : []));
+    const defaultFormValue = signal(config.defaultValue ?? form.getRawValue(), ...(ngDevMode ? [{ debugName: "defaultFormValue" }] : []));
+    const runCheck = () => {
+        const isDefaultFormValue = !hasChanges();
+        if (isDefaultFormValue)
+            return of(true);
+        return dismissCheckFn(form.getRawValue());
+    };
+    const refreshDefaultFormValue = () => {
+        defaultFormValue.set(form.getRawValue());
+    };
+    const restoreDefaultFormValue = () => {
+        form.setValue(defaultFormValue());
+        refreshDefaultFormValue();
+    };
+    return {
+        runCheck,
+        refreshDefaultFormValue,
+        restoreDefaultFormValue,
+        hasChanges,
+        defaultFormValue: defaultFormValue.asReadonly(),
+    };
+};
+
+const injectRouterNavigationState = () => {
+    const router = inject(Router);
+    const navState = router.getCurrentNavigation()?.extras.state;
+    return (navState || null);
+};
+
+const getClientXY = (event) => {
+    if (event.type[0] === 't') {
+        const touch = event.targetTouches[0] ?? event.changedTouches[0];
+        return touch ? { clientX: touch.clientX, clientY: touch.clientY } : { clientX: 0, clientY: 0 };
+    }
+    return { clientX: event.clientX, clientY: event.clientY };
+};
+const createSwipeTracker = (startEvent) => {
+    const { clientX: originClientX, clientY: originClientY } = getClientXY(startEvent);
+    const startTime = Date.now();
+    let movementX = 0;
+    let movementY = 0;
+    let isSwiping = false;
+    let isScrolling = false;
+    const update = (event) => {
+        const { clientX, clientY } = getClientXY(event);
+        movementX = clientX - originClientX;
+        movementY = clientY - originClientY;
+        const positiveMovementX = Math.abs(movementX);
+        const positiveMovementY = Math.abs(movementY);
+        if (!isSwiping && !isScrolling) {
+            if (positiveMovementY > positiveMovementX) {
+                isScrolling = true;
+            }
+            else {
+                isSwiping = true;
+            }
+        }
+        return {
+            originClientX,
+            originClientY,
+            timestamp: startTime,
+            movementX,
+            movementY,
+            positiveMovementX,
+            positiveMovementY,
+            isScrolling,
+            isSwiping,
+        };
+    };
+    const end = () => {
+        const swipeTime = Math.max(1, Date.now() - startTime);
+        const positiveMovementX = Math.abs(movementX);
+        const positiveMovementY = Math.abs(movementY);
+        const pixelPerSecondX = (movementX / swipeTime) * 1000;
+        const pixelPerSecondY = (movementY / swipeTime) * 1000;
+        return {
+            movementX,
+            movementY,
+            positiveMovementX,
+            positiveMovementY,
+            pixelPerSecondX,
+            pixelPerSecondY,
+            positivePixelPerSecondX: Math.abs(pixelPerSecondX),
+            positivePixelPerSecondY: Math.abs(pixelPerSecondY),
+            originClientX,
+            originClientY,
+        };
+    };
+    const cancel = () => {
+        movementX = 0;
+        movementY = 0;
+    };
+    return { update, end, cancel };
+};
+
+const isTouchEvent$2 = (event) => {
     return event.type[0] === 't';
 };
 const defaultSwipeMoveStyleInterpolator = (event, config) => {
@@ -5384,15 +5508,29 @@ const shouldCancelDragForScrollableElement = (scrollableElement, direction) => {
  * Returns a cleanup function to disable the feature.
  */
 const enableDragToDismiss = (context) => {
-    const { element: el, overlayRef, swipeHandlerService, config } = context;
+    const { element: el, overlayRef, config } = context;
     const stop$ = new Subject();
-    let swipeId = null;
+    let tracker = null;
     let isSelectionActive = false;
+    let savedUserSelect = null;
+    const unlockSelection = () => {
+        if (savedUserSelect === null)
+            return;
+        document.body.style.userSelect = savedUserSelect;
+        savedUserSelect = null;
+    };
+    const lockSelection = () => {
+        if (savedUserSelect !== null)
+            return;
+        savedUserSelect = document.body.style.userSelect ?? '';
+        document.body.style.userSelect = 'none';
+    };
     const cancelDrag = () => {
+        unlockSelection();
         el.style.setProperty('transition', 'transform 100ms var(--ease-out-1)');
         el.style.transform =
             config.direction === 'to-bottom' || config.direction === 'to-top' ? 'translateY(0)' : 'translateX(0)';
-        swipeId = null;
+        tracker = null;
         setTimeout(() => {
             el.style.removeProperty('transition');
             el.style.removeProperty('transform');
@@ -5406,7 +5544,7 @@ const enableDragToDismiss = (context) => {
         const tag = target.tagName.toLowerCase();
         if (tag === 'input' || tag === 'textarea' || tag === 'select' || tag === 'button' || tag === 'a')
             return;
-        swipeId = swipeHandlerService.startSwipe(event);
+        tracker = createSwipeTracker(event);
     }))
         .subscribe();
     fromEvent(document, 'selectionchange')
@@ -5420,21 +5558,35 @@ const enableDragToDismiss = (context) => {
         isSelectionActive = true;
         cancelDrag();
     });
-    merge(fromEvent(el, 'touchmove'), fromEvent(el, 'mousemove'))
+    merge(fromEvent(el, 'touchmove', { passive: false }), fromEvent(el, 'mousemove'))
         .pipe(takeUntil(stop$), takeUntil(overlayRef.afterClosed()), tap((event) => {
-        if (swipeId === null || isSelectionActive)
+        if (tracker === null || isSelectionActive)
             return;
-        if (isTouchEvent$3(event)) {
+        if (isTouchEvent$2(event)) {
             const target = event.target;
             const scrollableElement = recursiveFindScrollableParent(target, config.direction);
             if (scrollableElement && shouldCancelDragForScrollableElement(scrollableElement, config.direction)) {
                 cancelDrag();
                 return;
             }
+            event.preventDefault();
+        }
+        const swipeData = tracker.update(event);
+        if (!isTouchEvent$2(event)) {
+            if (savedUserSelect === null) {
+                const { movementX, movementY } = swipeData;
+                const committed = config.direction === 'to-bottom'
+                    ? movementY >= 8
+                    : config.direction === 'to-top'
+                        ? movementY <= -8
+                        : config.direction === 'to-left'
+                            ? movementX <= -8
+                            : movementX >= 8;
+                if (!committed)
+                    return;
+                lockSelection();
+            }
         }
-        const swipeData = swipeHandlerService.updateSwipe(swipeId, event);
-        if (!swipeData)
-            return;
         const css = defaultSwipeMoveStyleInterpolator(swipeData, config);
         Object.entries(css).forEach(([key, value]) => {
             el.style.setProperty(key, value);
@@ -5442,13 +5594,17 @@ const enableDragToDismiss = (context) => {
     }))
         .subscribe();
     merge(fromEvent(el, 'touchend'), fromEvent(el, 'mouseup'))
-        .pipe(takeUntil(stop$), takeUntil(overlayRef.afterClosed()), tap(() => {
-        if (swipeId === null || isSelectionActive)
+        .pipe(takeUntil(stop$), takeUntil(overlayRef.afterClosed()), tap((event) => {
+        const wasMouseDrag = !isTouchEvent$2(event) && savedUserSelect !== null;
+        unlockSelection();
+        if (tracker === null || isSelectionActive)
             return;
-        const swipeData = swipeHandlerService.endSwipe(swipeId);
-        swipeId = null;
-        if (!swipeData)
+        if (!isTouchEvent$2(event) && !wasMouseDrag) {
+            tracker = null;
             return;
+        }
+        const swipeData = tracker.end();
+        tracker = null;
         const css = defaultSwipeEndStyleInterpolator(swipeData, config);
         if (!css) {
             overlayRef._closeOverlayVia('touch');
@@ -5469,6 +5625,7 @@ const enableDragToDismiss = (context) => {
         .subscribe();
     return {
         unsubscribe: () => {
+            unlockSelection();
             stop$.next();
             stop$.complete();
         },
@@ -5476,7 +5633,7 @@ const enableDragToDismiss = (context) => {
 };
 
 const isHtmlElement = (element) => element instanceof HTMLElement;
-const isTouchEvent$2 = (event) => event.type[0] === 't';
+const isTouchEvent$1 = (event) => event.type[0] === 't';
 const isPointerEvent = (event) => event.type[0] === 'c';
 const findNextRelevantHtmlElement = (element, depth = 0) => {
     if (!element || depth === 10)
@@ -5499,7 +5656,7 @@ const getOriginCoordinatesAndDimensions = (origin) => {
             element: origin,
         };
     }
-    if (isTouchEvent$2(origin) || isPointerEvent(origin)) {
+    if (isTouchEvent$1(origin) || isPointerEvent(origin)) {
         const target = origin.target;
         const relevantElement = findNextRelevantHtmlElement(target) ?? target;
         const rect = relevantElement.getBoundingClientRect();
@@ -6357,42 +6514,21 @@ class OverlayBodyComponent {
         this.overlayRef = inject(OverlayRef, { optional: true });
         this.elementRef = inject(ElementRef);
         this.overlayManager = injectOverlayManager();
+        this.scrollObserver = inject(ScrollObserverDirective);
         this.dividers = input(false, ...(ngDevMode ? [{ debugName: "dividers" }] : []));
-        this.firstElement = viewChild('firstElement', ...(ngDevMode ? [{ debugName: "firstElement" }] : []));
-        this.lastElement = viewChild('lastElement', ...(ngDevMode ? [{ debugName: "lastElement" }] : []));
         this.dividersEnabled = computed(() => this.dividers() === 'dynamic' || this.dividers() === 'static', ...(ngDevMode ? [{ debugName: "dividersEnabled" }] : []));
         this.dynamicDividersEnabled = computed(() => this.dividers() === 'dynamic', ...(ngDevMode ? [{ debugName: "dynamicDividersEnabled" }] : []));
         this.containerScrollState = signalElementScrollState(this.elementRef);
-        this.firstElementIntersection = signalElementIntersection(this.firstElement, {
-            root: this.elementRef,
-            enabled: this.dynamicDividersEnabled,
-        });
-        this.firstElementVisibility = signal(null, ...(ngDevMode ? [{ debugName: "firstElementVisibility" }] : []));
-        this.lastElementIntersection = signalElementIntersection(this.lastElement, {
-            root: this.elementRef,
-            enabled: this.dynamicDividersEnabled,
-        });
-        this.lastElementVisibility = signal(null, ...(ngDevMode ? [{ debugName: "lastElementVisibility" }] : []));
         this.canScroll = computed(() => this.containerScrollState().canScroll, ...(ngDevMode ? [{ debugName: "canScroll" }] : []));
         this.isAtStart = computed(() => {
-            if (!this.canScroll()) {
+            if (!this.canScroll())
                 return true;
-            }
-            const intersection = this.firstElementIntersection()[0];
-            if (!intersection) {
-                return this.firstElementVisibility()?.inline ?? true;
-            }
-            return intersection.isIntersecting;
+            return this.scrollObserver.isAtStart();
         }, ...(ngDevMode ? [{ debugName: "isAtStart" }] : []));
         this.isAtEnd = computed(() => {
-            if (!this.canScroll()) {
+            if (!this.canScroll())
                 return true;
-            }
-            const intersection = this.lastElementIntersection()[0];
-            if (!intersection) {
-                return this.lastElementVisibility()?.inline ?? true;
-            }
-            return intersection.isIntersecting;
+            return this.scrollObserver.isAtEnd();
         }, ...(ngDevMode ? [{ debugName: "isAtEnd" }] : []));
         this.enableDividerAnimations = signal(false, ...(ngDevMode ? [{ debugName: "enableDividerAnimations" }] : []));
         this.hostClassBindings = signalHostClasses({
@@ -6403,24 +6539,8 @@ class OverlayBodyComponent {
             'et-scrollable-body--is-at-start': computed(() => (this.dynamicDividersEnabled() ? this.isAtStart() : false)),
             'et-scrollable-body--is-at-end': computed(() => (this.dynamicDividersEnabled() ? this.isAtEnd() : false)),
         });
-        effect(() => {
-            const scrollable = this.elementRef.nativeElement;
-            const firstElement = this.firstElement()?.nativeElement;
-            const lastElement = this.lastElement()?.nativeElement;
-            if (!scrollable || !firstElement || !lastElement) {
-                return;
-            }
-            this.firstElementVisibility.set(isElementVisible({
-                container: scrollable,
-                element: firstElement,
-            }));
-            this.lastElementVisibility.set(isElementVisible({
-                container: scrollable,
-                element: lastElement,
-            }));
-            // We need to wait one frame before enabling animations to prevent a animation from playing during initial render.
-            nextFrame(() => this.enableDividerAnimations.set(true));
-        });
+        effect(() => this.scrollObserver.enabled.set(this.dynamicDividersEnabled()));
+        nextFrame(() => this.enableDividerAnimations.set(true));
     }
     ngOnInit() {
         if (!this.overlayRef) {
@@ -6435,19 +6555,19 @@ class OverlayBodyComponent {
         this.elementRef.nativeElement.scrollTo({ top: 0, behavior });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OverlayBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.1", type: OverlayBodyComponent, isStandalone: true, selector: "[et-overlay-body], et-overlay-body", inputs: { dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-overlay-body" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: OverlayBodyComponent, isStandalone: true, selector: "[et-overlay-body], et-overlay-body", inputs: { dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-overlay-body" }, providers: [
             {
                 provide: OVERLAY_BODY_TOKEN,
                 useExisting: OverlayBodyComponent,
             },
             provideBoundaryElement(),
-        ], viewQueries: [{ propertyName: "firstElement", first: true, predicate: ["firstElement"], descendants: true, isSignal: true }, { propertyName: "lastElement", first: true, predicate: ["lastElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
+        ], hostDirectives: [{ directive: i1$1.ScrollObserverDirective }], ngImport: i0, template: `
     <div class="et-overlay-body-container">
-      <div #firstElement class="et-overlay-body-start-element"></div>
+      <div class="et-overlay-body-start-element" etScrollObserverStart></div>
       <ng-content />
-      <div #lastElement class="et-overlay-body-end-element"></div>
+      <div class="et-overlay-body-end-element" etScrollObserverEnd></div>
     </div>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: ScrollObserverStartDirective, selector: "[etScrollObserverStart]" }, { kind: "directive", type: ScrollObserverEndDirective, selector: "[etScrollObserverEnd]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OverlayBodyComponent, decorators: [{
             type: Component,
@@ -6455,11 +6575,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     selector: '[et-overlay-body], et-overlay-body',
                     template: `
     <div class="et-overlay-body-container">
-      <div #firstElement class="et-overlay-body-start-element"></div>
+      <div class="et-overlay-body-start-element" etScrollObserverStart></div>
       <ng-content />
-      <div #lastElement class="et-overlay-body-end-element"></div>
+      <div class="et-overlay-body-end-element" etScrollObserverEnd></div>
     </div>
   `,
+                    imports: [ScrollObserverStartDirective, ScrollObserverEndDirective],
+                    hostDirectives: [ScrollObserverDirective],
                     providers: [
                         {
                             provide: OVERLAY_BODY_TOKEN,
@@ -6471,7 +6593,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         class: 'et-overlay-body',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { dividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividers", required: false }] }], firstElement: [{ type: i0.ViewChild, args: ['firstElement', { isSignal: true }] }], lastElement: [{ type: i0.ViewChild, args: ['lastElement', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { dividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividers", required: false }] }] } });
 
 class OverlayCloseDirective {
     constructor() {
@@ -7925,106 +8047,6 @@ const anchoredDialogOverlayStrategy = (config = {}) => {
     };
 };
 
-let nextUniqueId$4 = 0;
-const isTouchEvent$1 = (event) => {
-    return event.type[0] === 't';
-};
-class SwipeHandlerService {
-    constructor() {
-        this._handlerMap = {};
-    }
-    startSwipe(event) {
-        const handlerId = nextUniqueId$4++;
-        const originClientX = isTouchEvent$1(event) ? event.targetTouches[0].clientX : event.clientX;
-        const originClientY = isTouchEvent$1(event) ? event.targetTouches[0].clientY : event.clientY;
-        const timestamp = Date.now();
-        this._handlerMap[handlerId] = {
-            originClientX,
-            originClientY,
-            timestamp,
-            movementX: 0,
-            movementY: 0,
-            positiveMovementX: 0,
-            positiveMovementY: 0,
-            isScrolling: false,
-            isSwiping: false,
-        };
-        return handlerId;
-    }
-    updateSwipe(handlerId, event) {
-        const handler = this._getSwipeHandler(handlerId);
-        if (!handler)
-            return null;
-        const { originClientX, originClientY, isSwiping, isScrolling } = handler;
-        const currentClientX = isTouchEvent$1(event) ? event.targetTouches[0].clientX : event.clientX;
-        const currentClientY = isTouchEvent$1(event) ? event.targetTouches[0].clientY : event.clientY;
-        const movementX = (originClientX - currentClientX) * -1;
-        const movementY = (originClientY - currentClientY) * -1;
-        const positiveMovementX = Math.abs(movementX);
-        const positiveMovementY = Math.abs(movementY);
-        if (!isSwiping && !isScrolling) {
-            if (positiveMovementY > positiveMovementX) {
-                handler.isScrolling = true;
-            }
-            else {
-                handler.isSwiping = true;
-            }
-        }
-        handler.movementX = movementX;
-        handler.movementY = movementY;
-        handler.positiveMovementX = positiveMovementX;
-        handler.positiveMovementY = positiveMovementY;
-        return handler;
-    }
-    endSwipe(handlerId) {
-        const handler = this._getSwipeHandler(handlerId);
-        if (!handler)
-            return null;
-        const { movementX, movementY, timestamp, originClientX, originClientY, positiveMovementX, positiveMovementY } = handler;
-        const timestampStart = timestamp;
-        const timestampEnd = Date.now();
-        const swipeTime = timestampEnd - timestampStart;
-        const pixelPerMillisecondX = movementX ? movementX / swipeTime : 0;
-        const pixelPerSecondX = pixelPerMillisecondX * 1000;
-        const positivePixelPerSecondX = Math.abs(pixelPerSecondX);
-        const pixelPerMillisecondY = movementY ? movementY / swipeTime : 0;
-        const pixelPerSecondY = pixelPerMillisecondY * 1000;
-        const positivePixelPerSecondY = Math.abs(pixelPerSecondY);
-        delete this._handlerMap[handlerId];
-        const swipeEnd = {
-            positivePixelPerSecondX,
-            positivePixelPerSecondY,
-            pixelPerSecondX,
-            pixelPerSecondY,
-            movementX,
-            movementY,
-            originClientX,
-            originClientY,
-            positiveMovementX,
-            positiveMovementY,
-        };
-        return swipeEnd;
-    }
-    cancelSwipe(handlerId) {
-        delete this._handlerMap[handlerId];
-    }
-    _getSwipeHandler(handlerId) {
-        const handler = this._handlerMap[handlerId];
-        if (!handler) {
-            return null;
-        }
-        return handler;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SwipeHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SwipeHandlerService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SwipeHandlerService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 const [provideBottomSheetStrategyDefaults, injectBottomSheetStrategyDefaults] = createStaticRootProvider({
     width: '100%',
     height: undefined,
@@ -8042,7 +8064,6 @@ const [provideBottomSheetStrategyDefaults, injectBottomSheetStrategyDefaults] =
 });
 const [provideBottomSheetStrategy, injectBottomSheetStrategy] = createRootProvider(() => {
     const defaults = injectBottomSheetStrategyDefaults();
-    const swipeHandlerService = inject(SwipeHandlerService);
     const build = (config = {}) => {
         const cfg = mergeOverlayBreakpointConfigs(defaults, config);
         let dragToDismissRef;
@@ -8053,7 +8074,6 @@ const [provideBottomSheetStrategy, injectBottomSheetStrategy] = createRootProvid
                 config: cfg.dragToDismiss,
                 element: context.containerEl,
                 overlayRef: context.overlayRef,
-                swipeHandlerService,
             });
         };
         const detachDragToDismiss = () => {
@@ -8221,7 +8241,6 @@ const [provideLeftSheetStrategyDefaults, injectLeftSheetStrategyDefaults] = crea
 });
 const [provideLeftSheetStrategy, injectLeftSheetStrategy] = createRootProvider(() => {
     const defaults = injectLeftSheetStrategyDefaults();
-    const swipeHandlerService = inject(SwipeHandlerService);
     const build = (config = {}) => {
         const cfg = mergeOverlayBreakpointConfigs(defaults, config);
         let dragToDismissRef;
@@ -8232,7 +8251,6 @@ const [provideLeftSheetStrategy, injectLeftSheetStrategy] = createRootProvider((
                 config: cfg.dragToDismiss,
                 element: context.containerEl,
                 overlayRef: context.overlayRef,
-                swipeHandlerService,
             });
         };
         const detachDragToDismiss = () => {
@@ -8287,7 +8305,6 @@ const [provideRightSheetStrategyDefaults, injectRightSheetStrategyDefaults] = cr
 });
 const [provideRightSheetStrategy, injectRightSheetStrategy] = createRootProvider(() => {
     const defaults = injectRightSheetStrategyDefaults();
-    const swipeHandlerService = inject(SwipeHandlerService);
     const build = (config = {}) => {
         const cfg = mergeOverlayBreakpointConfigs(defaults, config);
         let dragToDismissRef;
@@ -8298,7 +8315,6 @@ const [provideRightSheetStrategy, injectRightSheetStrategy] = createRootProvider
                 config: cfg.dragToDismiss,
                 element: context.containerEl,
                 overlayRef: context.overlayRef,
-                swipeHandlerService,
             });
         };
         const detachDragToDismiss = () => {
@@ -8399,7 +8415,6 @@ const [provideTopSheetStrategyDefaults, injectTopSheetStrategyDefaults] = create
 });
 const [provideTopSheetStrategy, injectTopSheetStrategy] = createRootProvider(() => {
     const defaults = injectTopSheetStrategyDefaults();
-    const swipeHandlerService = inject(SwipeHandlerService);
     const build = (config = {}) => {
         const cfg = mergeOverlayBreakpointConfigs(defaults, config);
         let dragToDismissRef;
@@ -8410,7 +8425,6 @@ const [provideTopSheetStrategy, injectTopSheetStrategy] = createRootProvider(()
                 config: cfg.dragToDismiss,
                 element: context.containerEl,
                 overlayRef: context.overlayRef,
-                swipeHandlerService,
             });
         };
         const detachDragToDismiss = () => {
@@ -9026,71 +9040,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 }]
         }], propDecorators: { repeatContentCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "repeatContentCount", required: false }] }] } });
 
-// TODO: This needs to be redone, it's a mess...
-const getIntersectionInfo = (intersections) => {
-    const reverseIntersections = [...intersections].reverse();
-    const firstIntersecting = intersections.find((i) => i.intersectionRatio > 0);
-    const lastIntersecting = reverseIntersections.find((i) => i.intersectionRatio > 0);
-    const firstIntersectingIndex = intersections.findIndex((i) => i === firstIntersecting);
-    const lastIntersectingIndex = intersections.findIndex((i) => i === lastIntersecting);
-    if (!firstIntersecting || !lastIntersecting)
-        return null;
-    const greaterIntersecting = firstIntersecting.intersectionRatio > lastIntersecting.intersectionRatio ? firstIntersecting : lastIntersecting;
-    const greaterIntersectingIndex = firstIntersecting.intersectionRatio > lastIntersecting.intersectionRatio
-        ? firstIntersectingIndex
-        : lastIntersectingIndex;
-    const hasFullIntersection = intersections.some((i) => i.intersectionRatio === 1);
-    const hasMultipleFullIntersections = intersections.filter((i) => i.intersectionRatio === 1).length > 1;
-    const firstFullIntersectionIndex = intersections.findIndex((i) => i.intersectionRatio === 1);
-    const firstFullIntersection = intersections.find((i) => i.intersectionRatio === 1);
-    const lastFullIntersection = reverseIntersections.find((i) => i.intersectionRatio === 1);
-    const lastFullIntersectionIndex = intersections.findIndex((i) => i === lastFullIntersection);
-    const firstNonIntersectingIndex = intersections.findIndex((i) => i.intersectionRatio === 0);
-    const firstNonIntersection = intersections.find((i) => i.intersectionRatio === 0);
-    const lastNonIntersection = reverseIntersections.find((i) => i.intersectionRatio === 0);
-    const lastNonIntersectingIndex = intersections.findIndex((i) => i === lastNonIntersection);
-    return {
-        partial: {
-            hasAny: !!firstIntersecting || !!lastIntersecting,
-            hasMultiple: !!firstIntersecting || (!!lastIntersecting && firstIntersecting !== lastIntersecting),
-            first: {
-                intersection: firstIntersecting,
-                index: firstIntersectingIndex,
-            },
-            last: {
-                intersection: lastIntersecting,
-                index: lastIntersectingIndex,
-            },
-            biggest: {
-                intersection: greaterIntersecting,
-                index: greaterIntersectingIndex,
-            },
-        },
-        full: {
-            hasAny: hasFullIntersection,
-            hasMultiple: hasMultipleFullIntersections,
-            first: {
-                index: firstFullIntersectionIndex,
-                intersection: firstFullIntersection,
-            },
-            last: {
-                index: lastFullIntersectionIndex,
-                intersection: lastFullIntersection,
-            },
-        },
-        none: {
-            first: {
-                index: firstNonIntersectingIndex,
-                intersection: firstNonIntersection,
-            },
-            last: {
-                index: lastNonIntersectingIndex,
-                intersection: lastNonIntersection,
-            },
-        },
-    };
-};
-
 // Thresholds for the intersection observer.
 const ELEMENT_INTERSECTION_THRESHOLD = [
     // 5% steps
@@ -9105,56 +9054,47 @@ const ELEMENT_INTERSECTION_THRESHOLD = [
 ];
 class ScrollableComponent {
     constructor() {
-        this._disableSnapping$ = new Subject();
-        this._manualActiveNavigationIndex = signal(null, ...(ngDevMode ? [{ debugName: "_manualActiveNavigationIndex" }] : []));
+        this.manualActiveNavigationIndex = signal(null, ...(ngDevMode ? [{ debugName: "manualActiveNavigationIndex" }] : []));
         this.elementRef = inject(ElementRef);
-        this.itemSize = input('auto', ...(ngDevMode ? [{ debugName: "itemSize" }] : []));
-        this.direction = input('horizontal', ...(ngDevMode ? [{ debugName: "direction" }] : []));
+        this.itemSize = input('auto', { ...(ngDevMode ? { debugName: "itemSize" } : {}), transform: typedBreakpointTransform() });
+        this.direction = input('horizontal', { ...(ngDevMode ? { debugName: "direction" } : {}), transform: typedBreakpointTransform() });
         this.scrollableRole = input(null, ...(ngDevMode ? [{ debugName: "scrollableRole" }] : []));
         this.scrollableClass = input(null, ...(ngDevMode ? [{ debugName: "scrollableClass" }] : []));
-        this.renderNavigation = input(false, { ...(ngDevMode ? { debugName: "renderNavigation" } : {}), transform: booleanAttribute });
-        this.renderMasks = input(true, { ...(ngDevMode ? { debugName: "renderMasks" } : {}), transform: booleanAttribute });
-        this.renderButtons = input(true, { ...(ngDevMode ? { debugName: "renderButtons" } : {}), transform: booleanAttribute });
-        this.buttonPosition = input('inside', ...(ngDevMode ? [{ debugName: "buttonPosition" }] : []));
-        this.renderScrollbars = input(false, { ...(ngDevMode ? { debugName: "renderScrollbars" } : {}), transform: booleanAttribute });
-        this.stickyButtons = input(false, { ...(ngDevMode ? { debugName: "stickyButtons" } : {}), transform: booleanAttribute });
-        this.cursorDragScroll = input(true, { ...(ngDevMode ? { debugName: "cursorDragScroll" } : {}), transform: booleanAttribute });
-        this.disableActiveElementScrolling = input(false, { ...(ngDevMode ? { debugName: "disableActiveElementScrolling" } : {}), transform: booleanAttribute });
-        this.scrollMode = input('container', ...(ngDevMode ? [{ debugName: "scrollMode" }] : []));
-        this.snap = input(false, { ...(ngDevMode ? { debugName: "snap" } : {}), transform: booleanAttribute });
-        this.scrollMargin = input(0, { ...(ngDevMode ? { debugName: "scrollMargin" } : {}), transform: numberAttribute });
-        this.scrollOrigin = input('auto', ...(ngDevMode ? [{ debugName: "scrollOrigin" }] : []));
-        this.darkenNonIntersectingItems = input(false, { ...(ngDevMode ? { debugName: "darkenNonIntersectingItems" } : {}), transform: booleanAttribute });
-        this.showLoadingTemplate = input(false, { ...(ngDevMode ? { debugName: "showLoadingTemplate" } : {}), transform: booleanAttribute });
-        this.loadingTemplatePosition = input('end', ...(ngDevMode ? [{ debugName: "loadingTemplatePosition" }] : []));
+        this.renderNavigation = input(false, { ...(ngDevMode ? { debugName: "renderNavigation" } : {}), transform: boolBreakpointTransform() });
+        this.renderMasks = input(true, { ...(ngDevMode ? { debugName: "renderMasks" } : {}), transform: boolBreakpointTransform() });
+        this.renderButtons = input(true, { ...(ngDevMode ? { debugName: "renderButtons" } : {}), transform: boolBreakpointTransform() });
+        this.buttonPosition = input('inside', { ...(ngDevMode ? { debugName: "buttonPosition" } : {}), transform: typedBreakpointTransform() });
+        this.renderScrollbars = input(false, { ...(ngDevMode ? { debugName: "renderScrollbars" } : {}), transform: boolBreakpointTransform() });
+        this.stickyButtons = input(false, { ...(ngDevMode ? { debugName: "stickyButtons" } : {}), transform: boolBreakpointTransform() });
+        this.cursorDragScroll = input(true, { ...(ngDevMode ? { debugName: "cursorDragScroll" } : {}), transform: boolBreakpointTransform() });
+        this.disableActiveElementScrolling = input(false, { ...(ngDevMode ? { debugName: "disableActiveElementScrolling" } : {}), transform: boolBreakpointTransform() });
+        this.scrollMode = input('container', { ...(ngDevMode ? { debugName: "scrollMode" } : {}), transform: typedBreakpointTransform() });
+        this.snap = input(false, { ...(ngDevMode ? { debugName: "snap" } : {}), transform: boolBreakpointTransform() });
+        this.scrollMargin = input(0, { ...(ngDevMode ? { debugName: "scrollMargin" } : {}), transform: numberBreakpointTransform() });
+        this.scrollOrigin = input('auto', { ...(ngDevMode ? { debugName: "scrollOrigin" } : {}), transform: typedBreakpointTransform() });
+        this.darkenNonIntersectingItems = input(false, { ...(ngDevMode ? { debugName: "darkenNonIntersectingItems" } : {}), transform: boolBreakpointTransform() });
+        this.showLoadingTemplate = input(false, { ...(ngDevMode ? { debugName: "showLoadingTemplate" } : {}), transform: boolBreakpointTransform() });
+        this.loadingTemplatePosition = input('end', { ...(ngDevMode ? { debugName: "loadingTemplatePosition" } : {}), transform: typedBreakpointTransform() });
         this.scrollable = viewChild('scrollable', ...(ngDevMode ? [{ debugName: "scrollable" }] : []));
-        this.firstElement = viewChild('firstElement', ...(ngDevMode ? [{ debugName: "firstElement" }] : []));
-        this.lastElement = viewChild('lastElement', ...(ngDevMode ? [{ debugName: "lastElement" }] : []));
+        this.scrollObserver = viewChild.required(ScrollObserverDirective);
         this.activeElementList = contentChildren(SCROLLABLE_IS_ACTIVE_CHILD_TOKEN, { ...(ngDevMode ? { debugName: "activeElementList" } : {}), descendants: true });
         this.navigationDotsContainer = viewChild('navigationDotsContainer', ...(ngDevMode ? [{ debugName: "navigationDotsContainer" }] : []));
         this.firstNavigationDot = viewChild('navigationDot', ...(ngDevMode ? [{ debugName: "firstNavigationDot" }] : []));
         this.loadingTemplate = contentChild(SCROLLABLE_LOADING_TEMPLATE_TOKEN, ...(ngDevMode ? [{ debugName: "loadingTemplate" }] : []));
-        this.scrollableAttributeMutations = signalElementMutations(this.scrollable, {
-            attributes: true,
-            childList: true,
-            subtree: true,
-        });
         this.scrollableDimensions = signalElementDimensions(this.scrollable);
         this.navigationDotDimensions = signalElementDimensions(this.firstNavigationDot);
-        this.isRendered = createIsRenderedSignal();
         this.canAnimate = createCanAnimateSignal();
         this.cursorDragScrollState = useCursorDragScroll(this.scrollable, {
             enabled: this.cursorDragScroll,
             allowedDirection: this.direction,
         });
-        this.isCursorDragging$ = toObservable(this.cursorDragScrollState.isDragging);
         this.renderButtonsInside = computed(() => this.buttonPosition() === 'inside' && this.renderButtons(), ...(ngDevMode ? [{ debugName: "renderButtonsInside" }] : []));
         this.renderButtonsInFooter = computed(() => this.buttonPosition() === 'footer' && this.renderButtons(), ...(ngDevMode ? [{ debugName: "renderButtonsInFooter" }] : []));
         this.containerScrollState = signalElementScrollState(this.scrollable, {
             initialScrollPosition: computed(() => {
                 const scrollable = this.scrollable()?.nativeElement;
                 const activeElementList = this.activeElementList();
-                if (!scrollable || !activeElementList.length || !this.isRendered.state())
+                if (!scrollable || !activeElementList.length)
                     return null;
                 const firstActive = activeElementList.find((a) => a.isActiveChildEnabled());
                 if (firstActive && !this.disableActiveElementScrolling()) {
@@ -9163,44 +9103,26 @@ class ScrollableComponent {
                 return null;
             }),
         });
-        this.firstElementIntersection = signalElementIntersection(this.firstElement, {
-            root: this.scrollable,
-            enabled: this.isRendered.state,
-        });
-        this.lastElementIntersection = signalElementIntersection(this.lastElement, {
-            root: this.scrollable,
-            enabled: this.isRendered.state,
-        });
         this.allScrollableChildren = signalElementChildren(this.scrollable);
         this.scrollableChildren = computed(() => this.allScrollableChildren().filter((c) => !isScrollableChildIgnored(c)), ...(ngDevMode ? [{ debugName: "scrollableChildren" }] : []));
         this.scrollableContentIntersections = signalElementIntersection(this.scrollableChildren, {
             root: this.scrollable,
             threshold: ELEMENT_INTERSECTION_THRESHOLD,
-            enabled: this.isRendered.state,
         });
         this.scrollableContentIntersections$ = toObservable(this.scrollableContentIntersections);
+        this.maxVisibleItemCount = toSignal(this.scrollableContentIntersections$.pipe(takeUntilDestroyed(), debounceTime(150), map((entries) => entries.filter((i) => i.intersectionRatio > 0).length)), { initialValue: 0 });
         this.nonScrollableIntersections = computed(() => {
             const allIntersections = this.scrollableContentIntersections();
             return allIntersections.filter((i) => i.intersectionRatio !== 1).map((i) => i.target);
         }, { ...(ngDevMode ? { debugName: "nonScrollableIntersections" } : {}), equal: (a, b) => a.length === b.length && a.every((v, i) => v === b[i]) });
-        this.isAtStart = computed(() => {
-            const intersection = this.firstElementIntersection()[0];
-            if (!intersection)
-                return false;
-            return intersection.isIntersecting;
-        }, ...(ngDevMode ? [{ debugName: "isAtStart" }] : []));
-        this.isAtEnd = computed(() => {
-            const intersection = this.lastElementIntersection()[0];
-            if (!intersection)
-                return false;
-            return intersection.isIntersecting;
-        }, ...(ngDevMode ? [{ debugName: "isAtEnd" }] : []));
+        this.isAtStart = computed(() => this.scrollObserver().isAtStart(), ...(ngDevMode ? [{ debugName: "isAtStart" }] : []));
+        this.isAtEnd = computed(() => this.scrollObserver().isAtEnd(), ...(ngDevMode ? [{ debugName: "isAtEnd" }] : []));
         this.canScroll = computed(() => this.direction() === 'horizontal'
             ? this.containerScrollState().canScrollHorizontally
             : this.containerScrollState().canScrollVertically, ...(ngDevMode ? [{ debugName: "canScroll" }] : []));
         this.scrollableNavigation = computed(() => {
             const allIntersections = this.scrollableContentIntersections();
-            const manualActiveNavigationIndex = this._manualActiveNavigationIndex();
+            const manualActiveNavigationIndex = this.manualActiveNavigationIndex();
             const isAtStart = this.isAtStart();
             const isAtEnd = this.isAtEnd();
             const firstIntersection = allIntersections[0];
@@ -9216,26 +9138,24 @@ class ScrollableComponent {
                         return curr;
                     }, allIntersections[0]);
             if (!highestIntersection) {
-                return [];
+                return { items: [], activeIndex: -1 };
             }
             const activeIndex = manualActiveNavigationIndex !== null
                 ? manualActiveNavigationIndex
                 : allIntersections.findIndex((i) => i === highestIntersection);
-            return allIntersections.map((i, index) => ({
+            const items = allIntersections.map((i, index) => ({
                 isActive: manualActiveNavigationIndex !== null
                     ? manualActiveNavigationIndex === index
                     : i === highestIntersection && highestIntersection.intersectionRatio > 0,
                 activeOffset: index === activeIndex ? 0 : Math.abs(index - activeIndex),
                 element: i.target,
             }));
-        }, { ...(ngDevMode ? { debugName: "scrollableNavigation" } : {}), equal: (a, b) => a.length === b.length && a.every((v, i) => v.activeOffset === b[i]?.activeOffset) });
-        this.activeIndex = computed(() => {
-            const scrollableNavigation = this.scrollableNavigation();
-            const activeIndex = scrollableNavigation.findIndex((element) => element.isActive);
-            return activeIndex;
-        }, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+            return { items, activeIndex };
+        }, { ...(ngDevMode ? { debugName: "scrollableNavigation" } : {}), equal: (a, b) => a.activeIndex === b.activeIndex &&
+                a.items.length === b.items.length &&
+                a.items.every((v, i) => v.isActive === b.items[i]?.isActive && v.activeOffset === b.items[i]?.activeOffset) });
+        this.activeIndex = computed(() => this.scrollableNavigation().activeIndex, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
         this.gapValue = computed(() => {
-            this.scrollableAttributeMutations();
             this.scrollableDimensions();
             const scrollable = this.scrollable()?.nativeElement;
             if (!scrollable)
@@ -9247,22 +9167,17 @@ class ScrollableComponent {
                 return '0px';
             return gap;
         }, ...(ngDevMode ? [{ debugName: "gapValue" }] : []));
-        this.intersectionChange = outputFromObservable(this.scrollableContentIntersections$.pipe(takeUntilDestroyed(), debounceTime(50), map((entries) => entries.map((i, index) => ({
+        this.intersectionChange = outputFromObservable(toObservable(this.scrollableContentIntersections).pipe(takeUntilDestroyed(), debounceTime(50), map((entries) => entries.map((i, index) => ({
             index,
             element: i.target,
             intersectionRatio: i.intersectionRatio,
             isIntersecting: i.isIntersecting,
         })))));
-        this.scrollStateChange = outputFromObservable(toObservable(computed(() => {
-            const isAtStart = this.isAtStart();
-            const isAtEnd = this.isAtEnd();
-            const canScroll = this.canScroll();
-            return {
-                canScroll,
-                isAtEnd: !!isAtEnd,
-                isAtStart: !!isAtStart,
-            };
-        })));
+        this.scrollStateChange = outputFromObservable(toObservable(computed(() => ({
+            canScroll: this.canScroll(),
+            isAtEnd: this.isAtEnd(),
+            isAtStart: this.isAtStart(),
+        }))));
         this.allChildElementClassBindings = signalClasses(this.scrollableChildren, {
             'et-scrollable-item': signal(true),
         });
@@ -9280,7 +9195,8 @@ class ScrollableComponent {
             'et-scrollable--is-at-start': this.isAtStart,
             'et-scrollable--is-at-end': this.isAtEnd,
             'et-scrollable--can-animate': this.canAnimate.state,
-            'et-scrollable--darken-non-intersecting-items': this.darkenNonIntersectingItems,
+            'et-scrollable--has-partial-items': computed(() => this.scrollableContentIntersections().some((i) => i.intersectionRatio > 0 && i.intersectionRatio < 1)),
+            'et-scrollable--darken-non-intersecting-items': computed(() => this.darkenNonIntersectingItems() && this.maxVisibleItemCount() > 1),
         });
         this.hostStyleBindings = signalHostStyles({
             '--item-count': computed(() => this.scrollableChildren().length),
@@ -9289,32 +9205,40 @@ class ScrollableComponent {
         this.scrollableDotsContainerStyleBindings = signalStyles(this.navigationDotsContainer, {
             // Responsible for centering the active dot in navigation bar by using 'translate'
             transform: computed(() => {
-                const activeIndex = this.activeIndex();
-                const childCount = this.scrollableChildren().length;
+                const activeIndex = this.scrollableNavigation().activeIndex;
+                const childCount = this.scrollableNavigation().items.length;
                 const offset = this.getNavigationDotsContainerTranslate(childCount, activeIndex);
                 const dir = this.direction() === 'horizontal' ? 'X' : 'Y';
                 return `translate${dir}(${offset})`;
             }),
         });
-        effect(() => {
-            const enableSnapping = this.snap();
-            if (enableSnapping) {
-                this._enableSnapping();
-            }
-            else {
-                this._disableSnapping();
-            }
-        });
-        toObservable(this._manualActiveNavigationIndex)
-            .pipe(filter((i) => i !== null), takeUntilDestroyed(), switchMap(() => {
-            const scrollable = this.scrollable()?.nativeElement;
-            if (!scrollable) {
-                return of(null);
-            }
-            return fromEvent(scrollable, 'scroll');
-        }), debounceTime(50), tap(() => this._manualActiveNavigationIndex.set(null)))
+        const isDragging$ = toObservable(this.cursorDragScrollState.isDragging);
+        const scrollable$ = toObservable(this.scrollable);
+        toObservable(this.snap)
+            .pipe(takeUntilDestroyed(), switchMap((enabled) => {
+            if (!enabled)
+                return EMPTY;
+            return combineLatest([this.scrollableContentIntersections$, isDragging$]).pipe(filter(([, isDragging]) => !isDragging), map(([intersections]) => intersections), debounceTime(150), tap((allIntersections) => {
+                const scrollElement = this.scrollable()?.nativeElement;
+                if (!scrollElement)
+                    return;
+                const visibleItems = allIntersections
+                    .filter((i) => i.intersectionRatio > 0)
+                    .map((i) => i.target);
+                const target = getScrollSnapTarget(visibleItems, scrollElement, this.direction(), this.scrollOrigin(), this.scrollMargin());
+                if (target) {
+                    this.scrollToElement({ element: target.element, origin: target.origin, ignoreForcedOrigin: true });
+                }
+            }));
+        }))
+            .subscribe();
+        toObservable(this.manualActiveNavigationIndex)
+            .pipe(takeUntilDestroyed(), filter((i) => i !== null), switchMap(() => scrollable$.pipe(switchMap((ref) => {
+            if (!ref)
+                return EMPTY;
+            return fromEvent(ref.nativeElement, 'scroll');
+        }))), debounceTime(50), tap(() => this.manualActiveNavigationIndex.set(null)))
             .subscribe();
-        this.isRendered.bind();
     }
     getNavigationDotsContainerTranslate(navigationDotCount, activeIndex) {
         if (navigationDotCount <= 5) {
@@ -9337,30 +9261,16 @@ class ScrollableComponent {
         if (!scrollElement) {
             return;
         }
-        const parent = this.elementRef.nativeElement;
         const isSnappingEnabled = this.snap();
         if (isSnappingEnabled) {
-            // If snapping is enabled we want to scroll to a position where no further snapping will happen after the scroll.
-            const allIntersections = this.scrollableContentIntersections();
-            const intersections = getIntersectionInfo(allIntersections);
-            const relevantIntersection = direction === 'start' ? intersections?.partial.first : intersections?.partial.last;
-            if (!relevantIntersection)
-                return;
-            const nextIndex = relevantIntersection.intersection.intersectionRatio !== 1
-                ? relevantIntersection.index
-                : direction === 'start'
-                    ? relevantIntersection.index - 1
-                    : relevantIntersection.index + 1;
-            const element = allIntersections[nextIndex]?.target ||
-                relevantIntersection.intersection.target;
-            this.scrollToElement({
-                element: element,
-                origin: direction === 'end' ? 'start' : 'end',
-            });
+            const target = getScrollContainerTarget(this.scrollableContentIntersections(), direction);
+            if (target)
+                this.scrollToElement(target);
         }
         else {
             // Just scroll one size of the scrollable container.
-            const scrollableSize = this.direction() === 'horizontal' ? parent.clientWidth : parent.clientHeight;
+            const dimensions = this.scrollableDimensions().client;
+            const scrollableSize = this.direction() === 'horizontal' ? (dimensions?.width ?? 0) : (dimensions?.height ?? 0);
             const currentScroll = this.direction() === 'horizontal' ? scrollElement.scrollLeft : scrollElement.scrollTop;
             scrollElement.scrollTo({
                 [this.direction() === 'horizontal' ? 'left' : 'top']: currentScroll + (direction === 'start' ? -scrollableSize : scrollableSize),
@@ -9377,101 +9287,13 @@ class ScrollableComponent {
             }
             return;
         }
-        const intersections = getIntersectionInfo(allIntersections);
-        if (!intersections || !scrollElement)
+        if (!scrollElement)
             return;
-        // Means the current element is bigger than the scrollable container.
-        // In this case we should scroll to the start of the current element. If we are already there we should scroll to the end of the previous element.
-        // This applies to the other direction as well.
-        const isFirstAndLastIntersectionEqual = intersections.partial.first.intersection === intersections.partial.last.intersection;
-        const scrollableRect = scrollElement.getBoundingClientRect();
-        if (isFirstAndLastIntersectionEqual) {
-            const intersection = intersections.partial.first.intersection.target.getBoundingClientRect();
-            const isStartOfElementVisible = this.direction() === 'horizontal'
-                ? Math.round(intersection.left) >= Math.round(scrollableRect.left)
-                : Math.round(intersection.top) >= Math.round(scrollableRect.top);
-            const isEndOfElementVisible = this.direction() === 'horizontal'
-                ? Math.round(intersection.right) <= Math.round(scrollableRect.right)
-                : Math.round(intersection.bottom) <= Math.round(scrollableRect.bottom);
-            if (!isStartOfElementVisible || !isEndOfElementVisible) {
-                if (direction === 'start') {
-                    if (isStartOfElementVisible) {
-                        // to the end of the previous element
-                        const previousIndex = intersections.partial.first.index - 1;
-                        const elementToScrollTo = allIntersections[previousIndex]?.target;
-                        if (!elementToScrollTo)
-                            return;
-                        this.scrollToElement({
-                            element: elementToScrollTo,
-                            origin: 'end',
-                        });
-                        this._manualActiveNavigationIndex.set(previousIndex);
-                    }
-                    else {
-                        // to the start of the current element
-                        this.scrollToElement({
-                            element: intersections.partial.first.intersection.target,
-                            origin: 'start',
-                        });
-                        this._manualActiveNavigationIndex.set(intersections.partial.first.index);
-                    }
-                }
-                else {
-                    if (isEndOfElementVisible) {
-                        // to the start of the next element
-                        const nextIndex = intersections.partial.last.index + 1;
-                        const elementToScrollTo = allIntersections[nextIndex]?.target;
-                        if (!elementToScrollTo)
-                            return;
-                        this.scrollToElement({
-                            element: elementToScrollTo,
-                            origin: 'start',
-                        });
-                        this._manualActiveNavigationIndex.set(nextIndex);
-                    }
-                    else {
-                        // to the end of the current element
-                        this.scrollToElement({
-                            element: intersections.partial.last.intersection.target,
-                            origin: 'end',
-                        });
-                        this._manualActiveNavigationIndex.set(intersections.partial.last.index);
-                    }
-                }
-                return;
-            }
-        }
-        else if (this.scrollOrigin() === 'center') {
-            // If the scroll origin is forced to be center we should always snap to the center of the next partial intersection in the scroll direction.
-            const nextPartialIntersection = direction === 'start' ? intersections.partial.first : intersections.partial.last;
-            const nextIndex = nextPartialIntersection.index;
-            this.scrollToElement({
-                element: nextPartialIntersection.intersection.target,
-                origin: 'center',
-            });
-            this._manualActiveNavigationIndex.set(nextIndex);
+        const target = getScrollItemTarget(allIntersections, scrollElement, direction, this.scrollOrigin(), this.direction());
+        if (!target)
             return;
-        }
-        const data = direction === 'start' ? intersections.partial.first : intersections.partial.last;
-        let elementToScrollTo = data.intersection.target;
-        let nextIndex = data.index;
-        if (Math.round(data.intersection.intersectionRatio) === 1) {
-            if (direction === 'start' && data.index === 0) {
-                return;
-            }
-            if (direction === 'end' && data.index === allIntersections.length - 1) {
-                return;
-            }
-            nextIndex = direction === 'start' ? data.index - 1 : data.index + 1;
-            elementToScrollTo = allIntersections[nextIndex]?.target;
-            if (!elementToScrollTo)
-                return;
-        }
-        this.scrollToElement({
-            element: elementToScrollTo,
-            origin: direction,
-        });
-        this._manualActiveNavigationIndex.set(nextIndex);
+        this.scrollToElement(target);
+        this.manualActiveNavigationIndex.set(target.index);
     }
     getElementScrollCoordinates(options) {
         const scrollElement = this.scrollable()?.nativeElement;
@@ -9502,7 +9324,7 @@ class ScrollableComponent {
     }
     scrollToElementViaNavigation(elementIndex) {
         const element = this.scrollableChildren()[elementIndex];
-        this._manualActiveNavigationIndex.set(elementIndex);
+        this.manualActiveNavigationIndex.set(elementIndex);
         this.scrollToElement({
             element,
         });
@@ -9523,92 +9345,23 @@ class ScrollableComponent {
             this.scrollOneItemSize('end');
         }
     }
-    _enableSnapping() {
-        combineLatest([this.scrollableContentIntersections$, this.isCursorDragging$])
-            .pipe(filter(([, isDragging]) => !isDragging), map(([intersections]) => intersections), debounceTime(150), tap((allIntersections) => {
-            const scrollElement = this.scrollable()?.nativeElement;
-            if (!scrollElement)
-                return;
-            const intersections = getIntersectionInfo(allIntersections);
-            if (!intersections)
-                return;
-            const isFirstAndLastIntersectionEqual = intersections.partial.first.intersection === intersections.partial.last.intersection;
-            const scrollableRect = scrollElement.getBoundingClientRect();
-            if (this.scrollOrigin() === 'center' && intersections.full.hasMultiple) {
-                // If there is more than one fully visible element we should not snap at all.
-                return;
-            }
-            else if (this.scrollOrigin() === 'center' && intersections.full.first.intersection) {
-                // If there is already a fully visible element we should snap it to the center.
-                this.scrollToElement({
-                    element: intersections.full.first.intersection.target,
-                    origin: 'center',
-                });
-                return;
-            }
-            else if (isFirstAndLastIntersectionEqual) {
-                const intersection = intersections.partial.first.intersection.target.getBoundingClientRect();
-                const isStartOfElementVisible = this.direction() === 'horizontal'
-                    ? intersection.left >= scrollableRect.left
-                    : intersection.top >= scrollableRect.top;
-                const isEndOfElementVisible = this.direction() === 'horizontal'
-                    ? intersection.right <= scrollableRect.right
-                    : intersection.bottom <= scrollableRect.bottom;
-                // Don't snap if neither the start nor the end of the current element is visible.
-                // Otherwise this would result in parts of the element being inaccessible.
-                if (!isStartOfElementVisible && !isEndOfElementVisible)
-                    return;
-                // If the start of the element is visible we should snap to the start.
-                if (isStartOfElementVisible) {
-                    this.scrollToElement({
-                        element: intersections.partial.first.intersection.target,
-                        origin: 'start',
-                    });
-                    return;
-                }
-                // If the end of the element is visible we should snap to the end.
-                if (isEndOfElementVisible) {
-                    this.scrollToElement({
-                        element: intersections.partial.last.intersection.target,
-                        origin: 'end',
-                    });
-                    return;
-                }
-            }
-            else if ((this.direction() === 'horizontal' &&
-                intersections.partial.biggest.intersection.boundingClientRect.width > scrollableRect.width) ||
-                (this.direction() === 'vertical' &&
-                    intersections.partial.biggest.intersection.boundingClientRect.height > scrollableRect.height)) {
-                // If the current element is bigger than the scrollable container we should snap to the start of the current element if the scroll direction is forward
-                // and to the end of the current element if the scroll direction is backwards.
-                const origin = intersections.partial.biggest.index === intersections.partial.first.index ? 'end' : 'start';
-                this.scrollToElement({
-                    element: intersections.partial.biggest.intersection.target,
-                    origin,
-                    ignoreForcedOrigin: true,
-                });
-            }
-            else {
-                // No special case. Just snap to the biggest intersection.
-                this.scrollToElement({
-                    element: intersections.partial.biggest.intersection.target,
-                });
-            }
-        }), takeUntil(this._disableSnapping$))
-            .subscribe();
-    }
-    _disableSnapping() {
-        this._disableSnapping$.next();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScrollableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ScrollableComponent, isStandalone: true, selector: "et-scrollable", inputs: { itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, scrollableRole: { classPropertyName: "scrollableRole", publicName: "scrollableRole", isSignal: true, isRequired: false, transformFunction: null }, scrollableClass: { classPropertyName: "scrollableClass", publicName: "scrollableClass", isSignal: true, isRequired: false, transformFunction: null }, renderNavigation: { classPropertyName: "renderNavigation", publicName: "renderNavigation", isSignal: true, isRequired: false, transformFunction: null }, renderMasks: { classPropertyName: "renderMasks", publicName: "renderMasks", isSignal: true, isRequired: false, transformFunction: null }, renderButtons: { classPropertyName: "renderButtons", publicName: "renderButtons", isSignal: true, isRequired: false, transformFunction: null }, buttonPosition: { classPropertyName: "buttonPosition", publicName: "buttonPosition", isSignal: true, isRequired: false, transformFunction: null }, renderScrollbars: { classPropertyName: "renderScrollbars", publicName: "renderScrollbars", isSignal: true, isRequired: false, transformFunction: null }, stickyButtons: { classPropertyName: "stickyButtons", publicName: "stickyButtons", isSignal: true, isRequired: false, transformFunction: null }, cursorDragScroll: { classPropertyName: "cursorDragScroll", publicName: "cursorDragScroll", isSignal: true, isRequired: false, transformFunction: null }, disableActiveElementScrolling: { classPropertyName: "disableActiveElementScrolling", publicName: "disableActiveElementScrolling", isSignal: true, isRequired: false, transformFunction: null }, scrollMode: { classPropertyName: "scrollMode", publicName: "scrollMode", isSignal: true, isRequired: false, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, scrollMargin: { classPropertyName: "scrollMargin", publicName: "scrollMargin", isSignal: true, isRequired: false, transformFunction: null }, scrollOrigin: { classPropertyName: "scrollOrigin", publicName: "scrollOrigin", isSignal: true, isRequired: false, transformFunction: null }, darkenNonIntersectingItems: { classPropertyName: "darkenNonIntersectingItems", publicName: "darkenNonIntersectingItems", isSignal: true, isRequired: false, transformFunction: null }, showLoadingTemplate: { classPropertyName: "showLoadingTemplate", publicName: "showLoadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplatePosition: { classPropertyName: "loadingTemplatePosition", publicName: "loadingTemplatePosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { intersectionChange: "intersectionChange", scrollStateChange: "scrollStateChange" }, host: { classAttribute: "et-scrollable" }, providers: [provideIcons(CHEVRON_ICON)], queries: [{ propertyName: "activeElementList", predicate: SCROLLABLE_IS_ACTIVE_CHILD_TOKEN, descendants: true, isSignal: true }, { propertyName: "loadingTemplate", first: true, predicate: SCROLLABLE_LOADING_TEMPLATE_TOKEN, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "scrollable", first: true, predicate: ["scrollable"], descendants: true, isSignal: true }, { propertyName: "firstElement", first: true, predicate: ["firstElement"], descendants: true, isSignal: true }, { propertyName: "lastElement", first: true, predicate: ["lastElement"], descendants: true, isSignal: true }, { propertyName: "navigationDotsContainer", first: true, predicate: ["navigationDotsContainer"], descendants: true, isSignal: true }, { propertyName: "firstNavigationDot", first: true, predicate: ["navigationDot"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"et-scrollable-wrapper\">\n  <div\n    #scrollable\n    [attr.role]=\"scrollableRole() ?? undefined\"\n    [ngClass]=\"scrollableClass()\"\n    class=\"et-scrollable-container\"\n  >\n    <div #firstElement class=\"et-scroll-observer-first-element\" etScrollableIgnoreChild></div>\n    @if (loadingTemplatePosition() === 'start' && showLoadingTemplate()) {\n      <ng-container *ngTemplateOutlet=\"loadingTpl\" />\n    }\n    <ng-content />\n    @if (loadingTemplatePosition() === 'end' && showLoadingTemplate()) {\n      <ng-container *ngTemplateOutlet=\"loadingTpl\" />\n    }\n\n    <div #lastElement class=\"et-scroll-observer-last-element\" etScrollableIgnoreChild></div>\n  </div>\n\n  @if (renderMasks()) {\n    <div 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\n  @if (renderButtonsInside()) {\n    <div class=\"et-scrollable-buttons\">\n      <ng-container *ngTemplateOutlet=\"forwardButtonTpl\" />\n      <ng-container *ngTemplateOutlet=\"backwardButtonTpl\" />\n    </div>\n  }\n</div>\n\n@if ((renderButtonsInFooter() || (renderNavigation() && scrollableNavigation().length > 1)) && canScroll()) {\n  <div\n    [ngClass]=\"{\n      'et-scrollable-footer--with-navigation': renderNavigation(),\n      'et-scrollable-footer--with-buttons': renderButtonsInFooter(),\n    }\"\n    class=\"et-scrollable-footer\"\n    aria-hidden=\"true\"\n  >\n    @if (renderButtonsInFooter()) {\n      <ng-container *ngTemplateOutlet=\"forwardButtonTpl\" />\n    }\n\n    @if (renderNavigation()) {\n      <div class=\"et-scrollable-progress-bar\">\n        <div #navigationDotsContainer class=\"et-scrollable-dots-container\">\n          @for (item of scrollableNavigation(); track i; let i = $index) {\n            <button\n              #navigationDot\n              [class.et-scrollable-navigation-item--active]=\"item.isActive\"\n              [class.et-scrollable-navigation-item--close]=\"\n                scrollableNavigation()[i + 1]?.isActive || scrollableNavigation()[i - 1]?.isActive\n              \"\n              [class.et-scrollable-navigation-item--far]=\"\n                !scrollableNavigation()[i + 1]?.isActive && !scrollableNavigation()[i - 1]?.isActive && !item.isActive\n              \"\n              [attr.active-offset]=\"item.activeOffset\"\n              (click)=\"scrollToElementViaNavigation(i)\"\n              class=\"et-scrollable-navigation-item\"\n              type=\"button\"\n              tabindex=\"-1\"\n              aria-hidden=\"true\"\n            ></button>\n          }\n        </div>\n      </div>\n    }\n\n    @if (renderButtonsInFooter()) {\n      <ng-container *ngTemplateOutlet=\"backwardButtonTpl\" />\n    }\n  </div>\n}\n\n<ng-template #forwardButtonTpl>\n  <button\n    [disabled]=\"isAtStart()\"\n    (click)=\"scrollToStartDirection()\"\n    class=\"et-scrollable-button et-scrollable-button--start\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n  >\n    <i etIcon=\"et-chevron\"></i>\n  </button>\n</ng-template>\n\n<ng-template #backwardButtonTpl>\n  <button\n    [disabled]=\"isAtEnd()\"\n    (click)=\"scrollToEndDirection()\"\n    class=\"et-scrollable-button et-scrollable-button--end\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n  >\n    <i etIcon=\"et-chevron\"></i>\n  </button>\n</ng-template>\n\n<ng-template #loadingTpl>\n  @if (loadingTemplate(); as tpl) {\n    @for (\n      _ of tpl.repeat();\n      track index;\n      let index = $index;\n      let even = $even;\n      let odd = $odd;\n      let first = $first;\n      let last = $last\n    ) {\n      <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { index, even, odd, first, last }\" />\n    }\n  }\n</ng-template>\n", styles: [":where(.et-scrollable){--mask: #121212 0, transparent 100%;--mask-size: 25px;--darken-non-intersecting-items-amount: .75;--_auto-size: min-content;display:block}.et-scrollable .et-scrollable-wrapper{display:grid;position:relative;block-size:100%;inline-size:100%}.et-scrollable[item-size=same]{--_auto-size: 1fr}.et-scrollable[item-size=half]{--_auto-size: calc((100% - var(--item-gap)) / 2)}.et-scrollable[item-size=third]{--_auto-size: calc((100% - (var(--item-gap) * 2)) / 3)}.et-scrollable[item-size=quarter]{--_auto-size: calc((100% - (var(--item-gap) * 3)) / 4)}.et-scrollable[item-size=full]{--_auto-size: 100%}.et-scrollable[render-scrollbars=false] .et-scrollable-container,.et-scrollable:not([render-scrollbars]) .et-scrollable-container{scrollbar-width:none}.et-scrollable[render-scrollbars=false] .et-scrollable-container::-webkit-scrollbar,.et-scrollable:not([render-scrollbars]) .et-scrollable-container::-webkit-scrollbar{display:none}.et-scrollable .et-scrollable-button .et-icon--et-chevron{display:block}.et-scrollable[direction=horizontal] .et-scrollable-container,.et-scrollable:not([direction]) .et-scrollable-container{grid-auto-flow:column;grid-auto-columns:var(--_auto-size);overflow-x:auto;overflow-y:hidden}.et-scrollable[direction=horizontal] .et-scrollable-container>:nth-child(2),.et-scrollable:not([direction]) .et-scrollable-container>:nth-child(2){grid-column:1/1;grid-row:1/1}.et-scrollable[direction=horizontal] .et-scrollable-container>:nth-last-child(2),.et-scrollable:not([direction]) .et-scrollable-container>:nth-last-child(2){grid-column:var(--item-count)/var(--item-count);grid-row:1/1}.et-scrollable[direction=horizontal] .et-scrollable-mask,.et-scrollable[direction=horizontal] .et-scrollable-button,.et-scrollable:not([direction]) .et-scrollable-mask,.et-scrollable:not([direction]) .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,.et-scrollable:not([direction]) .et-scrollable-mask--start,.et-scrollable:not([direction]) .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,.et-scrollable:not([direction]) .et-scrollable-mask--end,.et-scrollable:not([direction]) .et-scrollable-button--end{inset-block-start:0;inset-inline:calc(100% - 40px) 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--start,.et-scrollable:not([direction]) .et-scrollable-mask--start{background:linear-gradient(to right,var(--mask))}.et-scrollable[direction=horizontal] .et-scrollable-mask--end,.et-scrollable:not([direction]) .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,.et-scrollable:not([direction]) .et-scrollable-button--start{inset-block-start:calc(50% - 20px);transform:translate(-10px)}.et-scrollable[direction=horizontal] .et-scrollable-button--start .et-icon--et-chevron,.et-scrollable:not([direction]) .et-scrollable-button--start .et-icon--et-chevron{transform:rotate(-90deg)}.et-scrollable[direction=horizontal] .et-scrollable-button--end,.et-scrollable:not([direction]) .et-scrollable-button--end{inset-block-start:calc(50% - 20px);transform:translate(10px)}.et-scrollable[direction=horizontal] .et-scrollable-button--end .et-icon--et-chevron,.et-scrollable:not([direction]) .et-scrollable-button--end .et-icon--et-chevron{transform:rotate(90deg)}.et-scrollable[direction=horizontal] .et-scroll-observer-first-element,.et-scrollable[direction=horizontal] .et-scroll-observer-last-element,.et-scrollable:not([direction]) .et-scroll-observer-first-element,.et-scrollable:not([direction]) .et-scroll-observer-last-element{block-size:100%;inline-size:1px}.et-scrollable[direction=horizontal] .et-scroll-observer-first-element,.et-scrollable:not([direction]) .et-scroll-observer-first-element{margin-inline-start:3px;grid-column:1/1;grid-row:1/1}.et-scrollable[direction=horizontal] .et-scroll-observer-last-element,.et-scrollable:not([direction]) .et-scroll-observer-last-element{margin-inline-end:3px;grid-column:var(--item-count)/var(--item-count);grid-row:1/1;justify-self:end}.et-scrollable[direction=vertical] .et-scrollable-container{grid-auto-flow:row;grid-auto-rows:var(--_auto-size);overflow-x:hidden;overflow-y:auto}.et-scrollable[direction=vertical] .et-scrollable-container>:nth-child(2){grid-row:1/1;grid-column:1/1}.et-scrollable[direction=vertical] .et-scrollable-container>:nth-last-child(2){grid-row:var(--item-count)/var(--item-count);grid-column:1/1}.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[direction=vertical] .et-scrollable-button--start{inset-inline-start:calc(50% - 20px);transform:translateY(-10px)}.et-scrollable[direction=vertical] .et-scrollable-button--start .et-icon--et-chevron{transform:rotate(0)}.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-inline-start:calc(50% - 20px);transform:translateY(10px)}.et-scrollable[direction=vertical] .et-scrollable-button--end .et-icon--et-chevron{transform:rotate(180deg)}.et-scrollable[direction=vertical] .et-scroll-observer-first-element,.et-scrollable[direction=vertical] .et-scroll-observer-last-element{inline-size:100%;block-size:1px}.et-scrollable[direction=vertical] .et-scroll-observer-first-element{margin-block-start:3px;grid-row:1/1;grid-column:1/1}.et-scrollable[direction=vertical] .et-scroll-observer-last-element{margin-block-end:3px;grid-row:var(--item-count)/var(--item-count);grid-column:1/1;align-self:end}.et-scrollable[direction=vertical]:has(.et-scrollable-footer){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);gap:10px}.et-scrollable[direction=vertical] .et-scrollable-footer{flex-direction:column;margin-block-start:0}.et-scrollable[direction=vertical] .et-scrollable-progress-bar{flex-direction:column;max-block-size:100px}.et-scrollable[direction=vertical] .et-scrollable-dots-container{flex-direction:column}.et-scrollable:not(.et-scrollable--is-at-start) .et-scrollable-masks .et-scrollable-mask--start,.et-scrollable:not(.et-scrollable--is-at-start) .et-scrollable-buttons .et-scrollable-button--start{opacity:1;transform:translate(0)}.et-scrollable:not(.et-scrollable--is-at-start) .et-scrollable-buttons .et-scrollable-button--start{pointer-events:all}.et-scrollable:not(.et-scrollable--is-at-end) .et-scrollable-masks .et-scrollable-mask--end,.et-scrollable:not(.et-scrollable--is-at-end) .et-scrollable-buttons .et-scrollable-button--end{opacity:1;transform:translate(0)}.et-scrollable:not(.et-scrollable--is-at-end) .et-scrollable-buttons .et-scrollable-button--end{pointer-events:all}.et-scrollable .et-scroll-observer-first-element,.et-scrollable .et-scroll-observer-last-element{pointer-events:none}.et-scrollable .et-scrollable-container{display:grid;position:relative;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}.et-scrollable.et-scrollable--can-animate .et-scrollable-dots-container{transition:transform .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate .et-scrollable-navigation-item:after{transition:background-color .2s linear,transform .2s linear}.et-scrollable.et-scrollable--can-animate.et-scrollable--can-scroll .et-scrollable-mask{transition:opacity .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate.et-scrollable--can-scroll .et-scrollable-button{transition:opacity .3s var(--ease-5),transform .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate.et-scrollable--darken-non-intersecting-items .et-scrollable-item{transition:opacity .3s var(--ease-5)}.et-scrollable.et-scrollable--darken-non-intersecting-items .et-scrollable-item--not-intersecting{opacity:var(--darken-non-intersecting-items-amount)}.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-icon--et-chevron{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]{--_sticky-margin: 10%}.et-scrollable[sticky-buttons=true] .et-scrollable-button{position:sticky}.et-scrollable[sticky-buttons=true][direction=horizontal] .et-scrollable-buttons{margin-block:var(--_sticky-margin)}.et-scrollable[sticky-buttons=true][direction=vertical] .et-scrollable-buttons{margin-inline:var(--_sticky-margin)}.et-scrollable[sticky-buttons=true][direction=vertical] .et-scrollable-buttons .et-scrollable-button--end{inset-block-start:100%}.et-scrollable .et-scrollable-footer{display:flex;justify-content:center;align-items:center;gap:10px;margin-block-start:10px}.et-scrollable .et-scrollable-footer.et-scrollable-footer--with-buttons .et-scrollable-button{transform:none}.et-scrollable .et-scrollable-footer .et-scrollable-button{width:30px;height:30px}.et-scrollable .et-scrollable-navigation-item{display:flex;justify-content:center;align-items:center;border:none;padding:0;inline-size:20px;block-size:20px;border-radius:50%;cursor:pointer;background-color:transparent}.et-scrollable .et-scrollable-navigation-item.et-scrollable-navigation-item--active:after{background-color:#c6c6c6}.et-scrollable .et-scrollable-navigation-item:after{content:\"\";display:block;inline-size:50%;block-size:50%;border-radius:50%;background-color:#4b4b4b;transform:scale(0)}.et-scrollable .et-scrollable-navigation-item[active-offset=\"0\"]:after{transform:scale(1)}.et-scrollable .et-scrollable-navigation-item[active-offset=\"1\"]:after{transform:scale(.75)}.et-scrollable .et-scrollable-navigation-item[active-offset=\"2\"]:after{transform:scale(.6)}.et-scrollable .et-scrollable-navigation-item[active-offset=\"3\"]:after{transform:scale(.5)}.et-scrollable .et-scrollable-navigation-item[active-offset=\"4\"]:after{transform:scale(.4)}.et-scrollable .et-scrollable-progress-bar{overflow:hidden;max-inline-size:100px;display:flex;align-items:center}.et-scrollable .et-scrollable-progress-bar .et-scrollable-dots-container{display:flex;flex-wrap:nowrap}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ScrollableIgnoreChildDirective, selector: "[etScrollableIgnoreChild]", inputs: ["etScrollableIgnoreChild"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "allowHardcodedColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ScrollableComponent, isStandalone: true, selector: "et-scrollable", inputs: { itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, scrollableRole: { classPropertyName: "scrollableRole", publicName: "scrollableRole", isSignal: true, isRequired: false, transformFunction: null }, scrollableClass: { classPropertyName: "scrollableClass", publicName: "scrollableClass", isSignal: true, isRequired: false, transformFunction: null }, renderNavigation: { classPropertyName: "renderNavigation", publicName: "renderNavigation", isSignal: true, isRequired: false, transformFunction: null }, renderMasks: { classPropertyName: "renderMasks", publicName: "renderMasks", isSignal: true, isRequired: false, transformFunction: null }, renderButtons: { classPropertyName: "renderButtons", publicName: "renderButtons", isSignal: true, isRequired: false, transformFunction: null }, buttonPosition: { classPropertyName: "buttonPosition", publicName: "buttonPosition", isSignal: true, isRequired: false, transformFunction: null }, renderScrollbars: { classPropertyName: "renderScrollbars", publicName: "renderScrollbars", isSignal: true, isRequired: false, transformFunction: null }, stickyButtons: { classPropertyName: "stickyButtons", publicName: "stickyButtons", isSignal: true, isRequired: false, transformFunction: null }, cursorDragScroll: { classPropertyName: "cursorDragScroll", publicName: "cursorDragScroll", isSignal: true, isRequired: false, transformFunction: null }, disableActiveElementScrolling: { classPropertyName: "disableActiveElementScrolling", publicName: "disableActiveElementScrolling", isSignal: true, isRequired: false, transformFunction: null }, scrollMode: { classPropertyName: "scrollMode", publicName: "scrollMode", isSignal: true, isRequired: false, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, scrollMargin: { classPropertyName: "scrollMargin", publicName: "scrollMargin", isSignal: true, isRequired: false, transformFunction: null }, scrollOrigin: { classPropertyName: "scrollOrigin", publicName: "scrollOrigin", isSignal: true, isRequired: false, transformFunction: null }, darkenNonIntersectingItems: { classPropertyName: "darkenNonIntersectingItems", publicName: "darkenNonIntersectingItems", isSignal: true, isRequired: false, transformFunction: null }, showLoadingTemplate: { classPropertyName: "showLoadingTemplate", publicName: "showLoadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplatePosition: { classPropertyName: "loadingTemplatePosition", publicName: "loadingTemplatePosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { intersectionChange: "intersectionChange", scrollStateChange: "scrollStateChange" }, host: { classAttribute: "et-scrollable" }, providers: [provideIcons(CHEVRON_ICON), provideBreakpointInstance(ScrollableComponent)], queries: [{ propertyName: "activeElementList", predicate: SCROLLABLE_IS_ACTIVE_CHILD_TOKEN, descendants: true, isSignal: true }, { propertyName: "loadingTemplate", first: true, predicate: SCROLLABLE_LOADING_TEMPLATE_TOKEN, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "scrollable", first: true, predicate: ["scrollable"], descendants: true, isSignal: true }, { propertyName: "scrollObserver", first: true, predicate: ScrollObserverDirective, descendants: true, isSignal: true }, { propertyName: "navigationDotsContainer", first: true, predicate: ["navigationDotsContainer"], descendants: true, isSignal: true }, { propertyName: "firstNavigationDot", first: true, predicate: ["navigationDot"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"et-scrollable-wrapper\">\n  <div\n    #scrollable\n    [attr.role]=\"scrollableRole() ?? undefined\"\n    [ngClass]=\"scrollableClass()\"\n    class=\"et-scrollable-container\"\n    etScrollObserver\n  >\n    <div #firstElement class=\"et-scroll-observer-first-element\" etScrollObserverStart etScrollableIgnoreChild></div>\n    @if (loadingTemplatePosition() === 'start' && showLoadingTemplate()) {\n      <ng-container *ngTemplateOutlet=\"loadingTpl\" />\n    }\n    <ng-content />\n    @if (loadingTemplatePosition() === 'end' && showLoadingTemplate()) {\n      <ng-container *ngTemplateOutlet=\"loadingTpl\" />\n    }\n\n    <div #lastElement class=\"et-scroll-observer-last-element\" etScrollObserverEnd etScrollableIgnoreChild></div>\n  </div>\n\n  @if (renderMasks()) {\n    <div 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\n  @if (renderButtonsInside()) {\n    <div class=\"et-scrollable-buttons\">\n      <ng-container *ngTemplateOutlet=\"forwardButtonTpl\" />\n      <ng-container *ngTemplateOutlet=\"backwardButtonTpl\" />\n    </div>\n  }\n</div>\n\n@if ((renderButtonsInFooter() || (renderNavigation() && scrollableNavigation().items.length > 1)) && canScroll()) {\n  <div\n    [ngClass]=\"{\n      'et-scrollable-footer--with-navigation': renderNavigation(),\n      'et-scrollable-footer--with-buttons': renderButtonsInFooter(),\n    }\"\n    class=\"et-scrollable-footer\"\n    aria-hidden=\"true\"\n  >\n    @if (renderButtonsInFooter()) {\n      <ng-container *ngTemplateOutlet=\"forwardButtonTpl\" />\n    }\n\n    @if (renderNavigation()) {\n      <div class=\"et-scrollable-progress-bar\">\n        <div #navigationDotsContainer class=\"et-scrollable-dots-container\">\n          @for (item of scrollableNavigation().items; track i; let i = $index) {\n            <button\n              #navigationDot\n              [class.et-scrollable-navigation-item--active]=\"item.isActive\"\n              [class.et-scrollable-navigation-item--close]=\"\n                scrollableNavigation().items[i + 1]?.isActive || scrollableNavigation().items[i - 1]?.isActive\n              \"\n              [class.et-scrollable-navigation-item--far]=\"\n                !scrollableNavigation().items[i + 1]?.isActive &&\n                !scrollableNavigation().items[i - 1]?.isActive &&\n                !item.isActive\n              \"\n              [attr.active-offset]=\"item.activeOffset\"\n              (click)=\"scrollToElementViaNavigation(i)\"\n              class=\"et-scrollable-navigation-item\"\n              type=\"button\"\n              tabindex=\"-1\"\n              aria-hidden=\"true\"\n            ></button>\n          }\n        </div>\n      </div>\n    }\n\n    @if (renderButtonsInFooter()) {\n      <ng-container *ngTemplateOutlet=\"backwardButtonTpl\" />\n    }\n  </div>\n}\n\n<ng-template #forwardButtonTpl>\n  <button\n    [disabled]=\"isAtStart()\"\n    (click)=\"scrollToStartDirection()\"\n    class=\"et-scrollable-button et-scrollable-button--start\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n  >\n    <i etIcon=\"et-chevron\"></i>\n  </button>\n</ng-template>\n\n<ng-template #backwardButtonTpl>\n  <button\n    [disabled]=\"isAtEnd()\"\n    (click)=\"scrollToEndDirection()\"\n    class=\"et-scrollable-button et-scrollable-button--end\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n  >\n    <i etIcon=\"et-chevron\"></i>\n  </button>\n</ng-template>\n\n<ng-template #loadingTpl>\n  @if (loadingTemplate(); as tpl) {\n    @for (\n      _ of tpl.repeat();\n      track index;\n      let index = $index;\n      let even = $even;\n      let odd = $odd;\n      let first = $first;\n      let last = $last\n    ) {\n      <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { index, even, odd, first, last }\" />\n    }\n  }\n</ng-template>\n", styles: [":where(.et-scrollable){--mask: #121212 0, transparent 100%;--mask-size: 25px;--darken-non-intersecting-items-amount: .75;--_auto-size: min-content;display:block;position:relative}.et-scrollable .et-scrollable-wrapper{display:grid;position:relative;block-size:100%;inline-size:100%}.et-scrollable[item-size=same]{--_auto-size: 1fr}.et-scrollable[item-size=half]{--_auto-size: calc((100% - var(--item-gap)) / 2)}.et-scrollable[item-size=third]{--_auto-size: calc((100% - (var(--item-gap) * 2)) / 3)}.et-scrollable[item-size=quarter]{--_auto-size: calc((100% - (var(--item-gap) * 3)) / 4)}.et-scrollable[item-size=full]{--_auto-size: 100%}.et-scrollable[render-scrollbars=false] .et-scrollable-container,.et-scrollable:not([render-scrollbars]) .et-scrollable-container{scrollbar-width:none}.et-scrollable[render-scrollbars=false] .et-scrollable-container::-webkit-scrollbar,.et-scrollable:not([render-scrollbars]) .et-scrollable-container::-webkit-scrollbar{display:none}.et-scrollable .et-scrollable-button .et-icon--et-chevron{display:block}.et-scrollable[direction=horizontal] .et-scrollable-container,.et-scrollable:not([direction]) .et-scrollable-container{grid-auto-flow:column;grid-auto-columns:var(--_auto-size);overflow-x:auto;overflow-y:hidden}.et-scrollable[direction=horizontal] .et-scrollable-container>:nth-child(2),.et-scrollable:not([direction]) .et-scrollable-container>:nth-child(2){grid-column:1/1;grid-row:1/1}.et-scrollable[direction=horizontal] .et-scrollable-container>:nth-last-child(2),.et-scrollable:not([direction]) .et-scrollable-container>:nth-last-child(2){grid-column:var(--item-count)/var(--item-count);grid-row:1/1}.et-scrollable[direction=horizontal] .et-scrollable-mask,.et-scrollable[direction=horizontal] .et-scrollable-button,.et-scrollable:not([direction]) .et-scrollable-mask,.et-scrollable:not([direction]) .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,.et-scrollable:not([direction]) .et-scrollable-mask--start,.et-scrollable:not([direction]) .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,.et-scrollable:not([direction]) .et-scrollable-mask--end,.et-scrollable:not([direction]) .et-scrollable-button--end{inset-block-start:0;inset-inline:calc(100% - 40px) 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--start,.et-scrollable:not([direction]) .et-scrollable-mask--start{background:linear-gradient(to right,var(--mask))}.et-scrollable[direction=horizontal] .et-scrollable-mask--end,.et-scrollable:not([direction]) .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,.et-scrollable:not([direction]) .et-scrollable-button--start{inset-block-start:calc(50% - 20px);transform:translate(-10px)}.et-scrollable[direction=horizontal] .et-scrollable-button--start .et-icon--et-chevron,.et-scrollable:not([direction]) .et-scrollable-button--start .et-icon--et-chevron{transform:rotate(-90deg)}.et-scrollable[direction=horizontal] .et-scrollable-button--end,.et-scrollable:not([direction]) .et-scrollable-button--end{inset-block-start:calc(50% - 20px);transform:translate(10px)}.et-scrollable[direction=horizontal] .et-scrollable-button--end .et-icon--et-chevron,.et-scrollable:not([direction]) .et-scrollable-button--end .et-icon--et-chevron{transform:rotate(90deg)}.et-scrollable[direction=horizontal] .et-scroll-observer-first-element,.et-scrollable[direction=horizontal] .et-scroll-observer-last-element,.et-scrollable:not([direction]) .et-scroll-observer-first-element,.et-scrollable:not([direction]) .et-scroll-observer-last-element{block-size:100%;inline-size:1px}.et-scrollable[direction=horizontal] .et-scroll-observer-first-element,.et-scrollable:not([direction]) .et-scroll-observer-first-element{margin-inline-start:3px;grid-column:1/1;grid-row:1/1}.et-scrollable[direction=horizontal] .et-scroll-observer-last-element,.et-scrollable:not([direction]) .et-scroll-observer-last-element{margin-inline-end:3px;grid-column:var(--item-count)/var(--item-count);grid-row:1/1;justify-self:end}.et-scrollable[direction=vertical] .et-scrollable-container{grid-auto-flow:row;grid-auto-rows:var(--_auto-size);overflow-x:hidden;overflow-y:auto}.et-scrollable[direction=vertical] .et-scrollable-container>:nth-child(2){grid-row:1/1;grid-column:1/1}.et-scrollable[direction=vertical] .et-scrollable-container>:nth-last-child(2){grid-row:var(--item-count)/var(--item-count);grid-column:1/1}.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[direction=vertical] .et-scrollable-button--start{inset-inline-start:calc(50% - 20px);transform:translateY(-10px)}.et-scrollable[direction=vertical] .et-scrollable-button--start .et-icon--et-chevron{transform:rotate(0)}.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-inline-start:calc(50% - 20px);transform:translateY(10px)}.et-scrollable[direction=vertical] .et-scrollable-button--end .et-icon--et-chevron{transform:rotate(180deg)}.et-scrollable[direction=vertical] .et-scroll-observer-first-element,.et-scrollable[direction=vertical] .et-scroll-observer-last-element{inline-size:100%;block-size:1px}.et-scrollable[direction=vertical] .et-scroll-observer-first-element{margin-block-start:3px;grid-row:1/1;grid-column:1/1}.et-scrollable[direction=vertical] .et-scroll-observer-last-element{margin-block-end:3px;grid-row:var(--item-count)/var(--item-count);grid-column:1/1;align-self:end}.et-scrollable[direction=vertical]:has(.et-scrollable-footer){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);gap:10px}.et-scrollable[direction=vertical] .et-scrollable-footer{flex-direction:column;margin-block-start:0}.et-scrollable[direction=vertical] .et-scrollable-progress-bar{flex-direction:column;max-block-size:100px}.et-scrollable[direction=vertical] .et-scrollable-dots-container{flex-direction:column}.et-scrollable.et-scrollable--can-scroll:not(.et-scrollable--is-at-start) .et-scrollable-buttons .et-scrollable-button--start{opacity:1;transform:translate(0);pointer-events:all}.et-scrollable.et-scrollable--can-scroll.et-scrollable--has-partial-items:not(.et-scrollable--is-at-start) .et-scrollable-masks .et-scrollable-mask--start{opacity:1;transform:translate(0)}.et-scrollable.et-scrollable--can-scroll:not(.et-scrollable--is-at-end) .et-scrollable-buttons .et-scrollable-button--end{opacity:1;transform:translate(0);pointer-events:all}.et-scrollable.et-scrollable--can-scroll.et-scrollable--has-partial-items:not(.et-scrollable--is-at-end) .et-scrollable-masks .et-scrollable-mask--end{opacity:1;transform:translate(0)}.et-scrollable .et-scroll-observer-first-element,.et-scrollable .et-scroll-observer-last-element{pointer-events:none}.et-scrollable .et-scrollable-container{display:grid;position:relative;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}.et-scrollable.et-scrollable--can-animate .et-scrollable-dots-container{transition:transform .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate .et-scrollable-navigation-item:after{transition:background-color .2s linear,transform .2s linear}.et-scrollable.et-scrollable--can-animate.et-scrollable--can-scroll .et-scrollable-mask{transition:opacity .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate.et-scrollable--can-scroll .et-scrollable-button{transition:opacity .3s var(--ease-5),transform .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate.et-scrollable--darken-non-intersecting-items .et-scrollable-item{transition:opacity .3s var(--ease-5)}.et-scrollable.et-scrollable--darken-non-intersecting-items .et-scrollable-item--not-intersecting{opacity:var(--darken-non-intersecting-items-amount)}.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-icon--et-chevron{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]{--_sticky-margin: 10%}.et-scrollable[sticky-buttons=true] .et-scrollable-button{position:sticky}.et-scrollable[sticky-buttons=true][direction=horizontal] .et-scrollable-buttons{margin-block:var(--_sticky-margin)}.et-scrollable[sticky-buttons=true][direction=vertical] .et-scrollable-buttons{margin-inline:var(--_sticky-margin)}.et-scrollable[sticky-buttons=true][direction=vertical] .et-scrollable-buttons .et-scrollable-button--end{inset-block-start:100%}.et-scrollable .et-scrollable-footer{display:flex;justify-content:center;align-items:center;gap:10px;margin-block-start:10px}.et-scrollable .et-scrollable-footer.et-scrollable-footer--with-buttons .et-scrollable-button{transform:none}.et-scrollable .et-scrollable-footer .et-scrollable-button{width:30px;height:30px}.et-scrollable .et-scrollable-navigation-item{display:flex;justify-content:center;align-items:center;border:none;padding:0;inline-size:20px;block-size:20px;border-radius:50%;cursor:pointer;background-color:transparent}.et-scrollable .et-scrollable-navigation-item.et-scrollable-navigation-item--active:after{background-color:#c6c6c6}.et-scrollable .et-scrollable-navigation-item:after{content:\"\";display:block;inline-size:50%;block-size:50%;border-radius:50%;background-color:#4b4b4b;transform:scale(0)}.et-scrollable .et-scrollable-navigation-item[active-offset=\"0\"]:after{transform:scale(1)}.et-scrollable .et-scrollable-navigation-item[active-offset=\"1\"]:after{transform:scale(.75)}.et-scrollable .et-scrollable-navigation-item[active-offset=\"2\"]:after{transform:scale(.6)}.et-scrollable .et-scrollable-navigation-item[active-offset=\"3\"]:after{transform:scale(.5)}.et-scrollable .et-scrollable-navigation-item[active-offset=\"4\"]:after{transform:scale(.4)}.et-scrollable .et-scrollable-progress-bar{overflow:hidden;max-inline-size:100px;display:flex;align-items:center}.et-scrollable .et-scrollable-progress-bar .et-scrollable-dots-container{display:flex;flex-wrap:nowrap}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ScrollableIgnoreChildDirective, selector: "[etScrollableIgnoreChild]", inputs: ["etScrollableIgnoreChild"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "allowHardcodedColor"] }, { kind: "directive", type: ScrollObserverDirective, selector: "[etScrollObserver]", inputs: ["enabled"], outputs: ["enabledChange"], exportAs: ["etScrollObserver"] }, { kind: "directive", type: ScrollObserverStartDirective, selector: "[etScrollObserverStart]" }, { kind: "directive", type: ScrollObserverEndDirective, selector: "[etScrollObserverEnd]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScrollableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'et-scrollable', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, ScrollableIgnoreChildDirective, NgTemplateOutlet, IconDirective], host: {
+            args: [{ selector: 'et-scrollable', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgClass,
+                        ScrollableIgnoreChildDirective,
+                        NgTemplateOutlet,
+                        IconDirective,
+                        ScrollObserverDirective,
+                        ScrollObserverStartDirective,
+                        ScrollObserverEndDirective,
+                    ], host: {
                         class: 'et-scrollable',
-                    }, providers: [provideIcons(CHEVRON_ICON)], template: "<div class=\"et-scrollable-wrapper\">\n  <div\n    #scrollable\n    [attr.role]=\"scrollableRole() ?? undefined\"\n    [ngClass]=\"scrollableClass()\"\n    class=\"et-scrollable-container\"\n  >\n    <div #firstElement class=\"et-scroll-observer-first-element\" etScrollableIgnoreChild></div>\n    @if (loadingTemplatePosition() === 'start' && showLoadingTemplate()) {\n      <ng-container *ngTemplateOutlet=\"loadingTpl\" />\n    }\n    <ng-content />\n    @if (loadingTemplatePosition() === 'end' && showLoadingTemplate()) {\n      <ng-container *ngTemplateOutlet=\"loadingTpl\" />\n    }\n\n    <div #lastElement class=\"et-scroll-observer-last-element\" etScrollableIgnoreChild></div>\n  </div>\n\n  @if (renderMasks()) {\n    <div 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\n  @if (renderButtonsInside()) {\n    <div class=\"et-scrollable-buttons\">\n      <ng-container *ngTemplateOutlet=\"forwardButtonTpl\" />\n      <ng-container *ngTemplateOutlet=\"backwardButtonTpl\" />\n    </div>\n  }\n</div>\n\n@if ((renderButtonsInFooter() || (renderNavigation() && scrollableNavigation().length > 1)) && canScroll()) {\n  <div\n    [ngClass]=\"{\n      'et-scrollable-footer--with-navigation': renderNavigation(),\n      'et-scrollable-footer--with-buttons': renderButtonsInFooter(),\n    }\"\n    class=\"et-scrollable-footer\"\n    aria-hidden=\"true\"\n  >\n    @if (renderButtonsInFooter()) {\n      <ng-container *ngTemplateOutlet=\"forwardButtonTpl\" />\n    }\n\n    @if (renderNavigation()) {\n      <div class=\"et-scrollable-progress-bar\">\n        <div #navigationDotsContainer class=\"et-scrollable-dots-container\">\n          @for (item of scrollableNavigation(); track i; let i = $index) {\n            <button\n              #navigationDot\n              [class.et-scrollable-navigation-item--active]=\"item.isActive\"\n              [class.et-scrollable-navigation-item--close]=\"\n                scrollableNavigation()[i + 1]?.isActive || scrollableNavigation()[i - 1]?.isActive\n              \"\n              [class.et-scrollable-navigation-item--far]=\"\n                !scrollableNavigation()[i + 1]?.isActive && !scrollableNavigation()[i - 1]?.isActive && !item.isActive\n              \"\n              [attr.active-offset]=\"item.activeOffset\"\n              (click)=\"scrollToElementViaNavigation(i)\"\n              class=\"et-scrollable-navigation-item\"\n              type=\"button\"\n              tabindex=\"-1\"\n              aria-hidden=\"true\"\n            ></button>\n          }\n        </div>\n      </div>\n    }\n\n    @if (renderButtonsInFooter()) {\n      <ng-container *ngTemplateOutlet=\"backwardButtonTpl\" />\n    }\n  </div>\n}\n\n<ng-template #forwardButtonTpl>\n  <button\n    [disabled]=\"isAtStart()\"\n    (click)=\"scrollToStartDirection()\"\n    class=\"et-scrollable-button et-scrollable-button--start\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n  >\n    <i etIcon=\"et-chevron\"></i>\n  </button>\n</ng-template>\n\n<ng-template #backwardButtonTpl>\n  <button\n    [disabled]=\"isAtEnd()\"\n    (click)=\"scrollToEndDirection()\"\n    class=\"et-scrollable-button et-scrollable-button--end\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n  >\n    <i etIcon=\"et-chevron\"></i>\n  </button>\n</ng-template>\n\n<ng-template #loadingTpl>\n  @if (loadingTemplate(); as tpl) {\n    @for (\n      _ of tpl.repeat();\n      track index;\n      let index = $index;\n      let even = $even;\n      let odd = $odd;\n      let first = $first;\n      let last = $last\n    ) {\n      <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { index, even, odd, first, last }\" />\n    }\n  }\n</ng-template>\n", styles: [":where(.et-scrollable){--mask: #121212 0, transparent 100%;--mask-size: 25px;--darken-non-intersecting-items-amount: .75;--_auto-size: min-content;display:block}.et-scrollable .et-scrollable-wrapper{display:grid;position:relative;block-size:100%;inline-size:100%}.et-scrollable[item-size=same]{--_auto-size: 1fr}.et-scrollable[item-size=half]{--_auto-size: calc((100% - var(--item-gap)) / 2)}.et-scrollable[item-size=third]{--_auto-size: calc((100% - (var(--item-gap) * 2)) / 3)}.et-scrollable[item-size=quarter]{--_auto-size: calc((100% - (var(--item-gap) * 3)) / 4)}.et-scrollable[item-size=full]{--_auto-size: 100%}.et-scrollable[render-scrollbars=false] .et-scrollable-container,.et-scrollable:not([render-scrollbars]) .et-scrollable-container{scrollbar-width:none}.et-scrollable[render-scrollbars=false] .et-scrollable-container::-webkit-scrollbar,.et-scrollable:not([render-scrollbars]) .et-scrollable-container::-webkit-scrollbar{display:none}.et-scrollable .et-scrollable-button .et-icon--et-chevron{display:block}.et-scrollable[direction=horizontal] .et-scrollable-container,.et-scrollable:not([direction]) .et-scrollable-container{grid-auto-flow:column;grid-auto-columns:var(--_auto-size);overflow-x:auto;overflow-y:hidden}.et-scrollable[direction=horizontal] .et-scrollable-container>:nth-child(2),.et-scrollable:not([direction]) .et-scrollable-container>:nth-child(2){grid-column:1/1;grid-row:1/1}.et-scrollable[direction=horizontal] .et-scrollable-container>:nth-last-child(2),.et-scrollable:not([direction]) .et-scrollable-container>:nth-last-child(2){grid-column:var(--item-count)/var(--item-count);grid-row:1/1}.et-scrollable[direction=horizontal] .et-scrollable-mask,.et-scrollable[direction=horizontal] .et-scrollable-button,.et-scrollable:not([direction]) .et-scrollable-mask,.et-scrollable:not([direction]) .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,.et-scrollable:not([direction]) .et-scrollable-mask--start,.et-scrollable:not([direction]) .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,.et-scrollable:not([direction]) .et-scrollable-mask--end,.et-scrollable:not([direction]) .et-scrollable-button--end{inset-block-start:0;inset-inline:calc(100% - 40px) 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--start,.et-scrollable:not([direction]) .et-scrollable-mask--start{background:linear-gradient(to right,var(--mask))}.et-scrollable[direction=horizontal] .et-scrollable-mask--end,.et-scrollable:not([direction]) .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,.et-scrollable:not([direction]) .et-scrollable-button--start{inset-block-start:calc(50% - 20px);transform:translate(-10px)}.et-scrollable[direction=horizontal] .et-scrollable-button--start .et-icon--et-chevron,.et-scrollable:not([direction]) .et-scrollable-button--start .et-icon--et-chevron{transform:rotate(-90deg)}.et-scrollable[direction=horizontal] .et-scrollable-button--end,.et-scrollable:not([direction]) .et-scrollable-button--end{inset-block-start:calc(50% - 20px);transform:translate(10px)}.et-scrollable[direction=horizontal] .et-scrollable-button--end .et-icon--et-chevron,.et-scrollable:not([direction]) .et-scrollable-button--end .et-icon--et-chevron{transform:rotate(90deg)}.et-scrollable[direction=horizontal] .et-scroll-observer-first-element,.et-scrollable[direction=horizontal] .et-scroll-observer-last-element,.et-scrollable:not([direction]) .et-scroll-observer-first-element,.et-scrollable:not([direction]) .et-scroll-observer-last-element{block-size:100%;inline-size:1px}.et-scrollable[direction=horizontal] .et-scroll-observer-first-element,.et-scrollable:not([direction]) .et-scroll-observer-first-element{margin-inline-start:3px;grid-column:1/1;grid-row:1/1}.et-scrollable[direction=horizontal] .et-scroll-observer-last-element,.et-scrollable:not([direction]) .et-scroll-observer-last-element{margin-inline-end:3px;grid-column:var(--item-count)/var(--item-count);grid-row:1/1;justify-self:end}.et-scrollable[direction=vertical] .et-scrollable-container{grid-auto-flow:row;grid-auto-rows:var(--_auto-size);overflow-x:hidden;overflow-y:auto}.et-scrollable[direction=vertical] .et-scrollable-container>:nth-child(2){grid-row:1/1;grid-column:1/1}.et-scrollable[direction=vertical] .et-scrollable-container>:nth-last-child(2){grid-row:var(--item-count)/var(--item-count);grid-column:1/1}.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[direction=vertical] .et-scrollable-button--start{inset-inline-start:calc(50% - 20px);transform:translateY(-10px)}.et-scrollable[direction=vertical] .et-scrollable-button--start .et-icon--et-chevron{transform:rotate(0)}.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-inline-start:calc(50% - 20px);transform:translateY(10px)}.et-scrollable[direction=vertical] .et-scrollable-button--end .et-icon--et-chevron{transform:rotate(180deg)}.et-scrollable[direction=vertical] .et-scroll-observer-first-element,.et-scrollable[direction=vertical] .et-scroll-observer-last-element{inline-size:100%;block-size:1px}.et-scrollable[direction=vertical] .et-scroll-observer-first-element{margin-block-start:3px;grid-row:1/1;grid-column:1/1}.et-scrollable[direction=vertical] .et-scroll-observer-last-element{margin-block-end:3px;grid-row:var(--item-count)/var(--item-count);grid-column:1/1;align-self:end}.et-scrollable[direction=vertical]:has(.et-scrollable-footer){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);gap:10px}.et-scrollable[direction=vertical] .et-scrollable-footer{flex-direction:column;margin-block-start:0}.et-scrollable[direction=vertical] .et-scrollable-progress-bar{flex-direction:column;max-block-size:100px}.et-scrollable[direction=vertical] .et-scrollable-dots-container{flex-direction:column}.et-scrollable:not(.et-scrollable--is-at-start) .et-scrollable-masks .et-scrollable-mask--start,.et-scrollable:not(.et-scrollable--is-at-start) .et-scrollable-buttons .et-scrollable-button--start{opacity:1;transform:translate(0)}.et-scrollable:not(.et-scrollable--is-at-start) .et-scrollable-buttons .et-scrollable-button--start{pointer-events:all}.et-scrollable:not(.et-scrollable--is-at-end) .et-scrollable-masks .et-scrollable-mask--end,.et-scrollable:not(.et-scrollable--is-at-end) .et-scrollable-buttons .et-scrollable-button--end{opacity:1;transform:translate(0)}.et-scrollable:not(.et-scrollable--is-at-end) .et-scrollable-buttons .et-scrollable-button--end{pointer-events:all}.et-scrollable .et-scroll-observer-first-element,.et-scrollable .et-scroll-observer-last-element{pointer-events:none}.et-scrollable .et-scrollable-container{display:grid;position:relative;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}.et-scrollable.et-scrollable--can-animate .et-scrollable-dots-container{transition:transform .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate .et-scrollable-navigation-item:after{transition:background-color .2s linear,transform .2s linear}.et-scrollable.et-scrollable--can-animate.et-scrollable--can-scroll .et-scrollable-mask{transition:opacity .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate.et-scrollable--can-scroll .et-scrollable-button{transition:opacity .3s var(--ease-5),transform .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate.et-scrollable--darken-non-intersecting-items .et-scrollable-item{transition:opacity .3s var(--ease-5)}.et-scrollable.et-scrollable--darken-non-intersecting-items .et-scrollable-item--not-intersecting{opacity:var(--darken-non-intersecting-items-amount)}.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-icon--et-chevron{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]{--_sticky-margin: 10%}.et-scrollable[sticky-buttons=true] .et-scrollable-button{position:sticky}.et-scrollable[sticky-buttons=true][direction=horizontal] .et-scrollable-buttons{margin-block:var(--_sticky-margin)}.et-scrollable[sticky-buttons=true][direction=vertical] .et-scrollable-buttons{margin-inline:var(--_sticky-margin)}.et-scrollable[sticky-buttons=true][direction=vertical] .et-scrollable-buttons .et-scrollable-button--end{inset-block-start:100%}.et-scrollable .et-scrollable-footer{display:flex;justify-content:center;align-items:center;gap:10px;margin-block-start:10px}.et-scrollable .et-scrollable-footer.et-scrollable-footer--with-buttons .et-scrollable-button{transform:none}.et-scrollable .et-scrollable-footer .et-scrollable-button{width:30px;height:30px}.et-scrollable .et-scrollable-navigation-item{display:flex;justify-content:center;align-items:center;border:none;padding:0;inline-size:20px;block-size:20px;border-radius:50%;cursor:pointer;background-color:transparent}.et-scrollable .et-scrollable-navigation-item.et-scrollable-navigation-item--active:after{background-color:#c6c6c6}.et-scrollable .et-scrollable-navigation-item:after{content:\"\";display:block;inline-size:50%;block-size:50%;border-radius:50%;background-color:#4b4b4b;transform:scale(0)}.et-scrollable .et-scrollable-navigation-item[active-offset=\"0\"]:after{transform:scale(1)}.et-scrollable .et-scrollable-navigation-item[active-offset=\"1\"]:after{transform:scale(.75)}.et-scrollable .et-scrollable-navigation-item[active-offset=\"2\"]:after{transform:scale(.6)}.et-scrollable .et-scrollable-navigation-item[active-offset=\"3\"]:after{transform:scale(.5)}.et-scrollable .et-scrollable-navigation-item[active-offset=\"4\"]:after{transform:scale(.4)}.et-scrollable .et-scrollable-progress-bar{overflow:hidden;max-inline-size:100px;display:flex;align-items:center}.et-scrollable .et-scrollable-progress-bar .et-scrollable-dots-container{display:flex;flex-wrap:nowrap}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], scrollableRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollableRole", required: false }] }], scrollableClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollableClass", required: false }] }], renderNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderNavigation", required: false }] }], renderMasks: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderMasks", required: false }] }], renderButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderButtons", required: false }] }], buttonPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonPosition", required: false }] }], renderScrollbars: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderScrollbars", required: false }] }], stickyButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyButtons", required: false }] }], cursorDragScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "cursorDragScroll", required: false }] }], disableActiveElementScrolling: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableActiveElementScrolling", required: false }] }], scrollMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollMode", required: false }] }], snap: [{ type: i0.Input, args: [{ isSignal: true, alias: "snap", required: false }] }], scrollMargin: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollMargin", required: false }] }], scrollOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollOrigin", required: false }] }], darkenNonIntersectingItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkenNonIntersectingItems", required: false }] }], showLoadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLoadingTemplate", required: false }] }], loadingTemplatePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplatePosition", required: false }] }], scrollable: [{ type: i0.ViewChild, args: ['scrollable', { isSignal: true }] }], firstElement: [{ type: i0.ViewChild, args: ['firstElement', { isSignal: true }] }], lastElement: [{ type: i0.ViewChild, args: ['lastElement', { isSignal: true }] }], activeElementList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SCROLLABLE_IS_ACTIVE_CHILD_TOKEN), { ...{ descendants: true }, isSignal: true }] }], navigationDotsContainer: [{ type: i0.ViewChild, args: ['navigationDotsContainer', { isSignal: true }] }], firstNavigationDot: [{ type: i0.ViewChild, args: ['navigationDot', { isSignal: true }] }], loadingTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SCROLLABLE_LOADING_TEMPLATE_TOKEN), { isSignal: true }] }], intersectionChange: [{ type: i0.Output, args: ["intersectionChange"] }], scrollStateChange: [{ type: i0.Output, args: ["scrollStateChange"] }] } });
+                    }, providers: [provideIcons(CHEVRON_ICON), provideBreakpointInstance(ScrollableComponent)], template: "<div class=\"et-scrollable-wrapper\">\n  <div\n    #scrollable\n    [attr.role]=\"scrollableRole() ?? undefined\"\n    [ngClass]=\"scrollableClass()\"\n    class=\"et-scrollable-container\"\n    etScrollObserver\n  >\n    <div #firstElement class=\"et-scroll-observer-first-element\" etScrollObserverStart etScrollableIgnoreChild></div>\n    @if (loadingTemplatePosition() === 'start' && showLoadingTemplate()) {\n      <ng-container *ngTemplateOutlet=\"loadingTpl\" />\n    }\n    <ng-content />\n    @if (loadingTemplatePosition() === 'end' && showLoadingTemplate()) {\n      <ng-container *ngTemplateOutlet=\"loadingTpl\" />\n    }\n\n    <div #lastElement class=\"et-scroll-observer-last-element\" etScrollObserverEnd etScrollableIgnoreChild></div>\n  </div>\n\n  @if (renderMasks()) {\n    <div 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\n  @if (renderButtonsInside()) {\n    <div class=\"et-scrollable-buttons\">\n      <ng-container *ngTemplateOutlet=\"forwardButtonTpl\" />\n      <ng-container *ngTemplateOutlet=\"backwardButtonTpl\" />\n    </div>\n  }\n</div>\n\n@if ((renderButtonsInFooter() || (renderNavigation() && scrollableNavigation().items.length > 1)) && canScroll()) {\n  <div\n    [ngClass]=\"{\n      'et-scrollable-footer--with-navigation': renderNavigation(),\n      'et-scrollable-footer--with-buttons': renderButtonsInFooter(),\n    }\"\n    class=\"et-scrollable-footer\"\n    aria-hidden=\"true\"\n  >\n    @if (renderButtonsInFooter()) {\n      <ng-container *ngTemplateOutlet=\"forwardButtonTpl\" />\n    }\n\n    @if (renderNavigation()) {\n      <div class=\"et-scrollable-progress-bar\">\n        <div #navigationDotsContainer class=\"et-scrollable-dots-container\">\n          @for (item of scrollableNavigation().items; track i; let i = $index) {\n            <button\n              #navigationDot\n              [class.et-scrollable-navigation-item--active]=\"item.isActive\"\n              [class.et-scrollable-navigation-item--close]=\"\n                scrollableNavigation().items[i + 1]?.isActive || scrollableNavigation().items[i - 1]?.isActive\n              \"\n              [class.et-scrollable-navigation-item--far]=\"\n                !scrollableNavigation().items[i + 1]?.isActive &&\n                !scrollableNavigation().items[i - 1]?.isActive &&\n                !item.isActive\n              \"\n              [attr.active-offset]=\"item.activeOffset\"\n              (click)=\"scrollToElementViaNavigation(i)\"\n              class=\"et-scrollable-navigation-item\"\n              type=\"button\"\n              tabindex=\"-1\"\n              aria-hidden=\"true\"\n            ></button>\n          }\n        </div>\n      </div>\n    }\n\n    @if (renderButtonsInFooter()) {\n      <ng-container *ngTemplateOutlet=\"backwardButtonTpl\" />\n    }\n  </div>\n}\n\n<ng-template #forwardButtonTpl>\n  <button\n    [disabled]=\"isAtStart()\"\n    (click)=\"scrollToStartDirection()\"\n    class=\"et-scrollable-button et-scrollable-button--start\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n  >\n    <i etIcon=\"et-chevron\"></i>\n  </button>\n</ng-template>\n\n<ng-template #backwardButtonTpl>\n  <button\n    [disabled]=\"isAtEnd()\"\n    (click)=\"scrollToEndDirection()\"\n    class=\"et-scrollable-button et-scrollable-button--end\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n  >\n    <i etIcon=\"et-chevron\"></i>\n  </button>\n</ng-template>\n\n<ng-template #loadingTpl>\n  @if (loadingTemplate(); as tpl) {\n    @for (\n      _ of tpl.repeat();\n      track index;\n      let index = $index;\n      let even = $even;\n      let odd = $odd;\n      let first = $first;\n      let last = $last\n    ) {\n      <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { index, even, odd, first, last }\" />\n    }\n  }\n</ng-template>\n", styles: [":where(.et-scrollable){--mask: #121212 0, transparent 100%;--mask-size: 25px;--darken-non-intersecting-items-amount: .75;--_auto-size: min-content;display:block;position:relative}.et-scrollable .et-scrollable-wrapper{display:grid;position:relative;block-size:100%;inline-size:100%}.et-scrollable[item-size=same]{--_auto-size: 1fr}.et-scrollable[item-size=half]{--_auto-size: calc((100% - var(--item-gap)) / 2)}.et-scrollable[item-size=third]{--_auto-size: calc((100% - (var(--item-gap) * 2)) / 3)}.et-scrollable[item-size=quarter]{--_auto-size: calc((100% - (var(--item-gap) * 3)) / 4)}.et-scrollable[item-size=full]{--_auto-size: 100%}.et-scrollable[render-scrollbars=false] .et-scrollable-container,.et-scrollable:not([render-scrollbars]) .et-scrollable-container{scrollbar-width:none}.et-scrollable[render-scrollbars=false] .et-scrollable-container::-webkit-scrollbar,.et-scrollable:not([render-scrollbars]) .et-scrollable-container::-webkit-scrollbar{display:none}.et-scrollable .et-scrollable-button .et-icon--et-chevron{display:block}.et-scrollable[direction=horizontal] .et-scrollable-container,.et-scrollable:not([direction]) .et-scrollable-container{grid-auto-flow:column;grid-auto-columns:var(--_auto-size);overflow-x:auto;overflow-y:hidden}.et-scrollable[direction=horizontal] .et-scrollable-container>:nth-child(2),.et-scrollable:not([direction]) .et-scrollable-container>:nth-child(2){grid-column:1/1;grid-row:1/1}.et-scrollable[direction=horizontal] .et-scrollable-container>:nth-last-child(2),.et-scrollable:not([direction]) .et-scrollable-container>:nth-last-child(2){grid-column:var(--item-count)/var(--item-count);grid-row:1/1}.et-scrollable[direction=horizontal] .et-scrollable-mask,.et-scrollable[direction=horizontal] .et-scrollable-button,.et-scrollable:not([direction]) .et-scrollable-mask,.et-scrollable:not([direction]) .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,.et-scrollable:not([direction]) .et-scrollable-mask--start,.et-scrollable:not([direction]) .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,.et-scrollable:not([direction]) .et-scrollable-mask--end,.et-scrollable:not([direction]) .et-scrollable-button--end{inset-block-start:0;inset-inline:calc(100% - 40px) 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--start,.et-scrollable:not([direction]) .et-scrollable-mask--start{background:linear-gradient(to right,var(--mask))}.et-scrollable[direction=horizontal] .et-scrollable-mask--end,.et-scrollable:not([direction]) .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,.et-scrollable:not([direction]) .et-scrollable-button--start{inset-block-start:calc(50% - 20px);transform:translate(-10px)}.et-scrollable[direction=horizontal] .et-scrollable-button--start .et-icon--et-chevron,.et-scrollable:not([direction]) .et-scrollable-button--start .et-icon--et-chevron{transform:rotate(-90deg)}.et-scrollable[direction=horizontal] .et-scrollable-button--end,.et-scrollable:not([direction]) .et-scrollable-button--end{inset-block-start:calc(50% - 20px);transform:translate(10px)}.et-scrollable[direction=horizontal] .et-scrollable-button--end .et-icon--et-chevron,.et-scrollable:not([direction]) .et-scrollable-button--end .et-icon--et-chevron{transform:rotate(90deg)}.et-scrollable[direction=horizontal] .et-scroll-observer-first-element,.et-scrollable[direction=horizontal] .et-scroll-observer-last-element,.et-scrollable:not([direction]) .et-scroll-observer-first-element,.et-scrollable:not([direction]) .et-scroll-observer-last-element{block-size:100%;inline-size:1px}.et-scrollable[direction=horizontal] .et-scroll-observer-first-element,.et-scrollable:not([direction]) .et-scroll-observer-first-element{margin-inline-start:3px;grid-column:1/1;grid-row:1/1}.et-scrollable[direction=horizontal] .et-scroll-observer-last-element,.et-scrollable:not([direction]) .et-scroll-observer-last-element{margin-inline-end:3px;grid-column:var(--item-count)/var(--item-count);grid-row:1/1;justify-self:end}.et-scrollable[direction=vertical] .et-scrollable-container{grid-auto-flow:row;grid-auto-rows:var(--_auto-size);overflow-x:hidden;overflow-y:auto}.et-scrollable[direction=vertical] .et-scrollable-container>:nth-child(2){grid-row:1/1;grid-column:1/1}.et-scrollable[direction=vertical] .et-scrollable-container>:nth-last-child(2){grid-row:var(--item-count)/var(--item-count);grid-column:1/1}.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[direction=vertical] .et-scrollable-button--start{inset-inline-start:calc(50% - 20px);transform:translateY(-10px)}.et-scrollable[direction=vertical] .et-scrollable-button--start .et-icon--et-chevron{transform:rotate(0)}.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-inline-start:calc(50% - 20px);transform:translateY(10px)}.et-scrollable[direction=vertical] .et-scrollable-button--end .et-icon--et-chevron{transform:rotate(180deg)}.et-scrollable[direction=vertical] .et-scroll-observer-first-element,.et-scrollable[direction=vertical] .et-scroll-observer-last-element{inline-size:100%;block-size:1px}.et-scrollable[direction=vertical] .et-scroll-observer-first-element{margin-block-start:3px;grid-row:1/1;grid-column:1/1}.et-scrollable[direction=vertical] .et-scroll-observer-last-element{margin-block-end:3px;grid-row:var(--item-count)/var(--item-count);grid-column:1/1;align-self:end}.et-scrollable[direction=vertical]:has(.et-scrollable-footer){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);gap:10px}.et-scrollable[direction=vertical] .et-scrollable-footer{flex-direction:column;margin-block-start:0}.et-scrollable[direction=vertical] .et-scrollable-progress-bar{flex-direction:column;max-block-size:100px}.et-scrollable[direction=vertical] .et-scrollable-dots-container{flex-direction:column}.et-scrollable.et-scrollable--can-scroll:not(.et-scrollable--is-at-start) .et-scrollable-buttons .et-scrollable-button--start{opacity:1;transform:translate(0);pointer-events:all}.et-scrollable.et-scrollable--can-scroll.et-scrollable--has-partial-items:not(.et-scrollable--is-at-start) .et-scrollable-masks .et-scrollable-mask--start{opacity:1;transform:translate(0)}.et-scrollable.et-scrollable--can-scroll:not(.et-scrollable--is-at-end) .et-scrollable-buttons .et-scrollable-button--end{opacity:1;transform:translate(0);pointer-events:all}.et-scrollable.et-scrollable--can-scroll.et-scrollable--has-partial-items:not(.et-scrollable--is-at-end) .et-scrollable-masks .et-scrollable-mask--end{opacity:1;transform:translate(0)}.et-scrollable .et-scroll-observer-first-element,.et-scrollable .et-scroll-observer-last-element{pointer-events:none}.et-scrollable .et-scrollable-container{display:grid;position:relative;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}.et-scrollable.et-scrollable--can-animate .et-scrollable-dots-container{transition:transform .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate .et-scrollable-navigation-item:after{transition:background-color .2s linear,transform .2s linear}.et-scrollable.et-scrollable--can-animate.et-scrollable--can-scroll .et-scrollable-mask{transition:opacity .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate.et-scrollable--can-scroll .et-scrollable-button{transition:opacity .3s var(--ease-5),transform .3s var(--ease-5)}.et-scrollable.et-scrollable--can-animate.et-scrollable--darken-non-intersecting-items .et-scrollable-item{transition:opacity .3s var(--ease-5)}.et-scrollable.et-scrollable--darken-non-intersecting-items .et-scrollable-item--not-intersecting{opacity:var(--darken-non-intersecting-items-amount)}.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-icon--et-chevron{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]{--_sticky-margin: 10%}.et-scrollable[sticky-buttons=true] .et-scrollable-button{position:sticky}.et-scrollable[sticky-buttons=true][direction=horizontal] .et-scrollable-buttons{margin-block:var(--_sticky-margin)}.et-scrollable[sticky-buttons=true][direction=vertical] .et-scrollable-buttons{margin-inline:var(--_sticky-margin)}.et-scrollable[sticky-buttons=true][direction=vertical] .et-scrollable-buttons .et-scrollable-button--end{inset-block-start:100%}.et-scrollable .et-scrollable-footer{display:flex;justify-content:center;align-items:center;gap:10px;margin-block-start:10px}.et-scrollable .et-scrollable-footer.et-scrollable-footer--with-buttons .et-scrollable-button{transform:none}.et-scrollable .et-scrollable-footer .et-scrollable-button{width:30px;height:30px}.et-scrollable .et-scrollable-navigation-item{display:flex;justify-content:center;align-items:center;border:none;padding:0;inline-size:20px;block-size:20px;border-radius:50%;cursor:pointer;background-color:transparent}.et-scrollable .et-scrollable-navigation-item.et-scrollable-navigation-item--active:after{background-color:#c6c6c6}.et-scrollable .et-scrollable-navigation-item:after{content:\"\";display:block;inline-size:50%;block-size:50%;border-radius:50%;background-color:#4b4b4b;transform:scale(0)}.et-scrollable .et-scrollable-navigation-item[active-offset=\"0\"]:after{transform:scale(1)}.et-scrollable .et-scrollable-navigation-item[active-offset=\"1\"]:after{transform:scale(.75)}.et-scrollable .et-scrollable-navigation-item[active-offset=\"2\"]:after{transform:scale(.6)}.et-scrollable .et-scrollable-navigation-item[active-offset=\"3\"]:after{transform:scale(.5)}.et-scrollable .et-scrollable-navigation-item[active-offset=\"4\"]:after{transform:scale(.4)}.et-scrollable .et-scrollable-progress-bar{overflow:hidden;max-inline-size:100px;display:flex;align-items:center}.et-scrollable .et-scrollable-progress-bar .et-scrollable-dots-container{display:flex;flex-wrap:nowrap}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], scrollableRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollableRole", required: false }] }], scrollableClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollableClass", required: false }] }], renderNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderNavigation", required: false }] }], renderMasks: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderMasks", required: false }] }], renderButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderButtons", required: false }] }], buttonPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonPosition", required: false }] }], renderScrollbars: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderScrollbars", required: false }] }], stickyButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyButtons", required: false }] }], cursorDragScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "cursorDragScroll", required: false }] }], disableActiveElementScrolling: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableActiveElementScrolling", required: false }] }], scrollMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollMode", required: false }] }], snap: [{ type: i0.Input, args: [{ isSignal: true, alias: "snap", required: false }] }], scrollMargin: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollMargin", required: false }] }], scrollOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollOrigin", required: false }] }], darkenNonIntersectingItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkenNonIntersectingItems", required: false }] }], showLoadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLoadingTemplate", required: false }] }], loadingTemplatePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplatePosition", required: false }] }], scrollable: [{ type: i0.ViewChild, args: ['scrollable', { isSignal: true }] }], scrollObserver: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ScrollObserverDirective), { isSignal: true }] }], activeElementList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SCROLLABLE_IS_ACTIVE_CHILD_TOKEN), { ...{ descendants: true }, isSignal: true }] }], navigationDotsContainer: [{ type: i0.ViewChild, args: ['navigationDotsContainer', { isSignal: true }] }], firstNavigationDot: [{ type: i0.ViewChild, args: ['navigationDot', { isSignal: true }] }], loadingTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SCROLLABLE_LOADING_TEMPLATE_TOKEN), { isSignal: true }] }], intersectionChange: [{ type: i0.Output, args: ["intersectionChange"] }], scrollStateChange: [{ type: i0.Output, args: ["scrollStateChange"] }] } });
 
 const [provideFocusRegistry, injectFocusRegistry] = createRootProvider(() => {
     const registry = signal({}, ...(ngDevMode ? [{ debugName: "registry" }] : []));
@@ -10776,6 +10529,7 @@ class CarouselDirective {
         this.autoPlayTime = input(5000, { ...(ngDevMode ? { debugName: "autoPlayTime" } : {}), transform: numberAttribute });
         this.pauseAutoPlayOnHover = input(true, { ...(ngDevMode ? { debugName: "pauseAutoPlayOnHover" } : {}), transform: booleanAttribute });
         this.pauseAutoPlayOnFocus = input(true, { ...(ngDevMode ? { debugName: "pauseAutoPlayOnFocus" } : {}), transform: booleanAttribute });
+        this.pauseAutoPlayOnHidden = input(true, { ...(ngDevMode ? { debugName: "pauseAutoPlayOnHidden" } : {}), transform: booleanAttribute });
         this.transitionType = input('mask-slide', ...(ngDevMode ? [{ debugName: "transitionType" }] : []));
         this.transitionDuration = input(450, { ...(ngDevMode ? { debugName: "transitionDuration" } : {}), transform: numberAttribute });
         this.activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
@@ -10785,6 +10539,8 @@ class CarouselDirective {
         this.isAutoPlayPaused = signal(false, ...(ngDevMode ? [{ debugName: "isAutoPlayPaused" }] : []));
         this.isAutoPlayPausedByInternalHover = signal(false, ...(ngDevMode ? [{ debugName: "isAutoPlayPausedByInternalHover" }] : []));
         this.isAutoPlayPausedByInternalFocus = signal(false, ...(ngDevMode ? [{ debugName: "isAutoPlayPausedByInternalFocus" }] : []));
+        this.isAutoPlayPausedByInternalVisibility = signal(false, ...(ngDevMode ? [{ debugName: "isAutoPlayPausedByInternalVisibility" }] : []));
+        this.hostElementIntersection = signalHostElementIntersection();
         this.isNavigationLocked = toSignal(toObservable(this.activeIndex).pipe(switchMap(() => merge(of(true), timer(this.transitionDuration()).pipe(map(() => false))))), {
             initialValue: false,
         });
@@ -10815,8 +10571,12 @@ class CarouselDirective {
                 toObservable(this.isAutoPlayPaused, { injector: this.injector }),
                 toObservable(this.isAutoPlayPausedByInternalHover, { injector: this.injector }),
                 toObservable(this.isAutoPlayPausedByInternalFocus, { injector: this.injector }),
-            ]).pipe(switchMap(([isPaused, internalIsPausedDueToHover, internalIsPausedDueToFocus]) => {
-                if (isPaused || internalIsPausedDueToHover || internalIsPausedDueToFocus)
+                toObservable(this.isAutoPlayPausedByInternalVisibility, { injector: this.injector }),
+            ]).pipe(switchMap(([isPaused, internalIsPausedDueToHover, internalIsPausedDueToFocus, internalIsPausedDueToVisibility]) => {
+                if (isPaused ||
+                    internalIsPausedDueToHover ||
+                    internalIsPausedDueToFocus ||
+                    internalIsPausedDueToVisibility)
                     return of(elapsed / duration);
                 return timer(0, 100).pipe(tap(() => (elapsed += 100)), map(() => elapsed / duration), takeWhile((progress) => progress < 1, true));
             }));
@@ -10826,6 +10586,16 @@ class CarouselDirective {
                 return false;
             return this.activeItemAutoPlayProgress() === 1;
         }, ...(ngDevMode ? [{ debugName: "shouldPlayNextItem" }] : []));
+        effect(() => {
+            const entries = this.hostElementIntersection();
+            if (!this.pauseAutoPlayOnHidden()) {
+                this.isAutoPlayPausedByInternalVisibility.set(false);
+                return;
+            }
+            if (entries.length === 0)
+                return;
+            this.isAutoPlayPausedByInternalVisibility.set(!(entries[0]?.isVisible ?? true));
+        });
         combineLatest([toObservable(this.activeItemAutoPlayProgress), toObservable(this.autoPlay)])
             .pipe(filter(([progress, autoPlay]) => progress === 1 && autoPlay), tap(() => this.next()), takeUntilDestroyed())
             .subscribe();
@@ -10891,7 +10661,7 @@ class CarouselDirective {
         this.isAutoPlayPaused.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CarouselDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.1", type: CarouselDirective, isStandalone: true, inputs: { loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, autoPlayTime: { classPropertyName: "autoPlayTime", publicName: "autoPlayTime", isSignal: true, isRequired: false, transformFunction: null }, pauseAutoPlayOnHover: { classPropertyName: "pauseAutoPlayOnHover", publicName: "pauseAutoPlayOnHover", isSignal: true, isRequired: false, transformFunction: null }, pauseAutoPlayOnFocus: { classPropertyName: "pauseAutoPlayOnFocus", publicName: "pauseAutoPlayOnFocus", isSignal: true, isRequired: false, transformFunction: null }, transitionType: { classPropertyName: "transitionType", publicName: "transitionType", isSignal: true, isRequired: false, transformFunction: null }, transitionDuration: { classPropertyName: "transitionDuration", publicName: "transitionDuration", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.1", type: CarouselDirective, isStandalone: true, inputs: { loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, autoPlayTime: { classPropertyName: "autoPlayTime", publicName: "autoPlayTime", isSignal: true, isRequired: false, transformFunction: null }, pauseAutoPlayOnHover: { classPropertyName: "pauseAutoPlayOnHover", publicName: "pauseAutoPlayOnHover", isSignal: true, isRequired: false, transformFunction: null }, pauseAutoPlayOnFocus: { classPropertyName: "pauseAutoPlayOnFocus", publicName: "pauseAutoPlayOnFocus", isSignal: true, isRequired: false, transformFunction: null }, pauseAutoPlayOnHidden: { classPropertyName: "pauseAutoPlayOnHidden", publicName: "pauseAutoPlayOnHidden", isSignal: true, isRequired: false, transformFunction: null }, transitionType: { classPropertyName: "transitionType", publicName: "transitionType", isSignal: true, isRequired: false, transformFunction: null }, transitionDuration: { classPropertyName: "transitionDuration", publicName: "transitionDuration", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: CAROUSEL_TOKEN,
                 useExisting: CarouselDirective,
@@ -10908,7 +10678,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [], propDecorators: { loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], autoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlay", required: false }] }], autoPlayTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlayTime", required: false }] }], pauseAutoPlayOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseAutoPlayOnHover", required: false }] }], pauseAutoPlayOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseAutoPlayOnFocus", required: false }] }], transitionType: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionType", required: false }] }], transitionDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionDuration", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CAROUSEL_ITEM_TOKEN), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], autoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlay", required: false }] }], autoPlayTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlayTime", required: false }] }], pauseAutoPlayOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseAutoPlayOnHover", required: false }] }], pauseAutoPlayOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseAutoPlayOnFocus", required: false }] }], pauseAutoPlayOnHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseAutoPlayOnHidden", required: false }] }], transitionType: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionType", required: false }] }], transitionDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionDuration", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CAROUSEL_ITEM_TOKEN), { isSignal: true }] }] } });
 
 class CarouselComponent {
     constructor() {
@@ -10917,7 +10687,7 @@ class CarouselComponent {
         syncSignal(this.carouselItemsWrapper, this.carousel.carouselItemsWrapper, { skipSyncRead: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.1", type: CarouselComponent, isStandalone: true, selector: "et-carousel", host: { classAttribute: "et-carousel-host" }, viewQueries: [{ propertyName: "carouselItemsWrapper", first: true, predicate: ["carouselItemsWrapper"], descendants: true, isSignal: true }], hostDirectives: [{ directive: CarouselDirective, inputs: ["loop", "loop", "autoPlay", "autoPlay", "autoPlayTime", "autoPlayTime", "pauseAutoPlayOnHover", "pauseAutoPlayOnHover", "pauseAutoPlayOnFocus", "pauseAutoPlayOnFocus", "transitionType", "transitionType", "transitionDuration", "transitionDuration"] }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.1", type: CarouselComponent, isStandalone: true, selector: "et-carousel", host: { classAttribute: "et-carousel-host" }, viewQueries: [{ propertyName: "carouselItemsWrapper", first: true, predicate: ["carouselItemsWrapper"], descendants: true, isSignal: true }], hostDirectives: [{ directive: CarouselDirective, inputs: ["loop", "loop", "autoPlay", "autoPlay", "autoPlayTime", "autoPlayTime", "pauseAutoPlayOnHover", "pauseAutoPlayOnHover", "pauseAutoPlayOnFocus", "pauseAutoPlayOnFocus", "pauseAutoPlayOnHidden", "pauseAutoPlayOnHidden", "transitionType", "transitionType", "transitionDuration", "transitionDuration"] }], ngImport: i0, template: `
     <div class="et-carousel">
       <div #carouselItemsWrapper class="et-carousel-items">
         <ng-content select="et-carousel-item, [etCarouselItem]" />
@@ -10948,6 +10718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                                 'autoPlayTime',
                                 'pauseAutoPlayOnHover',
                                 'pauseAutoPlayOnFocus',
+                                'pauseAutoPlayOnHidden',
                                 'transitionType',
                                 'transitionDuration',
                             ],
@@ -14960,6 +14731,7 @@ class SelectDirective {
     }
     removeOptionFromSelection(option) {
         this._selectionModel.removeSelectedOption(option);
+        this.input._markAsTouched();
     }
     _controlTouched() {
         this.input._markAsTouched();
@@ -17805,237 +17577,2149 @@ const provideSort = () => {
     return [SORT_HEADER_INTL_PROVIDER];
 };
 
-class TableBusyDirective {
+const STREAM_CONSENT_TOKEN = new InjectionToken('STREAM_CONSENT_TOKEN');
+const STREAM_USER_CONSENT_PROVIDER_TOKEN = new InjectionToken('STREAM_USER_CONSENT_PROVIDER_TOKEN');
+const injectStreamUserConsentProvider = () => inject(STREAM_USER_CONSENT_PROVIDER_TOKEN, { optional: true });
+class StreamConsentDirective {
     constructor() {
-        this.templateRef = inject(TemplateRef);
-        this._contentClassName = 'et-table-busy';
+        this._handler = injectStreamUserConsentProvider();
+        this._localGranted = signal(false, ...(ngDevMode ? [{ debugName: "_localGranted" }] : []));
+        this.isGranted = this._handler
+            ? computed(() => this._handler.isGranted())
+            : this._localGranted;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableBusyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: TableBusyDirective, isStandalone: true, selector: "ng-template[etTableBusy]", ngImport: i0 }); }
+    grant() {
+        if (this._handler) {
+            this._handler.grant();
+        }
+        else {
+            this._localGranted.set(true);
+        }
+    }
+    revoke() {
+        if (this._handler) {
+            this._handler.revoke?.();
+        }
+        else {
+            this._localGranted.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: StreamConsentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: StreamConsentDirective, isStandalone: true, providers: [{ provide: STREAM_CONSENT_TOKEN, useExisting: StreamConsentDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableBusyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: StreamConsentDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'ng-template[etTableBusy]',
+                    providers: [{ provide: STREAM_CONSENT_TOKEN, useExisting: StreamConsentDirective }],
                 }]
         }] });
 
-// eslint-disable-next-line @angular-eslint/directive-selector
-class TableBusyOutletDirective {
+class StreamConsentAcceptDirective {
     constructor() {
-        this.viewContainer = inject(ViewContainerRef);
-        this.elementRef = inject(ElementRef);
+        this.consent = inject(STREAM_CONSENT_TOKEN);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableBusyOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: TableBusyOutletDirective, isStandalone: true, selector: "[tableBusyOutlet]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: StreamConsentAcceptDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: StreamConsentAcceptDirective, isStandalone: true, selector: "[etStreamConsentAccept]", host: { listeners: { "click": "consent.grant()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableBusyOutletDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: StreamConsentAcceptDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[tableBusyOutlet]' }]
+            args: [{
+                    selector: '[etStreamConsentAccept]',
+                    host: {
+                        '(click)': 'consent.grant()',
+                    },
+                }]
         }] });
 
-class TableComponent extends CdkTable {
+const STREAM_CONSENT_CONTENT_TOKEN = new InjectionToken('STREAM_CONSENT_CONTENT_TOKEN');
+class StreamConsentContentDirective {
     constructor() {
-        super(...arguments);
-        this._cdr = inject(ChangeDetectorRef);
-        this.stickyCssClass = 'et-table-sticky';
-        this.needsPositionStickyOnElement = false;
-        this._tableBusyOutlet = viewChild(TableBusyOutletDirective, ...(ngDevMode ? [{ debugName: "_tableBusyOutlet" }] : []));
-        this._tableBusyComponent = contentChild(TableBusyDirective, ...(ngDevMode ? [{ debugName: "_tableBusyComponent" }] : []));
-        this._busy = false;
-        this._isShowingTableBusy = false;
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get busy() {
-        return this._busy;
-    }
-    set busy(value) {
-        this._busy = booleanAttribute(value);
-        this._updateTableBusy();
-    }
-    ngAfterContentInit() {
-        super.ngAfterContentInit();
-        this._updateTableBusy();
-    }
-    _updateTableBusy() {
-        const tableBusyComponent = this._tableBusyComponent();
-        if (!tableBusyComponent) {
-            return;
-        }
-        const shouldShow = this.busy;
-        if (shouldShow === this._isShowingTableBusy) {
-            return;
-        }
-        const container = this._tableBusyOutlet()?.viewContainer;
-        if (!container) {
-            return;
-        }
-        if (shouldShow) {
-            const view = container.createEmbeddedView(tableBusyComponent.templateRef);
-            const rootNode = view.rootNodes[0];
-            if (view.rootNodes.length === 1 && rootNode?.nodeType === document.ELEMENT_NODE) {
-                rootNode.classList.add(tableBusyComponent._contentClassName);
-            }
-        }
-        else {
-            container.clear();
-        }
-        this._isShowingTableBusy = shouldShow;
-        this._cdr.markForCheck();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: TableComponent, isStandalone: true, selector: "et-table, table[et-table]", inputs: { busy: "busy" }, host: { properties: { "class.et-table-fixed-layout": "fixedLayout", "attr.aria-busy": "busy ? true : null" }, classAttribute: "et-table et-data-table__table" }, providers: [
-            { provide: CdkTable, useExisting: TableComponent },
-            { provide: CDK_TABLE, useExisting: TableComponent },
-            { provide: STICKY_POSITIONING_LISTENER, useValue: null },
-        ], queries: [{ propertyName: "_tableBusyComponent", first: true, predicate: TableBusyDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_tableBusyOutlet", first: true, predicate: TableBusyOutletDirective, descendants: true, isSignal: true }], exportAs: ["etTable"], usesInheritance: true, ngImport: i0, template: `
-    <ng-content select="caption" />
-    <ng-content select="colgroup, col" />
-
-    @if (_isServer) {
-      <ng-content />
-    }
-
-    @if (_isNativeHtmlTable) {
-      <thead role="rowgroup">
-        <ng-container headerRowOutlet />
-      </thead>
-      <tbody class="mdc-data-table__content" role="rowgroup">
-        <ng-container rowOutlet />
-        <ng-container noDataRowOutlet />
-      </tbody>
-      <tfoot role="rowgroup">
-        <ng-container footerRowOutlet />
-      </tfoot>
-    } @else {
-      <ng-container headerRowOutlet />
-      <div class="et-table-body">
-        <ng-container rowOutlet />
-        <ng-container tableBusyOutlet />
-      </div>
-      <ng-container noDataRowOutlet />
-      <ng-container footerRowOutlet />
-    }
-  `, isInline: true, styles: [":where(.et-table){--et-table-separator-color: #4c4c4c;--et-table-separator-width: 1px;--et-table-separator-style: solid;--et-table-header-row-min-height: 56px;--et-table-row-display: flex;--et-table-row-min-height: 48px;--et-table-row-inline-padding: 24px;--et-table-cell-display: flex;--et-table-cell-inline-padding: 0;--et-table-cell-block-padding: 0}.et-table{display:block;position:relative}.et-header-row{min-height:var(--et-table-header-row-min-height)}.et-row,.et-footer-row{min-height:var(--et-table-row-min-height)}.et-row,.et-header-row,.et-footer-row{display:var(--et-table-row-display);border-width:0;border-bottom-width:var(--et-table-separator-width);border-style:var(--et-table-separator-style);border-color:var(--et-table-separator-color);align-items:center;box-sizing:border-box}.et-cell,.et-header-cell,.et-footer-cell{padding-inline:var(--et-table-cell-inline-padding);padding-block:var(--et-table-cell-block-padding)}.et-cell:first-of-type,.et-header-cell:first-of-type,.et-footer-cell:first-of-type{padding-inline-start:var(--et-table-row-inline-padding)}.et-cell:last-of-type,.et-header-cell:last-of-type,.et-footer-cell:last-of-type{padding-inline-end:var(--et-table-row-inline-padding)}.et-cell,.et-header-cell,.et-footer-cell{flex:1;display:var(--et-table-cell-display);align-items:center;overflow:hidden;word-wrap:break-word;min-height:inherit;box-sizing:border-box}.et-table-sticky{position:sticky!important}.et-table{table-layout:auto;white-space:normal}.et-table tbody,.et-table tfoot,.et-table thead,.et-cell,.et-footer-cell,.et-header-row,.et-row,.et-footer-row,.et-table .et-header-cell{background:inherit}.et-table et-header-row.et-header-row,.et-table et-row.et-row,.et-table et-footer-row.et-footer-cell{height:unset}et-header-cell.et-header-cell,et-cell.et-cell,et-footer-cell.et-footer-cell{align-self:stretch}\n"], dependencies: [{ kind: "directive", type: HeaderRowOutlet, selector: "[headerRowOutlet]" }, { kind: "directive", type: DataRowOutlet, selector: "[rowOutlet]" }, { kind: "directive", type: NoDataRowOutlet, selector: "[noDataRowOutlet]" }, { kind: "directive", type: FooterRowOutlet, selector: "[footerRowOutlet]" }, { kind: "directive", type: TableBusyOutletDirective, selector: "[tableBusyOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'et-table, table[et-table]', exportAs: 'etTable', template: `
-    <ng-content select="caption" />
-    <ng-content select="colgroup, col" />
-
-    @if (_isServer) {
-      <ng-content />
-    }
-
-    @if (_isNativeHtmlTable) {
-      <thead role="rowgroup">
-        <ng-container headerRowOutlet />
-      </thead>
-      <tbody class="mdc-data-table__content" role="rowgroup">
-        <ng-container rowOutlet />
-        <ng-container noDataRowOutlet />
-      </tbody>
-      <tfoot role="rowgroup">
-        <ng-container footerRowOutlet />
-      </tfoot>
-    } @else {
-      <ng-container headerRowOutlet />
-      <div class="et-table-body">
-        <ng-container rowOutlet />
-        <ng-container tableBusyOutlet />
-      </div>
-      <ng-container noDataRowOutlet />
-      <ng-container footerRowOutlet />
+        this.templateRef = inject(TemplateRef);
     }
-  `, host: {
-                        class: 'et-table et-data-table__table',
-                        '[class.et-table-fixed-layout]': 'fixedLayout',
-                        '[attr.aria-busy]': 'busy ? true : null',
-                    }, providers: [
-                        { provide: CdkTable, useExisting: TableComponent },
-                        { provide: CDK_TABLE, useExisting: TableComponent },
-                        { provide: STICKY_POSITIONING_LISTENER, useValue: null },
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, imports: [HeaderRowOutlet, DataRowOutlet, NoDataRowOutlet, FooterRowOutlet, TableBusyOutletDirective], styles: [":where(.et-table){--et-table-separator-color: #4c4c4c;--et-table-separator-width: 1px;--et-table-separator-style: solid;--et-table-header-row-min-height: 56px;--et-table-row-display: flex;--et-table-row-min-height: 48px;--et-table-row-inline-padding: 24px;--et-table-cell-display: flex;--et-table-cell-inline-padding: 0;--et-table-cell-block-padding: 0}.et-table{display:block;position:relative}.et-header-row{min-height:var(--et-table-header-row-min-height)}.et-row,.et-footer-row{min-height:var(--et-table-row-min-height)}.et-row,.et-header-row,.et-footer-row{display:var(--et-table-row-display);border-width:0;border-bottom-width:var(--et-table-separator-width);border-style:var(--et-table-separator-style);border-color:var(--et-table-separator-color);align-items:center;box-sizing:border-box}.et-cell,.et-header-cell,.et-footer-cell{padding-inline:var(--et-table-cell-inline-padding);padding-block:var(--et-table-cell-block-padding)}.et-cell:first-of-type,.et-header-cell:first-of-type,.et-footer-cell:first-of-type{padding-inline-start:var(--et-table-row-inline-padding)}.et-cell:last-of-type,.et-header-cell:last-of-type,.et-footer-cell:last-of-type{padding-inline-end:var(--et-table-row-inline-padding)}.et-cell,.et-header-cell,.et-footer-cell{flex:1;display:var(--et-table-cell-display);align-items:center;overflow:hidden;word-wrap:break-word;min-height:inherit;box-sizing:border-box}.et-table-sticky{position:sticky!important}.et-table{table-layout:auto;white-space:normal}.et-table tbody,.et-table tfoot,.et-table thead,.et-cell,.et-footer-cell,.et-header-row,.et-row,.et-footer-row,.et-table .et-header-cell{background:inherit}.et-table et-header-row.et-header-row,.et-table et-row.et-row,.et-table et-footer-row.et-footer-cell{height:unset}et-header-cell.et-header-cell,et-cell.et-cell,et-footer-cell.et-footer-cell{align-self:stretch}\n"] }]
-        }], propDecorators: { _tableBusyOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TableBusyOutletDirective), { isSignal: true }] }], _tableBusyComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TableBusyDirective), { isSignal: true }] }], busy: [{
-                type: Input
-            }] } });
-
-const MAX_SAFE_INTEGER = 9007199254740991;
-
-class CellDirective extends CdkCell {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CellDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: CellDirective, isStandalone: true, selector: "et-cell, td[et-cell]", host: { classAttribute: "et-cell et-data-table__cell" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: StreamConsentContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: StreamConsentContentDirective, isStandalone: true, selector: "[etStreamConsentContent]", providers: [{ provide: STREAM_CONSENT_CONTENT_TOKEN, useExisting: StreamConsentContentDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CellDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: StreamConsentContentDirective, decorators: [{
             type: Directive,
             args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'et-cell, td[et-cell]',
-                    host: {
-                        class: 'et-cell et-data-table__cell',
-                    },
+                    selector: '[etStreamConsentContent]',
+                    providers: [{ provide: STREAM_CONSENT_CONTENT_TOKEN, useExisting: StreamConsentContentDirective }],
                 }]
         }] });
 
-class CellDefDirective extends CdkCellDef {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CellDefDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: CellDefDirective, isStandalone: true, selector: "[etCellDef]", providers: [{ provide: CdkCellDef, useExisting: CellDefDirective }], usesInheritance: true, ngImport: i0 }); }
+const STREAM_CONSENT_PLACEHOLDER_TOKEN = new InjectionToken('STREAM_CONSENT_PLACEHOLDER_TOKEN');
+class StreamConsentPlaceholderDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: StreamConsentPlaceholderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: StreamConsentPlaceholderDirective, isStandalone: true, selector: "[etStreamConsentPlaceholder]", providers: [{ provide: STREAM_CONSENT_PLACEHOLDER_TOKEN, useExisting: StreamConsentPlaceholderDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CellDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: StreamConsentPlaceholderDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[etCellDef]',
-                    providers: [{ provide: CdkCellDef, useExisting: CellDefDirective }],
+                    selector: '[etStreamConsentPlaceholder]',
+                    providers: [{ provide: STREAM_CONSENT_PLACEHOLDER_TOKEN, useExisting: StreamConsentPlaceholderDirective }],
                 }]
         }] });
 
-class FooterCellDirective extends CdkFooterCell {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FooterCellDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: FooterCellDirective, isStandalone: true, selector: "et-footer-cell, td[et-footer-cell]", host: { classAttribute: "et-footer-cell et-data-table__cell" }, usesInheritance: true, ngImport: i0 }); }
+class StreamConsentComponent {
+    constructor() {
+        this.consent = inject(STREAM_CONSENT_TOKEN);
+        this.contentSlot = contentChild(StreamConsentContentDirective, ...(ngDevMode ? [{ debugName: "contentSlot" }] : []));
+        this.placeholderSlot = contentChild(StreamConsentPlaceholderDirective, ...(ngDevMode ? [{ debugName: "placeholderSlot" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: StreamConsentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: StreamConsentComponent, isStandalone: true, selector: "et-stream-consent", host: { classAttribute: "et-stream-consent" }, queries: [{ propertyName: "contentSlot", first: true, predicate: StreamConsentContentDirective, descendants: true, isSignal: true }, { propertyName: "placeholderSlot", first: true, predicate: StreamConsentPlaceholderDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: StreamConsentDirective }], ngImport: i0, template: `
+    @if (consent.isGranted()) {
+      <ng-container [ngTemplateOutlet]="contentSlot()?.templateRef ?? null" />
+    } @else {
+      <ng-container [ngTemplateOutlet]="placeholderSlot()?.templateRef ?? null" />
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FooterCellDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: StreamConsentComponent, decorators: [{
+            type: Component,
             args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'et-footer-cell, td[et-footer-cell]',
+                    selector: 'et-stream-consent',
+                    template: `
+    @if (consent.isGranted()) {
+      <ng-container [ngTemplateOutlet]="contentSlot()?.templateRef ?? null" />
+    } @else {
+      <ng-container [ngTemplateOutlet]="placeholderSlot()?.templateRef ?? null" />
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [{ directive: StreamConsentDirective }],
+                    imports: [NgTemplateOutlet],
                     host: {
-                        class: 'et-footer-cell et-data-table__cell',
+                        class: 'et-stream-consent',
                     },
                 }]
-        }] });
-
-class FooterCellDefDirective extends CdkFooterCellDef {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FooterCellDefDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: FooterCellDefDirective, isStandalone: true, selector: "[etFooterCellDef]", providers: [{ provide: CdkFooterCellDef, useExisting: FooterCellDefDirective }], usesInheritance: true, ngImport: i0 }); }
+        }], propDecorators: { contentSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StreamConsentContentDirective), { isSignal: true }] }], placeholderSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StreamConsentPlaceholderDirective), { isSignal: true }] }] } });
+
+const STREAM_PLAYER_TOKEN = new InjectionToken('STREAM_PLAYER_TOKEN');
+
+const DAILYMOTION_PLAYER_TOKEN = new InjectionToken('DAILYMOTION_PLAYER_TOKEN');
+const DEFAULT_STATE$7 = {
+    isReady: false,
+    isPlaying: false,
+    isMuted: false,
+    isEnded: false,
+    duration: null,
+    currentTime: null,
+};
+class DailymotionPlayerDirective {
+    constructor() {
+        this.el = injectHostElement();
+        this.platformId = inject(PLATFORM_ID);
+        this.CAPABILITIES = {
+            canPlay: false,
+            canPause: false,
+            canMute: false,
+            canSeek: false,
+            canGetDuration: false,
+            isLiveCapable: true,
+        };
+        this.state = signal({ ...DEFAULT_STATE$7 }, ...(ngDevMode ? [{ debugName: "state" }] : []));
+        this.videoId = input.required(...(ngDevMode ? [{ debugName: "videoId" }] : []));
+        this.startTime = input(0, { ...(ngDevMode ? { debugName: "startTime" } : {}), transform: numberAttribute });
+        this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.height = input('100%', ...(ngDevMode ? [{ debugName: "height" }] : []));
+        this.playerResource = rxResource({
+            params: () => (isPlatformBrowser(this.platformId) ? this.videoId() : null),
+            stream: ({ params: videoId }) => {
+                if (!videoId)
+                    return EMPTY;
+                return new Observable((subscriber) => {
+                    const iframe = document.createElement('iframe');
+                    const qs = new URLSearchParams({ autoplay: '0' });
+                    const startTime = this.startTime();
+                    if (startTime > 0)
+                        qs.set('start', String(startTime));
+                    const w = this.width();
+                    const h = this.height();
+                    iframe.src = `https://www.dailymotion.com/embed/video/${videoId}?${qs}`;
+                    iframe.width = typeof w === 'number' ? String(w) : w;
+                    iframe.height = typeof h === 'number' ? String(h) : h;
+                    iframe.style.border = 'none';
+                    iframe.allow = 'autoplay; encrypted-media';
+                    iframe.allowFullscreen = true;
+                    iframe.scrolling = 'no';
+                    iframe.addEventListener('load', () => {
+                        this.state.set({ ...DEFAULT_STATE$7, isReady: true });
+                        subscriber.next();
+                    });
+                    this.el.appendChild(iframe);
+                    return () => {
+                        if (this.el.contains(iframe))
+                            this.el.removeChild(iframe);
+                        this.state.set({ ...DEFAULT_STATE$7 });
+                    };
+                });
+            },
+        });
+        this.error = computed(() => (this.playerResource.isLoading() ? undefined : this.playerResource.error()), ...(ngDevMode ? [{ debugName: "error" }] : []));
+    }
+    // Dailymotion embeds have no programmatic control API without a dashboard-created player ID
+    play() {
+        // no-op
+    }
+    pause() {
+        // no-op
+    }
+    mute() {
+        // no-op
+    }
+    unmute() {
+        // no-op
+    }
+    seek() {
+        // no-op
+    }
+    retry() {
+        this.playerResource.reload();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DailymotionPlayerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: DailymotionPlayerDirective, isStandalone: true, inputs: { videoId: { classPropertyName: "videoId", publicName: "videoId", isSignal: true, isRequired: true, transformFunction: null }, startTime: { classPropertyName: "startTime", publicName: "startTime", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            { provide: DAILYMOTION_PLAYER_TOKEN, useExisting: DailymotionPlayerDirective },
+            { provide: STREAM_PLAYER_TOKEN, useExisting: DailymotionPlayerDirective },
+        ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FooterCellDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DailymotionPlayerDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[etFooterCellDef]',
-                    providers: [{ provide: CdkFooterCellDef, useExisting: FooterCellDefDirective }],
+                    providers: [
+                        { provide: DAILYMOTION_PLAYER_TOKEN, useExisting: DailymotionPlayerDirective },
+                        { provide: STREAM_PLAYER_TOKEN, useExisting: DailymotionPlayerDirective },
+                    ],
                 }]
-        }] });
+        }], propDecorators: { videoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "videoId", required: true }] }], startTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "startTime", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
 
-class HeaderCellDirective extends CdkHeaderCell {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HeaderCellDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HeaderCellDirective, isStandalone: true, selector: "et-header-cell, th[et-header-cell]", host: { attributes: { "role": "columnheader" }, classAttribute: "et-header-cell et-data-table__header-cell" }, usesInheritance: true, ngImport: i0 }); }
+class DailymotionPlayerComponent {
+    constructor() {
+        this.player = inject(DAILYMOTION_PLAYER_TOKEN);
+        this.state = this.player.state;
+        this.error = this.player.error;
+    }
+    retry() {
+        this.player.retry();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DailymotionPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: DailymotionPlayerComponent, isStandalone: true, selector: "et-dailymotion-player", host: { classAttribute: "et-dailymotion-player" }, hostDirectives: [{ directive: DailymotionPlayerDirective, inputs: ["videoId", "videoId", "startTime", "startTime", "width", "width", "height", "height"] }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HeaderCellDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DailymotionPlayerComponent, decorators: [{
+            type: Component,
             args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'et-header-cell, th[et-header-cell]',
+                    selector: 'et-dailymotion-player',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [
+                        {
+                            directive: DailymotionPlayerDirective,
+                            inputs: ['videoId', 'startTime', 'width', 'height'],
+                        },
+                    ],
                     host: {
-                        class: 'et-header-cell et-data-table__header-cell',
-                        role: 'columnheader',
+                        class: 'et-dailymotion-player',
                     },
                 }]
         }] });
 
-class HeaderCellDefDirective extends CdkHeaderCellDef {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HeaderCellDefDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+const [, injectStreamScriptLoader] = createRootProvider(() => {
+    const document = inject(DOCUMENT);
+    const cache = new Map();
+    const mountedScripts = new Set();
+    const renderer = injectRenderer();
+    const load = (src) => {
+        const cached = cache.get(src);
+        if (cached)
+            return cached;
+        const obs = new Observable((subscriber) => {
+            const isMounted = mountedScripts.has(src);
+            if (isMounted) {
+                subscriber.next();
+                subscriber.complete();
+                return;
+            }
+            const script = renderer.createElement('script');
+            script.src = src;
+            script.async = true;
+            renderer.listen(script, 'load', () => {
+                subscriber.next();
+                subscriber.complete();
+                mountedScripts.add(src);
+            });
+            renderer.listen(script, 'error', () => {
+                cache.delete(src);
+                script.remove();
+                mountedScripts.delete(src);
+                subscriber.error(new Error(`Failed to load script: ${src}`));
+            });
+            renderer.appendChild(document.head, script);
+        }).pipe(shareReplay(1));
+        cache.set(src, obs);
+        return obs;
+    };
+    return { load };
+}, { name: 'Stream Script Loader' });
+
+const FB_SDK_URL = 'https://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v3.2';
+const FACEBOOK_PLAYER_TOKEN = new InjectionToken('FACEBOOK_PLAYER_TOKEN');
+const DEFAULT_STATE$6 = {
+    isReady: false,
+    isPlaying: false,
+    isMuted: false,
+    isEnded: false,
+    duration: null,
+    currentTime: null,
+};
+class FacebookPlayerDirective {
+    constructor() {
+        this.el = injectHostElement();
+        this.scriptLoader = injectStreamScriptLoader();
+        this.platformId = inject(PLATFORM_ID);
+        this.CAPABILITIES = {
+            canPlay: true,
+            canPause: true,
+            canMute: true,
+            canSeek: true,
+            canGetDuration: true,
+            isLiveCapable: false,
+        };
+        this.state = signal({ ...DEFAULT_STATE$6 }, ...(ngDevMode ? [{ debugName: "state" }] : []));
+        /** Numeric Facebook video ID from the video URL. */
+        this.videoId = input.required(...(ngDevMode ? [{ debugName: "videoId" }] : []));
+        this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.height = input('100%', ...(ngDevMode ? [{ debugName: "height" }] : []));
+        this.playerResource = rxResource({
+            params: () => (isPlatformBrowser(this.platformId) ? this.videoId() : null),
+            stream: ({ params: videoId }) => {
+                if (!videoId)
+                    return EMPTY;
+                const videoUrl = `https://www.facebook.com/video/${videoId}`;
+                return new Observable((subscriber) => {
+                    const win = window;
+                    const playerSubscriptions = [];
+                    let active = true;
+                    let loaderSub = null;
+                    let xfbmlReadyHandler = null;
+                    const createEmbed = () => {
+                        if (!active)
+                            return;
+                        const containerId = `et-fb-${Math.random().toString(36).slice(2)}`;
+                        xfbmlReadyHandler = (rawMsg) => {
+                            const msg = rawMsg;
+                            if (msg.type !== 'video' || msg.id !== containerId)
+                                return;
+                            const player = msg.instance;
+                            this.state.update((s) => ({ ...s, isReady: true }));
+                            subscriber.next(player);
+                            playerSubscriptions.push(player.subscribe('startedPlaying', () => {
+                                this.state.update((s) => ({ ...s, isPlaying: true, isEnded: false }));
+                            }));
+                            playerSubscriptions.push(player.subscribe('paused', () => {
+                                this.state.update((s) => ({ ...s, isPlaying: false }));
+                            }));
+                            playerSubscriptions.push(player.subscribe('finishedPlaying', () => {
+                                this.state.update((s) => ({ ...s, isPlaying: false, isEnded: true }));
+                            }));
+                        };
+                        win.FB.Event.subscribe('xfbml.ready', xfbmlReadyHandler);
+                        const w = this.width();
+                        const h = this.height();
+                        const container = document.createElement('div');
+                        container.id = containerId;
+                        container.className = 'fb-video';
+                        container.dataset['href'] = videoUrl;
+                        container.dataset['width'] = typeof w === 'number' ? String(w) : 'auto';
+                        container.dataset['showText'] = 'false';
+                        this.el.style.display = 'block';
+                        this.el.style.width = typeof w === 'number' ? `${w}px` : w;
+                        if (typeof h === 'number')
+                            this.el.style.height = `${h}px`;
+                        this.el.appendChild(container);
+                        win.FB.XFBML.parse(this.el);
+                    };
+                    if (win.FB) {
+                        createEmbed();
+                    }
+                    else {
+                        const prev = win.fbAsyncInit;
+                        win.fbAsyncInit = () => {
+                            prev?.();
+                            createEmbed();
+                        };
+                        loaderSub = this.scriptLoader.load(FB_SDK_URL).subscribe({
+                            error: (e) => subscriber.error(e),
+                        });
+                    }
+                    return () => {
+                        active = false;
+                        loaderSub?.unsubscribe();
+                        if (xfbmlReadyHandler)
+                            win.FB?.Event.unsubscribe('xfbml.ready', xfbmlReadyHandler);
+                        for (const sub of playerSubscriptions)
+                            sub.release();
+                        this.el.innerHTML = '';
+                        this.state.set({ ...DEFAULT_STATE$6 });
+                    };
+                });
+            },
+        });
+        this.error = computed(() => (this.playerResource.isLoading() ? undefined : this.playerResource.error()), ...(ngDevMode ? [{ debugName: "error" }] : []));
+    }
+    play() {
+        this.playerResource.value()?.play();
+    }
+    pause() {
+        this.playerResource.value()?.pause();
+    }
+    mute() {
+        this.playerResource.value()?.mute();
+        this.state.update((s) => ({ ...s, isMuted: true }));
+    }
+    unmute() {
+        this.playerResource.value()?.unmute();
+        this.state.update((s) => ({ ...s, isMuted: false }));
+    }
+    seek(seconds) {
+        this.playerResource.value()?.seek(seconds);
+    }
+    retry() {
+        this.playerResource.reload();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FacebookPlayerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: FacebookPlayerDirective, isStandalone: true, inputs: { videoId: { classPropertyName: "videoId", publicName: "videoId", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            { provide: FACEBOOK_PLAYER_TOKEN, useExisting: FacebookPlayerDirective },
+            { provide: STREAM_PLAYER_TOKEN, useExisting: FacebookPlayerDirective },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FacebookPlayerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        { provide: FACEBOOK_PLAYER_TOKEN, useExisting: FacebookPlayerDirective },
+                        { provide: STREAM_PLAYER_TOKEN, useExisting: FacebookPlayerDirective },
+                    ],
+                }]
+        }], propDecorators: { videoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "videoId", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
+
+class FacebookPlayerComponent {
+    constructor() {
+        this.player = inject(FACEBOOK_PLAYER_TOKEN);
+        this.state = this.player.state;
+        this.error = this.player.error;
+    }
+    retry() {
+        this.player.retry();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FacebookPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: FacebookPlayerComponent, isStandalone: true, selector: "et-facebook-player", host: { classAttribute: "et-facebook-player" }, hostDirectives: [{ directive: FacebookPlayerDirective, inputs: ["videoId", "videoId", "width", "width", "height", "height"] }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FacebookPlayerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'et-facebook-player',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [
+                        {
+                            directive: FacebookPlayerDirective,
+                            inputs: ['videoId', 'width', 'height'],
+                        },
+                    ],
+                    host: {
+                        class: 'et-facebook-player',
+                    },
+                }]
+        }] });
+
+const KICK_PLAYER_TOKEN = new InjectionToken('KICK_PLAYER_TOKEN');
+const DEFAULT_STATE$5 = {
+    isReady: false,
+    isPlaying: false,
+    isMuted: false,
+    isEnded: false,
+    duration: null,
+    currentTime: null,
+};
+class KickPlayerDirective {
+    constructor() {
+        this.el = injectHostElement();
+        this.platformId = inject(PLATFORM_ID);
+        this.CAPABILITIES = {
+            canPlay: false,
+            canPause: false,
+            canMute: false,
+            canSeek: false,
+            canGetDuration: false,
+            isLiveCapable: true,
+        };
+        this.state = signal({ ...DEFAULT_STATE$5 }, ...(ngDevMode ? [{ debugName: "state" }] : []));
+        this.channel = input.required(...(ngDevMode ? [{ debugName: "channel" }] : []));
+        this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.height = input('100%', ...(ngDevMode ? [{ debugName: "height" }] : []));
+        this.muted = input(false, { ...(ngDevMode ? { debugName: "muted" } : {}), transform: booleanAttribute });
+        this.playerResource = rxResource({
+            params: () => (isPlatformBrowser(this.platformId) ? this.channel() : null),
+            stream: ({ params: channel }) => {
+                if (!channel)
+                    return EMPTY;
+                return new Observable((subscriber) => {
+                    const iframe = document.createElement('iframe');
+                    const qs = new URLSearchParams({ parent: window.location.hostname });
+                    if (this.muted())
+                        qs.set('muted', 'true');
+                    iframe.src = `https://player.kick.com/${channel}?${qs}`;
+                    iframe.width = String(this.width());
+                    iframe.height = String(this.height());
+                    iframe.style.border = 'none';
+                    iframe.scrolling = 'no';
+                    iframe.allowFullscreen = true;
+                    iframe.allow = 'autoplay; encrypted-media';
+                    iframe.addEventListener('load', () => {
+                        this.state.set({ ...DEFAULT_STATE$5, isReady: true });
+                        subscriber.next();
+                    });
+                    this.el.appendChild(iframe);
+                    return () => {
+                        if (this.el.contains(iframe)) {
+                            this.el.removeChild(iframe);
+                        }
+                        this.state.set({ ...DEFAULT_STATE$5 });
+                    };
+                });
+            },
+        });
+        this.error = computed(() => (this.playerResource.isLoading() ? undefined : this.playerResource.error()), ...(ngDevMode ? [{ debugName: "error" }] : []));
+    }
+    // Kick embeds have no programmatic control API — these are intentional no-ops.
+    play() {
+        // no-op
+    }
+    pause() {
+        // no-op
+    }
+    mute() {
+        // no-op
+    }
+    unmute() {
+        // no-op
+    }
+    seek() {
+        // no-op
+    }
+    retry() {
+        this.playerResource.reload();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: KickPlayerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: KickPlayerDirective, isStandalone: true, inputs: { channel: { classPropertyName: "channel", publicName: "channel", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, muted: { classPropertyName: "muted", publicName: "muted", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            { provide: KICK_PLAYER_TOKEN, useExisting: KickPlayerDirective },
+            { provide: STREAM_PLAYER_TOKEN, useExisting: KickPlayerDirective },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: KickPlayerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        { provide: KICK_PLAYER_TOKEN, useExisting: KickPlayerDirective },
+                        { provide: STREAM_PLAYER_TOKEN, useExisting: KickPlayerDirective },
+                    ],
+                }]
+        }], propDecorators: { channel: [{ type: i0.Input, args: [{ isSignal: true, alias: "channel", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], muted: [{ type: i0.Input, args: [{ isSignal: true, alias: "muted", required: false }] }] } });
+
+class KickPlayerComponent {
+    constructor() {
+        this.player = inject(KICK_PLAYER_TOKEN);
+        this.state = this.player.state;
+        this.error = this.player.error;
+    }
+    retry() {
+        this.player.retry();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: KickPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: KickPlayerComponent, isStandalone: true, selector: "et-kick-player", host: { classAttribute: "et-kick-player" }, hostDirectives: [{ directive: KickPlayerDirective, inputs: ["channel", "channel", "width", "width", "height", "height", "muted", "muted"] }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: KickPlayerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'et-kick-player',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [
+                        {
+                            directive: KickPlayerDirective,
+                            inputs: ['channel', 'width', 'height', 'muted'],
+                        },
+                    ],
+                    host: {
+                        class: 'et-kick-player',
+                    },
+                }]
+        }] });
+
+const SOOP_PLAYER_TOKEN = new InjectionToken('SOOP_PLAYER_TOKEN');
+const DEFAULT_STATE$4 = {
+    isReady: false,
+    isPlaying: false,
+    isMuted: false,
+    isEnded: false,
+    duration: null,
+    currentTime: null,
+};
+class SoopPlayerDirective {
+    constructor() {
+        this.el = injectHostElement();
+        this.platformId = inject(PLATFORM_ID);
+        this.CAPABILITIES = {
+            canPlay: false,
+            canPause: false,
+            canMute: false,
+            canSeek: false,
+            canGetDuration: false,
+            isLiveCapable: true,
+        };
+        this.state = signal({ ...DEFAULT_STATE$4 }, ...(ngDevMode ? [{ debugName: "state" }] : []));
+        /** Streamer user ID — used for live streams (play.afreecatv.com/{userId}/embed). */
+        this.userId = input(null, ...(ngDevMode ? [{ debugName: "userId" }] : []));
+        /** VOD number — used for recorded broadcasts (vod.afreecatv.com/player/{videoId}). */
+        this.videoId = input(null, ...(ngDevMode ? [{ debugName: "videoId" }] : []));
+        this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.height = input('100%', ...(ngDevMode ? [{ debugName: "height" }] : []));
+        this.playerResource = rxResource({
+            params: () => {
+                if (!isPlatformBrowser(this.platformId))
+                    return null;
+                const userId = this.userId();
+                const videoId = this.videoId();
+                if (!userId && !videoId)
+                    return null;
+                return { userId, videoId };
+            },
+            stream: ({ params }) => {
+                if (!params)
+                    return EMPTY;
+                return new Observable((subscriber) => {
+                    const iframe = document.createElement('iframe');
+                    const w = this.width();
+                    const h = this.height();
+                    if (params.userId) {
+                        iframe.src = `https://play.afreecatv.com/${params.userId}/embed`;
+                    }
+                    else {
+                        iframe.src = `https://vod.afreecatv.com/player/${params.videoId}`;
+                    }
+                    iframe.width = typeof w === 'number' ? String(w) : w;
+                    iframe.height = typeof h === 'number' ? String(h) : h;
+                    iframe.style.border = 'none';
+                    iframe.scrolling = 'no';
+                    iframe.allowFullscreen = true;
+                    iframe.allow = 'autoplay; encrypted-media';
+                    iframe.addEventListener('load', () => {
+                        this.state.set({ ...DEFAULT_STATE$4, isReady: true });
+                        subscriber.next();
+                    });
+                    this.el.appendChild(iframe);
+                    return () => {
+                        if (this.el.contains(iframe)) {
+                            this.el.removeChild(iframe);
+                        }
+                        this.state.set({ ...DEFAULT_STATE$4 });
+                    };
+                });
+            },
+        });
+        this.error = computed(() => (this.playerResource.isLoading() ? undefined : this.playerResource.error()), ...(ngDevMode ? [{ debugName: "error" }] : []));
+    }
+    // SOOP embeds have no programmatic control API — these are intentional no-ops.
+    play() {
+        // no-op
+    }
+    pause() {
+        // no-op
+    }
+    mute() {
+        // no-op
+    }
+    unmute() {
+        // no-op
+    }
+    seek() {
+        // no-op
+    }
+    retry() {
+        this.playerResource.reload();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SoopPlayerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: SoopPlayerDirective, isStandalone: true, inputs: { userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null }, videoId: { classPropertyName: "videoId", publicName: "videoId", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            { provide: SOOP_PLAYER_TOKEN, useExisting: SoopPlayerDirective },
+            { provide: STREAM_PLAYER_TOKEN, useExisting: SoopPlayerDirective },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SoopPlayerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        { provide: SOOP_PLAYER_TOKEN, useExisting: SoopPlayerDirective },
+                        { provide: STREAM_PLAYER_TOKEN, useExisting: SoopPlayerDirective },
+                    ],
+                }]
+        }], propDecorators: { userId: [{ type: i0.Input, args: [{ isSignal: true, alias: "userId", required: false }] }], videoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "videoId", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
+
+class SoopPlayerComponent {
+    constructor() {
+        this.player = inject(SOOP_PLAYER_TOKEN);
+        this.state = this.player.state;
+        this.error = this.player.error;
+    }
+    retry() {
+        this.player.retry();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SoopPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: SoopPlayerComponent, isStandalone: true, selector: "et-soop-player", host: { classAttribute: "et-soop-player" }, hostDirectives: [{ directive: SoopPlayerDirective, inputs: ["userId", "userId", "videoId", "videoId", "width", "width", "height", "height"] }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SoopPlayerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'et-soop-player',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [
+                        {
+                            directive: SoopPlayerDirective,
+                            inputs: ['userId', 'videoId', 'width', 'height'],
+                        },
+                    ],
+                    host: {
+                        class: 'et-soop-player',
+                    },
+                }]
+        }] });
+
+const TIKTOK_PLAYER_TOKEN = new InjectionToken('TIKTOK_PLAYER_TOKEN');
+const DEFAULT_STATE$3 = {
+    isReady: false,
+    isPlaying: false,
+    isMuted: false,
+    isEnded: false,
+    duration: null,
+    currentTime: null,
+};
+class TikTokPlayerDirective {
+    constructor() {
+        this.el = injectHostElement();
+        this.platformId = inject(PLATFORM_ID);
+        this.CAPABILITIES = {
+            canPlay: false,
+            canPause: false,
+            canMute: false,
+            canSeek: false,
+            canGetDuration: false,
+            isLiveCapable: false,
+        };
+        this.state = signal({ ...DEFAULT_STATE$3 }, ...(ngDevMode ? [{ debugName: "state" }] : []));
+        /** Numeric TikTok video ID from the post URL. */
+        this.videoId = input.required(...(ngDevMode ? [{ debugName: "videoId" }] : []));
+        this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.height = input('100%', ...(ngDevMode ? [{ debugName: "height" }] : []));
+        this.playerResource = rxResource({
+            params: () => (isPlatformBrowser(this.platformId) ? this.videoId() : null),
+            stream: ({ params: videoId }) => {
+                if (!videoId)
+                    return EMPTY;
+                return new Observable((subscriber) => {
+                    const iframe = document.createElement('iframe');
+                    const w = this.width();
+                    const h = this.height();
+                    iframe.src = `https://www.tiktok.com/embed/v2/${videoId}`;
+                    iframe.width = typeof w === 'number' ? String(w) : w;
+                    iframe.height = typeof h === 'number' ? String(h) : h;
+                    iframe.style.border = 'none';
+                    iframe.scrolling = 'no';
+                    iframe.allowFullscreen = true;
+                    iframe.allow = 'autoplay; encrypted-media';
+                    iframe.addEventListener('load', () => {
+                        this.state.set({ ...DEFAULT_STATE$3, isReady: true });
+                        subscriber.next();
+                    });
+                    this.el.appendChild(iframe);
+                    return () => {
+                        if (this.el.contains(iframe)) {
+                            this.el.removeChild(iframe);
+                        }
+                        this.state.set({ ...DEFAULT_STATE$3 });
+                    };
+                });
+            },
+        });
+        this.error = computed(() => (this.playerResource.isLoading() ? undefined : this.playerResource.error()), ...(ngDevMode ? [{ debugName: "error" }] : []));
+    }
+    // TikTok embeds have no programmatic control API — these are intentional no-ops.
+    play() {
+        // no-op
+    }
+    pause() {
+        // no-op
+    }
+    mute() {
+        // no-op
+    }
+    unmute() {
+        // no-op
+    }
+    seek() {
+        // no-op
+    }
+    retry() {
+        this.playerResource.reload();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TikTokPlayerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: TikTokPlayerDirective, isStandalone: true, inputs: { videoId: { classPropertyName: "videoId", publicName: "videoId", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            { provide: TIKTOK_PLAYER_TOKEN, useExisting: TikTokPlayerDirective },
+            { provide: STREAM_PLAYER_TOKEN, useExisting: TikTokPlayerDirective },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TikTokPlayerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        { provide: TIKTOK_PLAYER_TOKEN, useExisting: TikTokPlayerDirective },
+                        { provide: STREAM_PLAYER_TOKEN, useExisting: TikTokPlayerDirective },
+                    ],
+                }]
+        }], propDecorators: { videoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "videoId", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
+
+class TikTokPlayerComponent {
+    constructor() {
+        this.player = inject(TIKTOK_PLAYER_TOKEN);
+        this.state = this.player.state;
+        this.error = this.player.error;
+    }
+    retry() {
+        this.player.retry();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TikTokPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: TikTokPlayerComponent, isStandalone: true, selector: "et-tiktok-player", host: { classAttribute: "et-tiktok-player" }, hostDirectives: [{ directive: TikTokPlayerDirective, inputs: ["videoId", "videoId", "width", "width", "height", "height"] }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TikTokPlayerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'et-tiktok-player',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [
+                        {
+                            directive: TikTokPlayerDirective,
+                            inputs: ['videoId', 'width', 'height'],
+                        },
+                    ],
+                    host: {
+                        class: 'et-tiktok-player',
+                    },
+                }]
+        }] });
+
+const TWITCH_EMBED_URL = 'https://embed.twitch.tv/embed/v1.js';
+const TWITCH_PLAYER_TOKEN = new InjectionToken('TWITCH_PLAYER_TOKEN');
+const DEFAULT_STATE$2 = {
+    isReady: false,
+    isPlaying: false,
+    isMuted: false,
+    isEnded: false,
+    duration: null,
+    currentTime: null,
+};
+class TwitchPlayerDirective {
+    constructor() {
+        this.el = injectHostElement();
+        this.scriptLoader = injectStreamScriptLoader();
+        this.platformId = inject(PLATFORM_ID);
+        this.CAPABILITIES = {
+            canPlay: true,
+            canPause: true,
+            canMute: true,
+            canSeek: true,
+            canGetDuration: true,
+            isLiveCapable: true,
+        };
+        this.state = signal({ ...DEFAULT_STATE$2 }, ...(ngDevMode ? [{ debugName: "state" }] : []));
+        /** Live channel name. Use either `channel` (live) or `video` (VOD), not both. */
+        this.channel = input(null, ...(ngDevMode ? [{ debugName: "channel" }] : []));
+        /** VOD video ID. Use either `channel` (live) or `video` (VOD), not both. */
+        this.video = input(null, ...(ngDevMode ? [{ debugName: "video" }] : []));
+        this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.height = input('100%', ...(ngDevMode ? [{ debugName: "height" }] : []));
+        this.autoplay = input(false, { ...(ngDevMode ? { debugName: "autoplay" } : {}), transform: booleanAttribute });
+        this.startTime = input(0, { ...(ngDevMode ? { debugName: "startTime" } : {}), transform: numberAttribute });
+        this.playerResource = rxResource({
+            params: () => {
+                if (!isPlatformBrowser(this.platformId))
+                    return null;
+                const channel = this.channel();
+                const video = this.video();
+                if (!channel && !video) {
+                    if (isDevMode())
+                        console.warn('[et-twitch-player] Either `channel` or `video` input is required.');
+                    return null;
+                }
+                return { channel, video };
+            },
+            stream: ({ params }) => {
+                if (!params)
+                    return EMPTY;
+                return this.scriptLoader.load(TWITCH_EMBED_URL).pipe(switchMap(() => new Observable((subscriber) => {
+                    const win = window;
+                    const TwitchEmbed = win.Twitch?.Embed;
+                    if (!TwitchEmbed) {
+                        if (isDevMode())
+                            console.error('[et-twitch-player] Twitch Embed SDK not available after script load.');
+                        subscriber.error(new Error('Twitch Embed SDK not available'));
+                        return;
+                    }
+                    let active = true;
+                    const startSeconds = this.startTime();
+                    const embed = new TwitchEmbed(this.el, {
+                        width: this.width(),
+                        height: this.height(),
+                        parent: [window.location.hostname],
+                        autoplay: this.autoplay(),
+                        ...(params.channel ? { channel: params.channel } : {}),
+                        ...(params.video ? { video: params.video } : {}),
+                        ...(startSeconds ? { time: secondsToTimestamp(startSeconds) } : {}),
+                    });
+                    embed.addEventListener(TwitchEmbed.READY, () => {
+                        if (!active)
+                            return;
+                        const player = embed.getPlayer();
+                        this.state.set({ ...DEFAULT_STATE$2, isReady: true });
+                        subscriber.next(player);
+                    });
+                    embed.addEventListener(TwitchEmbed.PLAY, () => {
+                        if (!active)
+                            return;
+                        const player = embed.getPlayer();
+                        this.state.update((s) => ({
+                            ...s,
+                            isPlaying: true,
+                            isEnded: false,
+                            duration: player.getDuration(),
+                            currentTime: player.getCurrentTime(),
+                        }));
+                    });
+                    embed.addEventListener(TwitchEmbed.PAUSE, () => {
+                        if (!active)
+                            return;
+                        this.state.update((s) => ({ ...s, isPlaying: false }));
+                    });
+                    embed.addEventListener(TwitchEmbed.ENDED, () => {
+                        if (!active)
+                            return;
+                        this.state.update((s) => ({ ...s, isPlaying: false, isEnded: true }));
+                    });
+                    return () => {
+                        active = false;
+                        this.el.innerHTML = '';
+                        this.state.set({ ...DEFAULT_STATE$2 });
+                    };
+                })));
+            },
+        });
+        this.error = computed(() => (this.playerResource.isLoading() ? undefined : this.playerResource.error()), ...(ngDevMode ? [{ debugName: "error" }] : []));
+    }
+    play() {
+        this.playerResource.value()?.play();
+    }
+    pause() {
+        this.playerResource.value()?.pause();
+    }
+    mute() {
+        this.playerResource.value()?.setMuted(true);
+        this.state.update((s) => ({ ...s, isMuted: true }));
+    }
+    unmute() {
+        this.playerResource.value()?.setMuted(false);
+        this.state.update((s) => ({ ...s, isMuted: false }));
+    }
+    seek(seconds) {
+        this.playerResource.value()?.seek(seconds);
+    }
+    retry() {
+        this.playerResource.reload();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TwitchPlayerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: TwitchPlayerDirective, isStandalone: true, inputs: { channel: { classPropertyName: "channel", publicName: "channel", isSignal: true, isRequired: false, transformFunction: null }, video: { classPropertyName: "video", publicName: "video", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, startTime: { classPropertyName: "startTime", publicName: "startTime", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            { provide: TWITCH_PLAYER_TOKEN, useExisting: TwitchPlayerDirective },
+            { provide: STREAM_PLAYER_TOKEN, useExisting: TwitchPlayerDirective },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TwitchPlayerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        { provide: TWITCH_PLAYER_TOKEN, useExisting: TwitchPlayerDirective },
+                        { provide: STREAM_PLAYER_TOKEN, useExisting: TwitchPlayerDirective },
+                    ],
+                }]
+        }], propDecorators: { channel: [{ type: i0.Input, args: [{ isSignal: true, alias: "channel", required: false }] }], video: [{ type: i0.Input, args: [{ isSignal: true, alias: "video", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], startTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "startTime", required: false }] }] } });
+const secondsToTimestamp = (seconds) => {
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = Math.floor(seconds % 60);
+    return `${h}h${m}m${s}s`;
+};
+
+class TwitchPlayerComponent {
+    constructor() {
+        this.player = inject(TWITCH_PLAYER_TOKEN);
+        this.state = this.player.state;
+        this.error = this.player.error;
+    }
+    retry() {
+        this.player.retry();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TwitchPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: TwitchPlayerComponent, isStandalone: true, selector: "et-twitch-player", host: { classAttribute: "et-twitch-player" }, hostDirectives: [{ directive: TwitchPlayerDirective, inputs: ["channel", "channel", "video", "video", "width", "width", "height", "height", "autoplay", "autoplay", "startTime", "startTime"] }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TwitchPlayerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'et-twitch-player',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [
+                        {
+                            directive: TwitchPlayerDirective,
+                            inputs: ['channel', 'video', 'width', 'height', 'autoplay', 'startTime'],
+                        },
+                    ],
+                    host: {
+                        class: 'et-twitch-player',
+                    },
+                }]
+        }] });
+
+const VIMEO_SDK_URL = 'https://player.vimeo.com/api/player.js';
+const VIMEO_PLAYER_TOKEN = new InjectionToken('VIMEO_PLAYER_TOKEN');
+const DEFAULT_STATE$1 = {
+    isReady: false,
+    isPlaying: false,
+    isMuted: false,
+    isEnded: false,
+    duration: null,
+    currentTime: null,
+};
+class VimeoPlayerDirective {
+    constructor() {
+        this.el = injectHostElement();
+        this.scriptLoader = injectStreamScriptLoader();
+        this.platformId = inject(PLATFORM_ID);
+        this.CAPABILITIES = {
+            canPlay: true,
+            canPause: true,
+            canMute: true,
+            canSeek: true,
+            canGetDuration: true,
+            isLiveCapable: true,
+        };
+        this.state = signal({ ...DEFAULT_STATE$1 }, ...(ngDevMode ? [{ debugName: "state" }] : []));
+        this.videoId = input.required(...(ngDevMode ? [{ debugName: "videoId" }] : []));
+        this.startTime = input(0, { ...(ngDevMode ? { debugName: "startTime" } : {}), transform: numberAttribute });
+        this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.height = input('100%', ...(ngDevMode ? [{ debugName: "height" }] : []));
+        this.playerResource = rxResource({
+            params: () => (isPlatformBrowser(this.platformId) ? this.videoId() : null),
+            stream: ({ params: videoId }) => {
+                if (!videoId)
+                    return EMPTY;
+                return this.scriptLoader.load(VIMEO_SDK_URL).pipe(switchMap(() => new Observable((subscriber) => {
+                    const win = window;
+                    const startTime = this.startTime();
+                    let active = true;
+                    // Vimeo width/height options only accept numbers (pixels).
+                    // Apply %/px sizing to the host element and let the iframe fill it.
+                    const w = this.width();
+                    const h = this.height();
+                    this.el.style.display = 'block';
+                    this.el.style.width = typeof w === 'number' ? `${w}px` : w;
+                    this.el.style.height = typeof h === 'number' ? `${h}px` : h;
+                    // responsive: true makes the iframe fill 100% of the host element.
+                    // Dimensions are applied to the host element via CSS above.
+                    const player = new win.Vimeo.Player(this.el, { id: videoId, responsive: true });
+                    const onPlay = (data) => {
+                        const e = data;
+                        this.state.update((s) => ({
+                            ...s,
+                            isPlaying: true,
+                            isEnded: false,
+                            duration: e.duration,
+                            currentTime: e.seconds,
+                        }));
+                    };
+                    const onPause = (data) => {
+                        const e = data;
+                        this.state.update((s) => ({ ...s, isPlaying: false, currentTime: e.seconds }));
+                    };
+                    const onEnded = (data) => {
+                        const e = data;
+                        this.state.update((s) => ({ ...s, isPlaying: false, isEnded: true, currentTime: e.seconds }));
+                    };
+                    const onTimeUpdate = (data) => {
+                        const e = data;
+                        this.state.update((s) => ({ ...s, duration: e.duration, currentTime: e.seconds }));
+                    };
+                    player.on('play', onPlay);
+                    player.on('pause', onPause);
+                    player.on('ended', onEnded);
+                    player.on('timeupdate', onTimeUpdate);
+                    player
+                        .ready()
+                        .then(() => player.getMuted())
+                        .then((isMuted) => {
+                        if (!active)
+                            return;
+                        this.state.set({ ...DEFAULT_STATE$1, isReady: true, isMuted });
+                        if (startTime > 0)
+                            player.setCurrentTime(startTime);
+                        subscriber.next(player);
+                    });
+                    return () => {
+                        active = false;
+                        player.off('play', onPlay);
+                        player.off('pause', onPause);
+                        player.off('ended', onEnded);
+                        player.off('timeupdate', onTimeUpdate);
+                        player.destroy();
+                        this.state.set({ ...DEFAULT_STATE$1 });
+                    };
+                })));
+            },
+        });
+        this.error = computed(() => (this.playerResource.isLoading() ? undefined : this.playerResource.error()), ...(ngDevMode ? [{ debugName: "error" }] : []));
+    }
+    play() {
+        this.playerResource.value()?.play();
+    }
+    pause() {
+        this.playerResource.value()?.pause();
+    }
+    mute() {
+        this.playerResource
+            .value()
+            ?.setMuted(true)
+            .then(() => this.state.update((s) => ({ ...s, isMuted: true })));
+    }
+    unmute() {
+        this.playerResource
+            .value()
+            ?.setMuted(false)
+            .then(() => this.state.update((s) => ({ ...s, isMuted: false })));
+    }
+    seek(seconds) {
+        this.playerResource.value()?.setCurrentTime(seconds);
+    }
+    retry() {
+        this.playerResource.reload();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: VimeoPlayerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: VimeoPlayerDirective, isStandalone: true, inputs: { videoId: { classPropertyName: "videoId", publicName: "videoId", isSignal: true, isRequired: true, transformFunction: null }, startTime: { classPropertyName: "startTime", publicName: "startTime", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            { provide: VIMEO_PLAYER_TOKEN, useExisting: VimeoPlayerDirective },
+            { provide: STREAM_PLAYER_TOKEN, useExisting: VimeoPlayerDirective },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: VimeoPlayerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        { provide: VIMEO_PLAYER_TOKEN, useExisting: VimeoPlayerDirective },
+                        { provide: STREAM_PLAYER_TOKEN, useExisting: VimeoPlayerDirective },
+                    ],
+                }]
+        }], propDecorators: { videoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "videoId", required: true }] }], startTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "startTime", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
+
+class VimeoPlayerComponent {
+    constructor() {
+        this.player = inject(VIMEO_PLAYER_TOKEN);
+        this.state = this.player.state;
+        this.error = this.player.error;
+    }
+    retry() {
+        this.player.retry();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: VimeoPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: VimeoPlayerComponent, isStandalone: true, selector: "et-vimeo-player", host: { classAttribute: "et-vimeo-player" }, hostDirectives: [{ directive: VimeoPlayerDirective, inputs: ["videoId", "videoId", "startTime", "startTime", "width", "width", "height", "height"] }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: VimeoPlayerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'et-vimeo-player',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [
+                        {
+                            directive: VimeoPlayerDirective,
+                            inputs: ['videoId', 'startTime', 'width', 'height'],
+                        },
+                    ],
+                    host: {
+                        class: 'et-vimeo-player',
+                    },
+                }]
+        }] });
+
+class YoutubePlayerParamsDirective {
+    constructor() {
+        this.videoId = input.required(...(ngDevMode ? [{ debugName: "videoId" }] : []));
+        this.startTime = input(0, { ...(ngDevMode ? { debugName: "startTime" } : {}), transform: numberAttribute });
+        this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.height = input('100%', ...(ngDevMode ? [{ debugName: "height" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: YoutubePlayerParamsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: YoutubePlayerParamsDirective, isStandalone: true, inputs: { videoId: { classPropertyName: "videoId", publicName: "videoId", isSignal: true, isRequired: true, transformFunction: null }, startTime: { classPropertyName: "startTime", publicName: "startTime", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: YoutubePlayerParamsDirective, decorators: [{
+            type: Directive,
+            args: [{}]
+        }], propDecorators: { videoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "videoId", required: true }] }], startTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "startTime", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
+
+const pipMoveBefore = (newParent, child, before = null) => {
+    if ('moveBefore' in newParent) {
+        try {
+            newParent.moveBefore(child, before);
+        }
+        catch {
+            newParent.insertBefore(child, before);
+        }
+    }
+    else {
+        newParent.insertBefore(child, before);
+    }
+};
+const animateWithFixedWrapper = (config) => {
+    const { playerEl, fromRect, toRect, document, onFinish, duration = 250, easing = 'cubic-bezier(0.4, 0, 0.2, 1)', } = config;
+    const wrapper = document.createElement('div');
+    wrapper.style.cssText = `
+    position: fixed;
+    left: ${fromRect.left}px;
+    top: ${fromRect.top}px;
+    width: ${fromRect.width}px;
+    height: ${fromRect.height}px;
+    overflow: visible;
+    pointer-events: none;
+    z-index: 2147483647;
+  `;
+    document.body.appendChild(wrapper);
+    pipMoveBefore(wrapper, playerEl);
+    const dx = toRect.left - fromRect.left;
+    const dy = toRect.top - fromRect.top;
+    const sx = fromRect.width > 0 ? toRect.width / fromRect.width : 1;
+    const sy = fromRect.height > 0 ? toRect.height / fromRect.height : 1;
+    const anim = wrapper.animate([
+        { transformOrigin: 'top left', transform: 'none' },
+        { transformOrigin: 'top left', transform: `translate(${dx}px, ${dy}px) scale(${sx}, ${sy})` },
+    ], { duration, easing, fill: 'both' });
+    const cleanup = () => {
+        onFinish();
+        wrapper.remove();
+    };
+    anim.addEventListener('finish', cleanup, { once: true });
+    anim.addEventListener('cancel', cleanup, { once: true });
+};
+const [provideStreamPipManager, injectStreamPipManager] = createRootProvider(() => {
+    const document = inject(DOCUMENT);
+    const container = document.createElement('div');
+    container.className = 'et-stream-pip';
+    document.body.appendChild(container);
+    const _entry = signal(null, ...(ngDevMode ? [{ debugName: "_entry" }] : []));
+    const isActive = computed(() => _entry() !== null, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+    const activate = (element) => {
+        if (_entry())
+            return;
+        const originalParent = element.parentElement;
+        if (!originalParent) {
+            console.warn('[StreamPipManager] activate() called on a detached element.');
+            return;
+        }
+        const originalNextSibling = element.nextSibling;
+        pipMoveBefore(container, element);
+        _entry.set({ element, originalParent, originalNextSibling });
+    };
+    const deactivate = () => {
+        const entry = _entry();
+        if (!entry)
+            return;
+        const { element, originalParent, originalNextSibling } = entry;
+        if (originalParent.isConnected) {
+            pipMoveBefore(originalParent, element, originalNextSibling);
+        }
+        else {
+            element.remove();
+        }
+        _entry.set(null);
+    };
+    return { activate, deactivate, isActive, container };
+}, { name: 'Stream PIP Manager' });
+
+const [provideStreamManager, injectStreamManager] = createRootProvider(() => {
+    const document = inject(DOCUMENT);
+    const renderer = injectRenderer();
+    const container = renderer.createElement('div');
+    renderer.addClass(container, 'et-stream-manager');
+    renderer.appendChild(document.body, container);
+    const players = new Map();
+    const slots = new Map();
+    const pips = signal([], ...(ngDevMode ? [{ debugName: "pips" }] : []));
+    const pipInitialRects = new Map();
+    const resolveBestSlot = (playerId) => {
+        let best = null;
+        for (const slot of slots.values()) {
+            if (slot.playerId !== playerId)
+                continue;
+            if (!best) {
+                best = slot;
+                continue;
+            }
+            if (!best.priority) {
+                best = slot;
+                continue;
+            }
+            if (slot.priority) {
+                best = slot;
+            }
+        }
+        return best;
+    };
+    const moveWithFlip = (element, targetParent) => {
+        const initialRect = element.getBoundingClientRect();
+        if (initialRect.width === 0 && initialRect.height === 0) {
+            pipMoveBefore(targetParent, element);
+            return;
+        }
+        const flip = createFlipAnimation({ element });
+        flip.updateInit();
+        pipMoveBefore(targetParent, element);
+        flip.play();
+    };
+    const hasSlotFor = (playerId) => {
+        for (const slot of slots.values()) {
+            if (slot.playerId === playerId)
+                return true;
+        }
+        return false;
+    };
+    const isInPip = (playerId) => pips().some((p) => p.playerId === playerId);
+    const reassignPlayer = (playerId) => {
+        const player = players.get(playerId);
+        if (!player || isInPip(playerId))
+            return;
+        const bestSlot = resolveBestSlot(playerId);
+        const targetParent = bestSlot?.element ?? container;
+        if (player.element.parentElement !== targetParent) {
+            moveWithFlip(player.element, targetParent);
+            player.currentSlotElement = bestSlot?.element ?? null;
+        }
+    };
+    const registerPlayer = (entry) => {
+        const internal = {
+            ...entry,
+            currentSlotElement: null,
+            isOrphaned: false,
+            isAnimatingOut: false,
+        };
+        players.set(entry.id, internal);
+        renderer.appendChild(container, entry.element);
+        reassignPlayer(entry.id);
+    };
+    const unregisterPlayer = (playerId) => {
+        const entry = players.get(playerId);
+        if (!entry)
+            return;
+        entry.element.remove();
+        players.delete(playerId);
+        pips.update((pips) => pips.filter((p) => p.playerId !== playerId));
+        entry.onDestroy?.();
+    };
+    const registerSlot = (entry) => {
+        slots.set(entry.element, entry);
+        const player = players.get(entry.playerId);
+        if (player?.isOrphaned)
+            player.isOrphaned = false;
+        reassignPlayer(entry.playerId);
+    };
+    const unregisterSlot = (element) => {
+        const slot = slots.get(element);
+        if (!slot)
+            return;
+        slots.delete(element);
+        const player = players.get(slot.playerId);
+        if (!player)
+            return;
+        const hasOtherSlot = hasSlotFor(slot.playerId);
+        if (isInPip(slot.playerId)) {
+            if (!hasOtherSlot)
+                player.isOrphaned = true;
+            return;
+        }
+        if (player.currentSlotElement === element) {
+            if (hasOtherSlot) {
+                reassignPlayer(slot.playerId);
+            }
+            else {
+                unregisterPlayer(slot.playerId);
+            }
+        }
+    };
+    const pipActivate = (element, onBack) => {
+        const slot = slots.get(element);
+        if (!slot)
+            return;
+        const player = players.get(slot.playerId);
+        if (!player || isInPip(slot.playerId))
+            return;
+        const initialRect = player.element.getBoundingClientRect();
+        if (initialRect.width > 0 || initialRect.height > 0) {
+            pipInitialRects.set(slot.playerId, initialRect);
+        }
+        pipMoveBefore(container, player.element);
+        player.currentSlotElement = null;
+        pips.update((pips) => [...pips, { playerId: slot.playerId, onBack: onBack ?? slot.onPipBack }]);
+    };
+    const pipDeactivate = (playerId) => {
+        if (!isInPip(playerId))
+            return;
+        pipInitialRects.delete(playerId);
+        const player = players.get(playerId);
+        if (!player) {
+            pips.update((pips) => pips.filter((p) => p.playerId !== playerId));
+            return;
+        }
+        if (player.isOrphaned) {
+            pips.update((pips) => pips.filter((p) => p.playerId !== playerId));
+            unregisterPlayer(playerId);
+            return;
+        }
+        const fromRect = player.element.getBoundingClientRect();
+        const bestSlot = resolveBestSlot(playerId);
+        const targetParent = bestSlot?.element ?? container;
+        const toRect = targetParent.getBoundingClientRect();
+        if (fromRect.width > 0 && fromRect.height > 0 && toRect.width > 0 && toRect.height > 0) {
+            player.isAnimatingOut = true;
+            animateWithFixedWrapper({
+                playerEl: player.element,
+                fromRect,
+                toRect,
+                document,
+                onFinish: () => {
+                    player.isAnimatingOut = false;
+                    pipMoveBefore(targetParent, player.element);
+                    player.currentSlotElement = bestSlot?.element ?? null;
+                },
+            });
+        }
+        else {
+            pipMoveBefore(targetParent, player.element);
+            player.currentSlotElement = bestSlot?.element ?? null;
+        }
+        pips.update((pips) => pips.filter((p) => p.playerId !== playerId));
+    };
+    const transferPlayer = (oldId, newId) => {
+        const entry = players.get(oldId);
+        if (!entry || oldId === newId)
+            return;
+        players.delete(oldId);
+        players.set(newId, { ...entry, id: newId });
+        pips.update((pips) => pips.map((p) => (p.playerId === oldId ? { ...p, playerId: newId } : p)));
+    };
+    const getPlayerElement = (playerId) => players.get(playerId)?.element ?? null;
+    const getInitialRect = (playerId) => {
+        const rect = pipInitialRects.get(playerId) ?? null;
+        pipInitialRects.delete(playerId);
+        return rect;
+    };
+    const parkPlayerElement = (playerId) => {
+        const player = players.get(playerId);
+        if (!player)
+            return;
+        if (player.isAnimatingOut)
+            return;
+        if (player.element.parentElement === container)
+            return;
+        pipMoveBefore(container, player.element);
+    };
+    return {
+        pips: pips.asReadonly(),
+        registerPlayer,
+        unregisterPlayer,
+        registerSlot,
+        unregisterSlot,
+        pipActivate,
+        pipDeactivate,
+        transferPlayer,
+        getPlayerElement,
+        getInitialRect,
+        parkPlayerElement,
+    };
+}, { name: 'Stream Manager' });
+
+const YT_API_URL = 'https://www.youtube.com/iframe_api';
+const YOUTUBE_PLAYER_TOKEN = new InjectionToken('YOUTUBE_PLAYER_TOKEN');
+const DEFAULT_STATE = {
+    isReady: false,
+    isPlaying: false,
+    isMuted: false,
+    isEnded: false,
+    duration: null,
+    currentTime: null,
+};
+const waitForYtReady = () => {
+    const win = window;
+    if (win.YT?.Player)
+        return of(undefined);
+    return new Observable((subscriber) => {
+        const prev = win.onYouTubeIframeAPIReady;
+        win.onYouTubeIframeAPIReady = () => {
+            prev?.();
+            subscriber.next();
+            subscriber.complete();
+        };
+    });
+};
+class YoutubePlayerDirective {
+    constructor() {
+        this.el = injectHostElement();
+        this.scriptLoader = injectStreamScriptLoader();
+        this.platformId = inject(PLATFORM_ID);
+        this.renderer = injectRenderer();
+        this.params = inject(YoutubePlayerParamsDirective);
+        this.CAPABILITIES = {
+            canPlay: true,
+            canPause: true,
+            canMute: true,
+            canSeek: true,
+            canGetDuration: true,
+            isLiveCapable: true,
+        };
+        this.state = signal({ ...DEFAULT_STATE }, ...(ngDevMode ? [{ debugName: "state" }] : []));
+        this.playerResource = rxResource({
+            params: () => (isPlatformBrowser(this.platformId) ? this.params.videoId() : null),
+            stream: ({ params: videoId }) => {
+                if (!videoId)
+                    return EMPTY;
+                return this.scriptLoader.load(YT_API_URL).pipe(switchMap(() => waitForYtReady()), switchMap(() => new Observable((subscriber) => {
+                    const win = window;
+                    if (isDevMode() && !win.YT?.Player) {
+                        console.error('[et-youtube-player] YT.Player not available after SDK load.');
+                    }
+                    let currentTimeInterval = null;
+                    const clearCurrentTimeInterval = () => {
+                        if (currentTimeInterval !== null) {
+                            clearInterval(currentTimeInterval);
+                            currentTimeInterval = null;
+                        }
+                    };
+                    const placeholder = this.renderer.createElement('div');
+                    this.renderer.appendChild(this.el, placeholder);
+                    const player = new win.YT.Player(placeholder, {
+                        videoId,
+                        width: this.params.width(),
+                        height: this.params.height(),
+                        playerVars: {
+                            enablejsapi: 1,
+                            origin: window.location.origin,
+                            start: this.params.startTime() || undefined,
+                            rel: 0,
+                        },
+                        events: {
+                            onReady: () => {
+                                this.state.set({ ...DEFAULT_STATE, isReady: true });
+                                subscriber.next(player);
+                            },
+                            onStateChange: (event) => {
+                                const YT = win.YT;
+                                const s = event.data;
+                                const isPlaying = s === YT.PlayerState.PLAYING;
+                                clearCurrentTimeInterval();
+                                if (isPlaying) {
+                                    currentTimeInterval = setInterval(() => {
+                                        this.state.update((prev) => ({
+                                            ...prev,
+                                            currentTime: player.getCurrentTime() ?? null,
+                                        }));
+                                    }, 250);
+                                }
+                                this.state.update((prev) => ({
+                                    ...prev,
+                                    isPlaying,
+                                    isEnded: s === YT.PlayerState.ENDED,
+                                    duration: player.getDuration() ?? null,
+                                    currentTime: player.getCurrentTime() ?? null,
+                                    isMuted: player.isMuted(),
+                                }));
+                            },
+                        },
+                    });
+                    return () => {
+                        clearCurrentTimeInterval();
+                        player.destroy();
+                        this.state.set({ ...DEFAULT_STATE });
+                    };
+                })));
+            },
+        });
+        this.error = computed(() => (this.playerResource.isLoading() ? undefined : this.playerResource.error()), ...(ngDevMode ? [{ debugName: "error" }] : []));
+    }
+    play() {
+        this.playerResource.value()?.playVideo();
+    }
+    pause() {
+        this.playerResource.value()?.pauseVideo();
+    }
+    mute() {
+        this.playerResource.value()?.mute();
+        this.state.update((s) => ({ ...s, isMuted: true }));
+    }
+    unmute() {
+        this.playerResource.value()?.unMute();
+        this.state.update((s) => ({ ...s, isMuted: false }));
+    }
+    seek(seconds) {
+        this.playerResource.value()?.seekTo(seconds, true);
+    }
+    retry() {
+        this.playerResource.reload();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: YoutubePlayerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: YoutubePlayerDirective, isStandalone: true, providers: [
+            { provide: YOUTUBE_PLAYER_TOKEN, useExisting: YoutubePlayerDirective },
+            { provide: STREAM_PLAYER_TOKEN, useExisting: YoutubePlayerDirective },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: YoutubePlayerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        { provide: YOUTUBE_PLAYER_TOKEN, useExisting: YoutubePlayerDirective },
+                        { provide: STREAM_PLAYER_TOKEN, useExisting: YoutubePlayerDirective },
+                    ],
+                }]
+        }] });
+
+class YoutubePlayerComponent {
+    constructor() {
+        this.player = inject(YOUTUBE_PLAYER_TOKEN);
+        this.state = this.player.state;
+        this.error = this.player.error;
+    }
+    retry() {
+        this.player.retry();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: YoutubePlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: YoutubePlayerComponent, isStandalone: true, selector: "et-youtube-player", host: { styleAttribute: "display: block; width: 100%; height: 100%", classAttribute: "et-youtube-player" }, hostDirectives: [{ directive: YoutubePlayerParamsDirective, inputs: ["videoId", "videoId", "startTime", "startTime", "width", "width", "height", "height"] }, { directive: YoutubePlayerDirective }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: YoutubePlayerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'et-youtube-player',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [
+                        {
+                            directive: YoutubePlayerParamsDirective,
+                            inputs: ['videoId', 'startTime', 'width', 'height'],
+                        },
+                        YoutubePlayerDirective,
+                    ],
+                    host: {
+                        class: 'et-youtube-player',
+                        style: 'display: block; width: 100%; height: 100%',
+                    },
+                }]
+        }] });
+
+const YOUTUBE_PLAYER_SLOT_TOKEN = new InjectionToken('YOUTUBE_PLAYER_SLOT_TOKEN');
+class YoutubePlayerSlotDirective {
+    constructor() {
+        this.manager = injectStreamManager();
+        this.el = injectHostElement();
+        this.appRef = inject(ApplicationRef);
+        this.envInjector = inject(EnvironmentInjector);
+        this.params = inject(YoutubePlayerParamsDirective);
+        this.streamSlotPriority = input(false, { ...(ngDevMode ? { debugName: "streamSlotPriority" } : {}), transform: booleanAttribute });
+        this.streamSlotOnPipBack = input(...(ngDevMode ? [undefined, { debugName: "streamSlotOnPipBack" }] : []));
+        this.currentPlayerId = null;
+        effect(() => {
+            const newPlayerId = `youtube-${this.params.videoId()}`;
+            const oldPlayerId = this.currentPlayerId;
+            if (!oldPlayerId || oldPlayerId === newPlayerId)
+                return;
+            this.manager.transferPlayer(oldPlayerId, newPlayerId);
+            this.manager.unregisterSlot(this.el);
+            this.manager.registerSlot({
+                playerId: newPlayerId,
+                priority: this.streamSlotPriority(),
+                element: this.el,
+                onPipBack: this.streamSlotOnPipBack(),
+            });
+            this.currentPlayerId = newPlayerId;
+        });
+    }
+    ngOnInit() {
+        const videoId = this.params.videoId();
+        this.currentPlayerId = `youtube-${videoId}`;
+        if (this.manager.getPlayerElement(this.currentPlayerId)) {
+            this.manager.registerSlot({
+                playerId: this.currentPlayerId,
+                priority: this.streamSlotPriority(),
+                element: this.el,
+                onPipBack: this.streamSlotOnPipBack(),
+            });
+            return;
+        }
+        const componentRef = createComponent(YoutubePlayerComponent, {
+            environmentInjector: this.envInjector,
+            bindings: [
+                inputBinding('videoId', () => this.params.videoId()),
+                inputBinding('startTime', () => this.params.startTime()),
+                inputBinding('width', () => this.params.width()),
+                inputBinding('height', () => this.params.height()),
+            ],
+        });
+        this.appRef.attachView(componentRef.hostView);
+        const playerElement = componentRef.location.nativeElement;
+        this.manager.registerPlayer({
+            id: this.currentPlayerId,
+            element: playerElement,
+            onDestroy: () => {
+                this.appRef.detachView(componentRef.hostView);
+                componentRef.destroy();
+            },
+        });
+        this.manager.registerSlot({
+            playerId: this.currentPlayerId,
+            priority: this.streamSlotPriority(),
+            element: this.el,
+            onPipBack: this.streamSlotOnPipBack(),
+        });
+    }
+    ngOnDestroy() {
+        if (this.currentPlayerId) {
+            this.manager.unregisterSlot(this.el);
+        }
+    }
+    pipActivate(onBack) {
+        this.manager.pipActivate(this.el, onBack);
+    }
+    pipDeactivate() {
+        if (this.currentPlayerId) {
+            this.manager.pipDeactivate(this.currentPlayerId);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: YoutubePlayerSlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: YoutubePlayerSlotDirective, isStandalone: true, inputs: { streamSlotPriority: { classPropertyName: "streamSlotPriority", publicName: "streamSlotPriority", isSignal: true, isRequired: false, transformFunction: null }, streamSlotOnPipBack: { classPropertyName: "streamSlotOnPipBack", publicName: "streamSlotOnPipBack", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: YOUTUBE_PLAYER_SLOT_TOKEN, useExisting: YoutubePlayerSlotDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: YoutubePlayerSlotDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [{ provide: YOUTUBE_PLAYER_SLOT_TOKEN, useExisting: YoutubePlayerSlotDirective }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { streamSlotPriority: [{ type: i0.Input, args: [{ isSignal: true, alias: "streamSlotPriority", required: false }] }], streamSlotOnPipBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "streamSlotOnPipBack", required: false }] }] } });
+
+class YoutubePlayerSlotComponent {
+    constructor() {
+        this.slot = inject(YOUTUBE_PLAYER_SLOT_TOKEN);
+    }
+    pipActivate(onBack) {
+        this.slot.pipActivate(onBack);
+    }
+    pipDeactivate() {
+        this.slot.pipDeactivate();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: YoutubePlayerSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: YoutubePlayerSlotComponent, isStandalone: true, selector: "et-youtube-player-slot", host: { classAttribute: "et-youtube-player-slot" }, hostDirectives: [{ directive: YoutubePlayerParamsDirective, inputs: ["videoId", "videoId", "startTime", "startTime", "width", "width", "height", "height"] }, { directive: YoutubePlayerSlotDirective, inputs: ["streamSlotPriority", "streamSlotPriority", "streamSlotOnPipBack", "streamSlotOnPipBack"] }], ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: YoutubePlayerSlotComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'et-youtube-player-slot',
+                    template: '<ng-content />',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [
+                        {
+                            directive: YoutubePlayerParamsDirective,
+                            inputs: ['videoId', 'startTime', 'width', 'height'],
+                        },
+                        {
+                            directive: YoutubePlayerSlotDirective,
+                            inputs: ['streamSlotPriority', 'streamSlotOnPipBack'],
+                        },
+                    ],
+                    host: {
+                        class: 'et-youtube-player-slot',
+                    },
+                }]
+        }] });
+
+class StreamPipChromeComponent {
+    constructor() {
+        this.document = inject(DOCUMENT);
+        this.pipEntries = viewChildren('pipEntry', ...(ngDevMode ? [{ debugName: "pipEntries" }] : []));
+        this.manager = injectStreamManager();
+        afterRenderEffect(() => {
+            for (const { nativeElement: entryEl } of this.pipEntries()) {
+                const playerId = entryEl.dataset['playerId'];
+                if (!playerId)
+                    continue;
+                const playerEl = this.manager.getPlayerElement(playerId);
+                if (!playerEl || playerEl.parentElement === entryEl)
+                    continue;
+                const controlsEl = entryEl.querySelector('.et-stream-pip-chrome__controls');
+                const fromRect = this.manager.getInitialRect(playerId);
+                const toRect = entryEl.getBoundingClientRect();
+                if (fromRect && fromRect.width > 0 && fromRect.height > 0 && toRect.width > 0 && toRect.height > 0) {
+                    entryEl.style.visibility = 'hidden';
+                    animateWithFixedWrapper({
+                        playerEl,
+                        fromRect,
+                        toRect,
+                        document: this.document,
+                        onFinish: () => {
+                            pipMoveBefore(entryEl, playerEl, controlsEl);
+                            entryEl.style.visibility = '';
+                        },
+                    });
+                }
+                else {
+                    pipMoveBefore(entryEl, playerEl, controlsEl);
+                }
+            }
+        });
+    }
+    onBack(pip) {
+        pip.onBack?.();
+    }
+    onClose(pip) {
+        this.manager.pipDeactivate(pip.playerId);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: StreamPipChromeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: StreamPipChromeComponent, isStandalone: true, selector: "et-stream-pip-chrome", host: { classAttribute: "et-stream-pip-chrome" }, viewQueries: [{ propertyName: "pipEntries", predicate: ["pipEntry"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @for (pip of manager.pips(); track pip.playerId) {
+      <div #pipEntry [attr.data-player-id]="pip.playerId" class="et-stream-pip-chrome__entry">
+        <div class="et-stream-pip-chrome__controls">
+          @if (pip.onBack) {
+            <button (click)="onBack(pip)" class="et-stream-pip-chrome__back" type="button" aria-label="Back">‹</button>
+          }
+          <button
+            (click)="onClose(pip)"
+            class="et-stream-pip-chrome__close"
+            type="button"
+            aria-label="Close picture-in-picture"
+          >
+            ✕
+          </button>
+        </div>
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: StreamPipChromeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'et-stream-pip-chrome',
+                    template: `
+    @for (pip of manager.pips(); track pip.playerId) {
+      <div #pipEntry [attr.data-player-id]="pip.playerId" class="et-stream-pip-chrome__entry">
+        <div class="et-stream-pip-chrome__controls">
+          @if (pip.onBack) {
+            <button (click)="onBack(pip)" class="et-stream-pip-chrome__back" type="button" aria-label="Back">‹</button>
+          }
+          <button
+            (click)="onClose(pip)"
+            class="et-stream-pip-chrome__close"
+            type="button"
+            aria-label="Close picture-in-picture"
+          >
+            ✕
+          </button>
+        </div>
+      </div>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'et-stream-pip-chrome',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { pipEntries: [{ type: i0.ViewChildren, args: ['pipEntry', { isSignal: true }] }] } });
+
+const StreamImports = [
+    StreamConsentComponent,
+    StreamConsentContentDirective,
+    StreamConsentPlaceholderDirective,
+    StreamConsentAcceptDirective,
+    YoutubePlayerComponent,
+    YoutubePlayerDirective,
+    YoutubePlayerParamsDirective,
+    YoutubePlayerSlotComponent,
+    YoutubePlayerSlotDirective,
+    TwitchPlayerComponent,
+    TwitchPlayerDirective,
+    VimeoPlayerComponent,
+    VimeoPlayerDirective,
+    DailymotionPlayerComponent,
+    DailymotionPlayerDirective,
+    KickPlayerComponent,
+    KickPlayerDirective,
+    FacebookPlayerComponent,
+    FacebookPlayerDirective,
+    TikTokPlayerComponent,
+    TikTokPlayerDirective,
+    SoopPlayerComponent,
+    SoopPlayerDirective,
+    StreamPipChromeComponent,
+];
+
+class TableBusyDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+        this._contentClassName = 'et-table-busy';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableBusyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: TableBusyDirective, isStandalone: true, selector: "ng-template[etTableBusy]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableBusyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[etTableBusy]',
+                }]
+        }] });
+
+// eslint-disable-next-line @angular-eslint/directive-selector
+class TableBusyOutletDirective {
+    constructor() {
+        this.viewContainer = inject(ViewContainerRef);
+        this.elementRef = inject(ElementRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableBusyOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: TableBusyOutletDirective, isStandalone: true, selector: "[tableBusyOutlet]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableBusyOutletDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[tableBusyOutlet]' }]
+        }] });
+
+class TableComponent extends CdkTable {
+    constructor() {
+        super(...arguments);
+        this._cdr = inject(ChangeDetectorRef);
+        this.stickyCssClass = 'et-table-sticky';
+        this.needsPositionStickyOnElement = false;
+        this._tableBusyOutlet = viewChild(TableBusyOutletDirective, ...(ngDevMode ? [{ debugName: "_tableBusyOutlet" }] : []));
+        this._tableBusyComponent = contentChild(TableBusyDirective, ...(ngDevMode ? [{ debugName: "_tableBusyComponent" }] : []));
+        this._busy = false;
+        this._isShowingTableBusy = false;
+    }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
+    get busy() {
+        return this._busy;
+    }
+    set busy(value) {
+        this._busy = booleanAttribute(value);
+        this._updateTableBusy();
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        this._updateTableBusy();
+    }
+    _updateTableBusy() {
+        const tableBusyComponent = this._tableBusyComponent();
+        if (!tableBusyComponent) {
+            return;
+        }
+        const shouldShow = this.busy;
+        if (shouldShow === this._isShowingTableBusy) {
+            return;
+        }
+        const container = this._tableBusyOutlet()?.viewContainer;
+        if (!container) {
+            return;
+        }
+        if (shouldShow) {
+            const view = container.createEmbeddedView(tableBusyComponent.templateRef);
+            const rootNode = view.rootNodes[0];
+            if (view.rootNodes.length === 1 && rootNode?.nodeType === document.ELEMENT_NODE) {
+                rootNode.classList.add(tableBusyComponent._contentClassName);
+            }
+        }
+        else {
+            container.clear();
+        }
+        this._isShowingTableBusy = shouldShow;
+        this._cdr.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: TableComponent, isStandalone: true, selector: "et-table, table[et-table]", inputs: { busy: "busy" }, host: { properties: { "class.et-table-fixed-layout": "fixedLayout", "attr.aria-busy": "busy ? true : null" }, classAttribute: "et-table et-data-table__table" }, providers: [
+            { provide: CdkTable, useExisting: TableComponent },
+            { provide: CDK_TABLE, useExisting: TableComponent },
+            { provide: STICKY_POSITIONING_LISTENER, useValue: null },
+        ], queries: [{ propertyName: "_tableBusyComponent", first: true, predicate: TableBusyDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_tableBusyOutlet", first: true, predicate: TableBusyOutletDirective, descendants: true, isSignal: true }], exportAs: ["etTable"], usesInheritance: true, ngImport: i0, template: `
+    <ng-content select="caption" />
+    <ng-content select="colgroup, col" />
+
+    @if (_isServer) {
+      <ng-content />
+    }
+
+    @if (_isNativeHtmlTable) {
+      <thead role="rowgroup">
+        <ng-container headerRowOutlet />
+      </thead>
+      <tbody class="mdc-data-table__content" role="rowgroup">
+        <ng-container rowOutlet />
+        <ng-container noDataRowOutlet />
+      </tbody>
+      <tfoot role="rowgroup">
+        <ng-container footerRowOutlet />
+      </tfoot>
+    } @else {
+      <ng-container headerRowOutlet />
+      <div class="et-table-body">
+        <ng-container rowOutlet />
+        <ng-container tableBusyOutlet />
+      </div>
+      <ng-container noDataRowOutlet />
+      <ng-container footerRowOutlet />
+    }
+  `, isInline: true, styles: [":where(.et-table){--et-table-separator-color: #4c4c4c;--et-table-separator-width: 1px;--et-table-separator-style: solid;--et-table-header-row-min-height: 56px;--et-table-row-display: flex;--et-table-row-min-height: 48px;--et-table-row-inline-padding: 24px;--et-table-cell-display: flex;--et-table-cell-inline-padding: 0;--et-table-cell-block-padding: 0}.et-table{display:block;position:relative}.et-header-row{min-height:var(--et-table-header-row-min-height)}.et-row,.et-footer-row{min-height:var(--et-table-row-min-height)}.et-row,.et-header-row,.et-footer-row{display:var(--et-table-row-display);border-width:0;border-bottom-width:var(--et-table-separator-width);border-style:var(--et-table-separator-style);border-color:var(--et-table-separator-color);align-items:center;box-sizing:border-box}.et-cell,.et-header-cell,.et-footer-cell{padding-inline:var(--et-table-cell-inline-padding);padding-block:var(--et-table-cell-block-padding)}.et-cell:first-of-type,.et-header-cell:first-of-type,.et-footer-cell:first-of-type{padding-inline-start:var(--et-table-row-inline-padding)}.et-cell:last-of-type,.et-header-cell:last-of-type,.et-footer-cell:last-of-type{padding-inline-end:var(--et-table-row-inline-padding)}.et-cell,.et-header-cell,.et-footer-cell{flex:1;display:var(--et-table-cell-display);align-items:center;overflow:hidden;word-wrap:break-word;min-height:inherit;box-sizing:border-box}.et-table-sticky{position:sticky!important}.et-table{table-layout:auto;white-space:normal}.et-table tbody,.et-table tfoot,.et-table thead,.et-cell,.et-footer-cell,.et-header-row,.et-row,.et-footer-row,.et-table .et-header-cell{background:inherit}.et-table et-header-row.et-header-row,.et-table et-row.et-row,.et-table et-footer-row.et-footer-cell{height:unset}et-header-cell.et-header-cell,et-cell.et-cell,et-footer-cell.et-footer-cell{align-self:stretch}\n"], dependencies: [{ kind: "directive", type: HeaderRowOutlet, selector: "[headerRowOutlet]" }, { kind: "directive", type: DataRowOutlet, selector: "[rowOutlet]" }, { kind: "directive", type: NoDataRowOutlet, selector: "[noDataRowOutlet]" }, { kind: "directive", type: FooterRowOutlet, selector: "[footerRowOutlet]" }, { kind: "directive", type: TableBusyOutletDirective, selector: "[tableBusyOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-table, table[et-table]', exportAs: 'etTable', template: `
+    <ng-content select="caption" />
+    <ng-content select="colgroup, col" />
+
+    @if (_isServer) {
+      <ng-content />
+    }
+
+    @if (_isNativeHtmlTable) {
+      <thead role="rowgroup">
+        <ng-container headerRowOutlet />
+      </thead>
+      <tbody class="mdc-data-table__content" role="rowgroup">
+        <ng-container rowOutlet />
+        <ng-container noDataRowOutlet />
+      </tbody>
+      <tfoot role="rowgroup">
+        <ng-container footerRowOutlet />
+      </tfoot>
+    } @else {
+      <ng-container headerRowOutlet />
+      <div class="et-table-body">
+        <ng-container rowOutlet />
+        <ng-container tableBusyOutlet />
+      </div>
+      <ng-container noDataRowOutlet />
+      <ng-container footerRowOutlet />
+    }
+  `, host: {
+                        class: 'et-table et-data-table__table',
+                        '[class.et-table-fixed-layout]': 'fixedLayout',
+                        '[attr.aria-busy]': 'busy ? true : null',
+                    }, providers: [
+                        { provide: CdkTable, useExisting: TableComponent },
+                        { provide: CDK_TABLE, useExisting: TableComponent },
+                        { provide: STICKY_POSITIONING_LISTENER, useValue: null },
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, imports: [HeaderRowOutlet, DataRowOutlet, NoDataRowOutlet, FooterRowOutlet, TableBusyOutletDirective], styles: [":where(.et-table){--et-table-separator-color: #4c4c4c;--et-table-separator-width: 1px;--et-table-separator-style: solid;--et-table-header-row-min-height: 56px;--et-table-row-display: flex;--et-table-row-min-height: 48px;--et-table-row-inline-padding: 24px;--et-table-cell-display: flex;--et-table-cell-inline-padding: 0;--et-table-cell-block-padding: 0}.et-table{display:block;position:relative}.et-header-row{min-height:var(--et-table-header-row-min-height)}.et-row,.et-footer-row{min-height:var(--et-table-row-min-height)}.et-row,.et-header-row,.et-footer-row{display:var(--et-table-row-display);border-width:0;border-bottom-width:var(--et-table-separator-width);border-style:var(--et-table-separator-style);border-color:var(--et-table-separator-color);align-items:center;box-sizing:border-box}.et-cell,.et-header-cell,.et-footer-cell{padding-inline:var(--et-table-cell-inline-padding);padding-block:var(--et-table-cell-block-padding)}.et-cell:first-of-type,.et-header-cell:first-of-type,.et-footer-cell:first-of-type{padding-inline-start:var(--et-table-row-inline-padding)}.et-cell:last-of-type,.et-header-cell:last-of-type,.et-footer-cell:last-of-type{padding-inline-end:var(--et-table-row-inline-padding)}.et-cell,.et-header-cell,.et-footer-cell{flex:1;display:var(--et-table-cell-display);align-items:center;overflow:hidden;word-wrap:break-word;min-height:inherit;box-sizing:border-box}.et-table-sticky{position:sticky!important}.et-table{table-layout:auto;white-space:normal}.et-table tbody,.et-table tfoot,.et-table thead,.et-cell,.et-footer-cell,.et-header-row,.et-row,.et-footer-row,.et-table .et-header-cell{background:inherit}.et-table et-header-row.et-header-row,.et-table et-row.et-row,.et-table et-footer-row.et-footer-cell{height:unset}et-header-cell.et-header-cell,et-cell.et-cell,et-footer-cell.et-footer-cell{align-self:stretch}\n"] }]
+        }], propDecorators: { _tableBusyOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TableBusyOutletDirective), { isSignal: true }] }], _tableBusyComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TableBusyDirective), { isSignal: true }] }], busy: [{
+                type: Input
+            }] } });
+
+const MAX_SAFE_INTEGER = 9007199254740991;
+
+class CellDirective extends CdkCell {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CellDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: CellDirective, isStandalone: true, selector: "et-cell, td[et-cell]", host: { classAttribute: "et-cell et-data-table__cell" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'et-cell, td[et-cell]',
+                    host: {
+                        class: 'et-cell et-data-table__cell',
+                    },
+                }]
+        }] });
+
+class CellDefDirective extends CdkCellDef {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CellDefDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: CellDefDirective, isStandalone: true, selector: "[etCellDef]", providers: [{ provide: CdkCellDef, useExisting: CellDefDirective }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CellDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etCellDef]',
+                    providers: [{ provide: CdkCellDef, useExisting: CellDefDirective }],
+                }]
+        }] });
+
+class FooterCellDirective extends CdkFooterCell {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FooterCellDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: FooterCellDirective, isStandalone: true, selector: "et-footer-cell, td[et-footer-cell]", host: { classAttribute: "et-footer-cell et-data-table__cell" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FooterCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'et-footer-cell, td[et-footer-cell]',
+                    host: {
+                        class: 'et-footer-cell et-data-table__cell',
+                    },
+                }]
+        }] });
+
+class FooterCellDefDirective extends CdkFooterCellDef {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FooterCellDefDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: FooterCellDefDirective, isStandalone: true, selector: "[etFooterCellDef]", providers: [{ provide: CdkFooterCellDef, useExisting: FooterCellDefDirective }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FooterCellDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etFooterCellDef]',
+                    providers: [{ provide: CdkFooterCellDef, useExisting: FooterCellDefDirective }],
+                }]
+        }] });
+
+class HeaderCellDirective extends CdkHeaderCell {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HeaderCellDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HeaderCellDirective, isStandalone: true, selector: "et-header-cell, th[et-header-cell]", host: { attributes: { "role": "columnheader" }, classAttribute: "et-header-cell et-data-table__header-cell" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HeaderCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'et-header-cell, th[et-header-cell]',
+                    host: {
+                        class: 'et-header-cell et-data-table__header-cell',
+                        role: 'columnheader',
+                    },
+                }]
+        }] });
+
+class HeaderCellDefDirective extends CdkHeaderCellDef {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HeaderCellDefDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: HeaderCellDefDirective, isStandalone: true, selector: "[etHeaderCellDef]", providers: [{ provide: CdkHeaderCellDef, useExisting: HeaderCellDefDirective }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HeaderCellDefDirective, decorators: [{
@@ -19626,69 +21310,9 @@ const TabImports = [
 
 const TABS_CONFIG = new InjectionToken('TABS_CONFIG');
 
-const FLOATING_UI_PLACEMENTS = [
-    'top',
-    'left',
-    'bottom',
-    'right',
-    'top-start',
-    'top-end',
-    'right-start',
-    'right-end',
-    'bottom-start',
-    'bottom-end',
-    'left-start',
-    'left-end',
-];
-
-/**
- * A utility function to enhance the ux of views containing forms.
- * It helps to prevent the user from accidentally losing unsaved form changes.
- */
-const createNavigationDismissChecker = (config) => {
-    assertInInjectionContext(createNavigationDismissChecker);
-    const { form, compareFn, dismissCheckFn } = config;
-    const currentFormValue = controlValueSignal(form);
-    const hasChanges = computed(() => {
-        const formValue = currentFormValue();
-        if (!formValue)
-            return false;
-        return !(compareFn ? compareFn(formValue, defaultFormValue()) : equal(formValue, defaultFormValue()));
-    }, ...(ngDevMode ? [{ debugName: "hasChanges" }] : []));
-    const defaultFormValue = signal(config.defaultValue ?? form.getRawValue(), ...(ngDevMode ? [{ debugName: "defaultFormValue" }] : []));
-    const runCheck = () => {
-        const isDefaultFormValue = !hasChanges();
-        if (isDefaultFormValue)
-            return of(true);
-        return dismissCheckFn(form.getRawValue());
-    };
-    const refreshDefaultFormValue = () => {
-        defaultFormValue.set(form.getRawValue());
-    };
-    const restoreDefaultFormValue = () => {
-        form.setValue(defaultFormValue());
-        refreshDefaultFormValue();
-    };
-    return {
-        runCheck,
-        refreshDefaultFormValue,
-        restoreDefaultFormValue,
-        hasChanges,
-        defaultFormValue: defaultFormValue.asReadonly(),
-    };
-};
-
-const injectRouterNavigationState = () => {
-    const router = inject(Router);
-    const navState = router.getCurrentNavigation()?.extras.state;
-    return (navState || null);
-};
-
-// Burst cache
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ACCORDION_COMPONENT, ACCORDION_HINT_WRAPPER_DIRECTIVE, ACCORDION_LABEL_WRAPPER_DIRECTIVE, AccordionComponent, AccordionGroupComponent, AccordionHintDirective, AccordionHintWrapperDirective, AccordionImports, AccordionLabelDirective, AccordionLabelWrapperDirective, ActiveTabUnderlineBarManager, ActiveTabUnderlineDirective, AutosizeTextareaDirective, BRACKET_CONFIG_TOKEN, BRACKET_DEFAULT_CONFIG, BRACKET_MATCH_ID_TOKEN, BRACKET_ROUND_ID_TOKEN, BRACKET_TOKEN, Bracket, BracketComponent, BracketImports, BracketMatchComponent, BracketMatchDirective, index as BracketNew, BracketRoundDirective, BracketRoundHeaderComponent, BreadcrumbComponent, BreadcrumbImports, BreadcrumbItemDirective, BreadcrumbItemTemplateDirective, BreadcrumbOutletComponent, BreadcrumbTemplateDirective, ButtonComponent, ButtonDirective, ButtonImports, CAROUSEL_ITEM_NAV_TOKEN, CAROUSEL_ITEM_TOKEN, CAROUSEL_NEXT_BUTTON_TOKEN, CAROUSEL_PREVIOUS_BUTTON_TOKEN, CAROUSEL_TOGGLE_AUTO_PLAY_BUTTON_TOKEN, CAROUSEL_TOKEN, CHECKBOX_FIELD_TOKEN, CHECKBOX_GROUP_CONTROL_TOKEN, CHECKBOX_GROUP_TOKEN, CHECKBOX_TOKEN, CHEVRON_ICON, COLOR_INPUT_TOKEN, COMBOBOX_BODY_EMPTY_TEMPLATE_TOKEN, COMBOBOX_BODY_ERROR_TEMPLATE_TOKEN, COMBOBOX_BODY_LOADING_TEMPLATE_TOKEN, COMBOBOX_BODY_MORE_ITEMS_HINT_TEMPLATE_TOKEN, COMBOBOX_BODY_TOKEN, COMBOBOX_CONFIG_TOKEN, COMBOBOX_DEFAULT_CONFIG, COMBOBOX_OPTION_TEMPLATE_TOKEN, COMBOBOX_OPTION_TOKEN, COMBOBOX_SELECTED_OPTION_TEMPLATE_TOKEN, COMBOBOX_TOKEN, CarouselComponent, CarouselDirective, CarouselImports, CarouselItemComponent, CarouselItemDirective, CarouselItemNavComponent, CarouselItemNavDirective, CarouselNextButtonDirective, CarouselPreviousButtonDirective, CarouselToggleAutoPlayButtonDirective, CellDefDirective, CellDirective, CheckboxComponent, CheckboxDirective, CheckboxFieldComponent, CheckboxFieldDirective, CheckboxGroupComponent, CheckboxGroupControlDirective, CheckboxGroupDirective, CheckboxImports, ColorInputComponent, ColorInputDirective, ColumnDefDirective, ComboboxBodyComponent, ComboboxBodyEmptyTemplateDirective, ComboboxBodyErrorTemplateDirective, ComboboxBodyLoadingTemplateDirective, ComboboxBodyMoreItemsHintTemplateDirective, ComboboxComponent, ComboboxDirective, ComboboxImports, ComboboxOptionComponent, ComboboxOptionTemplateDirective, ComboboxSelectedOptionTemplateDirective, DATE_INPUT_FORMAT_TOKEN, DATE_INPUT_TOKEN, DATE_TIME_INPUT_FORMAT_TOKEN, DATE_TIME_INPUT_TOKEN, DEFAULT_DATE_INPUT_FORMAT, DEFAULT_DATE_TIME_INPUT_FORMAT, DEFAULT_TIME_INPUT_FORMAT, DYNAMIC_FORM_FIELD_TOKEN, DYNAMIC_FORM_GROUP_TOKEN, DateInputComponent, DateInputDirective, DateTimeInputComponent, DateTimeInputDirective, DecoratedFormFieldBase, DecoratedInputBase, DefaultValidatorErrorsService, DynamicFormFieldDirective, DynamicFormGroupDirective, EMAIL_INPUT_TOKEN, ET_OVERLAY_CONFIG_CLASS_KEYS, EXPOSE_INPUT_VARS_TOKEN, EmailInputComponent, EmailInputDirective, ErrorComponent, ExposeInputVarsDirective, FILTER_OVERLAY_CONFIG, FLOATING_UI_PLACEMENTS, FilterOverlayService, FooterCellDefDirective, FooterCellDirective, FooterRowComponent, FooterRowDefDirective, FormFieldStateService, FormGroupStateService, HeaderCellDefDirective, HeaderCellDirective, HeaderRowComponent, HeaderRowDefDirective, ICONS_TOKEN, ICON_DIRECTIVE_TOKEN, IMAGE_CONFIG_TOKEN, INPUT_PREFIX_TOKEN, INPUT_SUFFIX_TOKEN, INPUT_TOKEN, IconDirective, IconImports, IfInputEmptyDirective, IfInputFilledDirective, IfSupportsShowPickerDirective, InlineTabBodyComponent, InlineTabBodyHostDirective, InlineTabChangeEvent, InlineTabComponent, InlineTabContentDirective, InlineTabHeaderComponent, InlineTabLabelDirective, InlineTabLabelWrapperDirective, InlineTabsComponent, InputBase, InputDirective, InputFieldComponent, InputImports, InputPrefixDirective, InputStateService, InputSuffixDirective, LABEL_TOKEN, LabelComponent, LabelImports, LabelSuffixDirective, MASONRY_ITEM_TOKEN, MAX_SAFE_INTEGER, MENU, MENU_CHECKBOX_GROUP_TOKEN, MENU_CONTAINER, MENU_GROUP_TITLE_TOKEN, MENU_GROUP_TOKEN, MENU_ITEM_TOKEN, MENU_RADIO_GROUP_TOKEN, MENU_SEARCH_TEMPLATE_TOKEN, MENU_TEMPLATE, MENU_TRIGGER_TOKEN, MasonryComponent, MasonryImports, MasonryItemComponent, MenuCheckboxGroupDirective, MenuCheckboxItemComponent, MenuComponent, MenuContainerComponent, MenuGroupDirective, MenuGroupTitleDirective, MenuImports, MenuItemDirective, MenuRadioGroupDirective, MenuRadioItemComponent, MenuSearchTemplateDirective, MenuTriggerDirective, NATIVE_INPUT_REF_TOKEN, NATIVE_SELECT_INPUT_TOKEN, NATIVE_SELECT_OPTION_TOKEN, NUMBER_INPUT_TOKEN, NativeInputRefDirective, NativeSelectImports, NativeSelectInputComponent, NativeSelectInputDirective, NativeSelectOptionComponent, NativeSelectOptionDirective, NavTabLinkComponent, NavTabsComponent, NavTabsOutletComponent, NewBracketComponent, NewBracketDefaultMatchComponent, NewBracketDefaultRoundHeaderComponent, NoDataRowDirective, NumberInputComponent, NumberInputDirective, OVERLAY_BACK_OR_CLOSE_TOKEN, OVERLAY_BODY_TOKEN, OVERLAY_CLOSE_BLOCKER_TOKEN, OVERLAY_CONFIG, OVERLAY_DATA, OVERLAY_FOOTER_TOKEN, OVERLAY_HEADER_TEMPLATE_TOKEN, OVERLAY_HEADER_TOKEN, OVERLAY_MAIN_TOKEN, OVERLAY_QUERY_PARAM_INPUT_NAME, OVERLAY_ROUTER_CONFIG_TOKEN, OVERLAY_ROUTER_LINK_TOKEN, OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, OVERLAY_ROUTER_OUTLET_TOKEN, OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, OverlayBackOrCloseDirective, OverlayBodyComponent, OverlayCloseBlockerDirective, OverlayCloseDirective, OverlayContainerComponent, OverlayFooterDirective, OverlayHandlerLinkDirective, OverlayHeaderDirective, OverlayHeaderTemplateDirective, OverlayImports, OverlayMainDirective, OverlayOriginCloneComponent, OverlayRef, OverlayRouteHeaderTemplateOutletComponent, OverlayRouterLinkDirective, OverlayRouterOutletComponent, OverlayRouterOutletDisabledTemplateDirective, OverlayRouterService, OverlaySharedRouteTemplateDirective, OverlaySharedRouteTemplateOutletComponent, OverlaySidebarComponent, OverlaySidebarPageComponent, OverlayTitleDirective, OverlayWithRoutingImports, OverlayWithSidebarImports, PASSWORD_INPUT_TOKEN, PROGRESS_SPINNER_DEFAULT_OPTIONS, PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY, PaginatedTabHeaderDirective, PaginationComponent, PaginationHeadService, PaginationImports, PaginationLinkDirective, PasswordInputComponent, PasswordInputDirective, PasswordInputToggleComponent, PictureComponent, ProgressSpinnerComponent, QUERY_ERROR_TOKEN, QueryButtonComponent, QueryButtonDirective, QueryErrorComponent, QueryErrorDirective, RADIO_FIELD_TOKEN, RADIO_GROUP_TOKEN, RADIO_TOKEN, RICH_FILTER_BUTTON_SLOT_TOKEN, RICH_FILTER_BUTTON_TOKEN, RICH_FILTER_CONTENT_TOKEN, RICH_FILTER_TOP_TOKEN, RadioComponent, RadioDirective, RadioFieldComponent, RadioFieldDirective, RadioGroupComponent, RadioGroupDirective, RadioImports, RichFilterButtonDirective, RichFilterButtonSlotDirective, RichFilterContentDirective, RichFilterHostComponent, RichFilterImports, RichFilterTopDirective, RowComponent, RowDefDirective, SCROLLABLE_IGNORE_CHILD_ATTRIBUTE, SCROLLABLE_IGNORE_CHILD_TOKEN, SCROLLABLE_IS_ACTIVE_CHILD_ATTRIBUTE, SCROLLABLE_IS_ACTIVE_CHILD_TOKEN, SCROLLABLE_LOADING_TEMPLATE_TOKEN, SCROLLABLE_PLACEHOLDER_ITEM_TEMPLATE_TOKEN, SCROLLABLE_PLACEHOLDER_OVERLAY_TEMPLATE_TOKEN, SEARCH_INPUT_TOKEN, SEGMENTED_BUTTON_FIELD_TOKEN, SEGMENTED_BUTTON_GROUP_TOKEN, SEGMENTED_BUTTON_TOKEN, SELECTION_LIST_FIELD, SELECTION_LIST_OPTION, SELECT_BODY_TOKEN, SELECT_FIELD_TOKEN, SELECT_OPTION_TOKEN, SELECT_TOKEN, SHOW_PICKER_TRIGGER_TOKEN, SIDEBAR_OVERLAY_CONFIG, SLIDER_THUMB_CONTENT_TEMPLATE_TOKEN, SLIDE_TOGGLE_TOKEN, SORT_DEFAULT_OPTIONS, SORT_HEADER_COLUMN_DEF, SORT_HEADER_INTL_PROVIDER, SORT_HEADER_INTL_PROVIDER_FACTORY, STATIC_FORM_FIELD_TOKEN, STATIC_FORM_GROUP_TOKEN, ScrollableComponent, ScrollableIgnoreChildDirective, ScrollableImports, ScrollableIsActiveChildDirective, ScrollableLoadingTemplateDirective, ScrollablePlaceholderComponent, ScrollablePlaceholderItemTemplateDirective, ScrollablePlaceholderOverlayTemplateDirective, SearchInputClearComponent, SearchInputComponent, SearchInputDirective, SegmentedButtonComponent, SegmentedButtonDirective, SegmentedButtonFieldComponent, SegmentedButtonFieldDirective, SegmentedButtonGroupComponent, SegmentedButtonGroupDirective, SegmentedButtonImports, SelectBodyComponent, SelectBodyDirective, SelectComponent, SelectDirective, SelectFieldComponent, SelectFieldDirective, SelectImports, SelectOptionComponent, SelectOptionDirective, SelectionListFieldComponent, SelectionListFieldDirective, SelectionListImports, SelectionListOptionComponent, SelectionListOptionDirective, ShowPickerTriggerDirective, SidebarOverlayService, SkeletonComponent, SkeletonImports, SkeletonItemComponent, SlideToggleComponent, SlideToggleDirective, SlideToggleFieldComponent, SlideToggleImports, SliderComponent, SliderFieldComponent, SliderImports, SliderThumbContentTemplateDirective, SortDirective, SortHeaderComponent, SortHeaderIntl, SortImports, StaticFormFieldDirective, StaticFormGroupDirective, SwipeHandlerService, TAB, TABS_CONFIG, TAB_CONTENT, TAB_GROUP, TAB_LABEL, TEL_INPUT_TOKEN, TEXTAREA_INPUT_TOKEN, TEXT_INPUT_TOKEN, TIMES_ICON, TIME_INPUT_FORMAT_TOKEN, TIME_INPUT_TOKEN, TOGGLETIP, TOGGLETIP_CONFIG, TOGGLETIP_DEFAULT_CONFIG, TOGGLETIP_DIRECTIVE, TOGGLETIP_TEMPLATE, TOGGLETIP_TEXT, TOOLTIP, TOOLTIP_CONFIG, TOOLTIP_DEFAULT_CONFIG, TOOLTIP_DIRECTIVE, TOOLTIP_TEMPLATE, TOOLTIP_TEXT, TabImports, TableBusyDirective, TableBusyOutletDirective, TableComponent, TableDataSource, TableImports, TelInputComponent, TelInputDirective, TextColumnComponent, TextInputComponent, TextInputDirective, TextareaInputComponent, TextareaInputDirective, TimeInputComponent, TimeInputDirective, ToggletipCloseDirective, ToggletipComponent, ToggletipDirective, ToggletipImports, TooltipComponent, TooltipDirective, TooltipImports, VALIDATOR_ERROR_SERVICE_TOKEN, WRITEABLE_INPUT_TOKEN, WRITEABLE_INPUT_VALUE_ACCESSOR, WriteableInputDirective, _MAT_INK_BAR_POSITIONER, _MAT_INK_BAR_POSITIONER_FACTORY, abortFullscreenAnimation, accordionAnimations, anchoredDialogOverlayStrategy, bottomSheetOverlayStrategy, cleanupFullscreenAnimation, cleanupFullscreenAnimationStyles, createBracketConfig, createComboboxConfig, createFormChangesTracker, createNavigationDismissChecker, createOverlayDismissChecker, createOverlayHandler, createOverlayHandlerWithQueryParamLifecycle, createToggletipConfig, createTooltipConfig, defaultSubmitButtonConfigFn, dialogOverlayStrategy, enableDragToDismiss, exactMatchOptions, extractFirstImageUrl, findNextRelevantHtmlElement, fullScreenDialogOverlayStrategy, getClosestOverlay, getIntersectionInfo, getOriginCoordinatesAndDimensions, injectAnchoredDialogStrategy, injectAnchoredDialogStrategyDefaults, injectBottomSheetStrategy, injectBottomSheetStrategyDefaults, injectBreadcrumbManager, injectDialogStrategy, injectDialogStrategyDefaults, injectFocusRegistry, injectFullscreenDialogStrategy, injectFullscreenDialogStrategyDefaults, injectLeftSheetStrategy, injectLeftSheetStrategyDefaults, injectOverlayManager, injectOverlayScrollBlocker, injectRightSheetStrategy, injectRightSheetStrategyDefaults, injectRouterNavigationState, injectTopSheetStrategy, injectTopSheetStrategyDefaults, isEmptyArray, isHtmlElement, isObjectArray, isPointerEvent, isPrimitiveArray, isScrollableChildActive, isScrollableChildIgnored, isTouchEvent$2 as isTouchEvent, isUpperBracketMatch, leftSheetOverlayStrategy, mergeOverlayBreakpointConfigs, normalizePictureSizes, normalizePictureSource, normalizeRoundType, orderRounds, orderRoundsByRoundNumber, paginate, provideAnchoredDialogStrategy, provideAnchoredDialogStrategyDefaults, provideBottomSheetStrategy, provideBottomSheetStrategyDefaults, provideBracketConfig, provideBreadcrumbManager, provideComboboxConfig, provideDateFormat, provideDateTimeFormat, provideDialogStrategy, provideDialogStrategyDefaults, provideFilterOverlayConfig, provideFocusRegistry, provideFullscreenDialogStrategy, provideFullscreenDialogStrategyDefaults, provideIcons, provideImageConfig, provideLeftSheetStrategy, provideLeftSheetStrategyDefaults, provideOverlay, provideOverlayManager, provideOverlayRouterConfig, provideOverlayScrollBlocker, provideRightSheetStrategy, provideRightSheetStrategyDefaults, provideSidebarOverlayConfig, provideSort, provideTimeFormat, provideToggletipConfig, provideTooltipConfig, provideTopSheetStrategy, provideTopSheetStrategyDefaults, provideValidatorErrorsService, rightSheetOverlayStrategy, signalVisibilityChangeClasses, startFullscreenEnterAnimation, startFullscreenLeaveAnimation, subsetMatchOptions, tabAnimations, topSheetOverlayStrategy, transformingBottomSheetToDialogOverlayStrategy, transformingFullScreenDialogToDialogOverlayStrategy, transformingFullScreenDialogToRightSheetOverlayStrategy };
+export { ACCORDION_COMPONENT, ACCORDION_HINT_WRAPPER_DIRECTIVE, ACCORDION_LABEL_WRAPPER_DIRECTIVE, AccordionComponent, AccordionGroupComponent, AccordionHintDirective, AccordionHintWrapperDirective, AccordionImports, AccordionLabelDirective, AccordionLabelWrapperDirective, ActiveTabUnderlineBarManager, ActiveTabUnderlineDirective, AutosizeTextareaDirective, BRACKET_CONFIG_TOKEN, BRACKET_DEFAULT_CONFIG, BRACKET_MATCH_ID_TOKEN, BRACKET_ROUND_ID_TOKEN, BRACKET_TOKEN, Bracket, BracketComponent, BracketImports, BracketMatchComponent, BracketMatchDirective, index as BracketNew, BracketRoundDirective, BracketRoundHeaderComponent, BreadcrumbComponent, BreadcrumbImports, BreadcrumbItemDirective, BreadcrumbItemTemplateDirective, BreadcrumbOutletComponent, BreadcrumbTemplateDirective, ButtonComponent, ButtonDirective, ButtonImports, CAROUSEL_ITEM_NAV_TOKEN, CAROUSEL_ITEM_TOKEN, CAROUSEL_NEXT_BUTTON_TOKEN, CAROUSEL_PREVIOUS_BUTTON_TOKEN, CAROUSEL_TOGGLE_AUTO_PLAY_BUTTON_TOKEN, CAROUSEL_TOKEN, CHECKBOX_FIELD_TOKEN, CHECKBOX_GROUP_CONTROL_TOKEN, CHECKBOX_GROUP_TOKEN, CHECKBOX_TOKEN, CHEVRON_ICON, COLOR_INPUT_TOKEN, COMBOBOX_BODY_EMPTY_TEMPLATE_TOKEN, COMBOBOX_BODY_ERROR_TEMPLATE_TOKEN, COMBOBOX_BODY_LOADING_TEMPLATE_TOKEN, COMBOBOX_BODY_MORE_ITEMS_HINT_TEMPLATE_TOKEN, COMBOBOX_BODY_TOKEN, COMBOBOX_CONFIG_TOKEN, COMBOBOX_DEFAULT_CONFIG, COMBOBOX_OPTION_TEMPLATE_TOKEN, COMBOBOX_OPTION_TOKEN, COMBOBOX_SELECTED_OPTION_TEMPLATE_TOKEN, COMBOBOX_TOKEN, CarouselComponent, CarouselDirective, CarouselImports, CarouselItemComponent, CarouselItemDirective, CarouselItemNavComponent, CarouselItemNavDirective, CarouselNextButtonDirective, CarouselPreviousButtonDirective, CarouselToggleAutoPlayButtonDirective, CellDefDirective, CellDirective, CheckboxComponent, CheckboxDirective, CheckboxFieldComponent, CheckboxFieldDirective, CheckboxGroupComponent, CheckboxGroupControlDirective, CheckboxGroupDirective, CheckboxImports, ColorInputComponent, ColorInputDirective, ColumnDefDirective, ComboboxBodyComponent, ComboboxBodyEmptyTemplateDirective, ComboboxBodyErrorTemplateDirective, ComboboxBodyLoadingTemplateDirective, ComboboxBodyMoreItemsHintTemplateDirective, ComboboxComponent, ComboboxDirective, ComboboxImports, ComboboxOptionComponent, ComboboxOptionTemplateDirective, ComboboxSelectedOptionTemplateDirective, DAILYMOTION_PLAYER_TOKEN, DATE_INPUT_FORMAT_TOKEN, DATE_INPUT_TOKEN, DATE_TIME_INPUT_FORMAT_TOKEN, DATE_TIME_INPUT_TOKEN, DEFAULT_DATE_INPUT_FORMAT, DEFAULT_DATE_TIME_INPUT_FORMAT, DEFAULT_TIME_INPUT_FORMAT, DYNAMIC_FORM_FIELD_TOKEN, DYNAMIC_FORM_GROUP_TOKEN, DailymotionPlayerComponent, DailymotionPlayerDirective, DateInputComponent, DateInputDirective, DateTimeInputComponent, DateTimeInputDirective, DecoratedFormFieldBase, DecoratedInputBase, DefaultValidatorErrorsService, DynamicFormFieldDirective, DynamicFormGroupDirective, EMAIL_INPUT_TOKEN, ET_OVERLAY_CONFIG_CLASS_KEYS, EXPOSE_INPUT_VARS_TOKEN, EmailInputComponent, EmailInputDirective, ErrorComponent, ExposeInputVarsDirective, FACEBOOK_PLAYER_TOKEN, FILTER_OVERLAY_CONFIG, FLOATING_UI_PLACEMENTS, FacebookPlayerComponent, FacebookPlayerDirective, FilterOverlayService, FooterCellDefDirective, FooterCellDirective, FooterRowComponent, FooterRowDefDirective, FormFieldStateService, FormGroupStateService, HeaderCellDefDirective, HeaderCellDirective, HeaderRowComponent, HeaderRowDefDirective, ICONS_TOKEN, ICON_DIRECTIVE_TOKEN, IMAGE_CONFIG_TOKEN, INPUT_PREFIX_TOKEN, INPUT_SUFFIX_TOKEN, INPUT_TOKEN, IconDirective, IconImports, IfInputEmptyDirective, IfInputFilledDirective, IfSupportsShowPickerDirective, InlineTabBodyComponent, InlineTabBodyHostDirective, InlineTabChangeEvent, InlineTabComponent, InlineTabContentDirective, InlineTabHeaderComponent, InlineTabLabelDirective, InlineTabLabelWrapperDirective, InlineTabsComponent, InputBase, InputDirective, InputFieldComponent, InputImports, InputPrefixDirective, InputStateService, InputSuffixDirective, KICK_PLAYER_TOKEN, KickPlayerComponent, KickPlayerDirective, LABEL_TOKEN, LabelComponent, LabelImports, LabelSuffixDirective, MASONRY_ITEM_TOKEN, MAX_SAFE_INTEGER, MENU, MENU_CHECKBOX_GROUP_TOKEN, MENU_CONTAINER, MENU_GROUP_TITLE_TOKEN, MENU_GROUP_TOKEN, MENU_ITEM_TOKEN, MENU_RADIO_GROUP_TOKEN, MENU_SEARCH_TEMPLATE_TOKEN, MENU_TEMPLATE, MENU_TRIGGER_TOKEN, MasonryComponent, MasonryImports, MasonryItemComponent, MenuCheckboxGroupDirective, MenuCheckboxItemComponent, MenuComponent, MenuContainerComponent, MenuGroupDirective, MenuGroupTitleDirective, MenuImports, MenuItemDirective, MenuRadioGroupDirective, MenuRadioItemComponent, MenuSearchTemplateDirective, MenuTriggerDirective, NATIVE_INPUT_REF_TOKEN, NATIVE_SELECT_INPUT_TOKEN, NATIVE_SELECT_OPTION_TOKEN, NUMBER_INPUT_TOKEN, NativeInputRefDirective, NativeSelectImports, NativeSelectInputComponent, NativeSelectInputDirective, NativeSelectOptionComponent, NativeSelectOptionDirective, NavTabLinkComponent, NavTabsComponent, NavTabsOutletComponent, NewBracketComponent, NewBracketDefaultMatchComponent, NewBracketDefaultRoundHeaderComponent, NoDataRowDirective, NumberInputComponent, NumberInputDirective, OVERLAY_BACK_OR_CLOSE_TOKEN, OVERLAY_BODY_TOKEN, OVERLAY_CLOSE_BLOCKER_TOKEN, OVERLAY_CONFIG, OVERLAY_DATA, OVERLAY_FOOTER_TOKEN, OVERLAY_HEADER_TEMPLATE_TOKEN, OVERLAY_HEADER_TOKEN, OVERLAY_MAIN_TOKEN, OVERLAY_QUERY_PARAM_INPUT_NAME, OVERLAY_ROUTER_CONFIG_TOKEN, OVERLAY_ROUTER_LINK_TOKEN, OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, OVERLAY_ROUTER_OUTLET_TOKEN, OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, OverlayBackOrCloseDirective, OverlayBodyComponent, OverlayCloseBlockerDirective, OverlayCloseDirective, OverlayContainerComponent, OverlayFooterDirective, OverlayHandlerLinkDirective, OverlayHeaderDirective, OverlayHeaderTemplateDirective, OverlayImports, OverlayMainDirective, OverlayOriginCloneComponent, OverlayRef, OverlayRouteHeaderTemplateOutletComponent, OverlayRouterLinkDirective, OverlayRouterOutletComponent, OverlayRouterOutletDisabledTemplateDirective, OverlayRouterService, OverlaySharedRouteTemplateDirective, OverlaySharedRouteTemplateOutletComponent, OverlaySidebarComponent, OverlaySidebarPageComponent, OverlayTitleDirective, OverlayWithRoutingImports, OverlayWithSidebarImports, PASSWORD_INPUT_TOKEN, PROGRESS_SPINNER_DEFAULT_OPTIONS, PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY, PaginatedTabHeaderDirective, PaginationComponent, PaginationHeadService, PaginationImports, PaginationLinkDirective, PasswordInputComponent, PasswordInputDirective, PasswordInputToggleComponent, PictureComponent, ProgressSpinnerComponent, QUERY_ERROR_TOKEN, QueryButtonComponent, QueryButtonDirective, QueryErrorComponent, QueryErrorDirective, RADIO_FIELD_TOKEN, RADIO_GROUP_TOKEN, RADIO_TOKEN, RICH_FILTER_BUTTON_SLOT_TOKEN, RICH_FILTER_BUTTON_TOKEN, RICH_FILTER_CONTENT_TOKEN, RICH_FILTER_TOP_TOKEN, RadioComponent, RadioDirective, RadioFieldComponent, RadioFieldDirective, RadioGroupComponent, RadioGroupDirective, RadioImports, RichFilterButtonDirective, RichFilterButtonSlotDirective, RichFilterContentDirective, RichFilterHostComponent, RichFilterImports, RichFilterTopDirective, RowComponent, RowDefDirective, SCROLLABLE_IGNORE_CHILD_ATTRIBUTE, SCROLLABLE_IGNORE_CHILD_TOKEN, SCROLLABLE_IS_ACTIVE_CHILD_ATTRIBUTE, SCROLLABLE_IS_ACTIVE_CHILD_TOKEN, SCROLLABLE_LOADING_TEMPLATE_TOKEN, SCROLLABLE_PLACEHOLDER_ITEM_TEMPLATE_TOKEN, SCROLLABLE_PLACEHOLDER_OVERLAY_TEMPLATE_TOKEN, SEARCH_INPUT_TOKEN, SEGMENTED_BUTTON_FIELD_TOKEN, SEGMENTED_BUTTON_GROUP_TOKEN, SEGMENTED_BUTTON_TOKEN, SELECTION_LIST_FIELD, SELECTION_LIST_OPTION, SELECT_BODY_TOKEN, SELECT_FIELD_TOKEN, SELECT_OPTION_TOKEN, SELECT_TOKEN, SHOW_PICKER_TRIGGER_TOKEN, SIDEBAR_OVERLAY_CONFIG, SLIDER_THUMB_CONTENT_TEMPLATE_TOKEN, SLIDE_TOGGLE_TOKEN, SOOP_PLAYER_TOKEN, SORT_DEFAULT_OPTIONS, SORT_HEADER_COLUMN_DEF, SORT_HEADER_INTL_PROVIDER, SORT_HEADER_INTL_PROVIDER_FACTORY, STATIC_FORM_FIELD_TOKEN, STATIC_FORM_GROUP_TOKEN, STREAM_CONSENT_CONTENT_TOKEN, STREAM_CONSENT_PLACEHOLDER_TOKEN, STREAM_CONSENT_TOKEN, STREAM_PLAYER_TOKEN, STREAM_USER_CONSENT_PROVIDER_TOKEN, ScrollableComponent, ScrollableIgnoreChildDirective, ScrollableImports, ScrollableIsActiveChildDirective, ScrollableLoadingTemplateDirective, ScrollablePlaceholderComponent, ScrollablePlaceholderItemTemplateDirective, ScrollablePlaceholderOverlayTemplateDirective, SearchInputClearComponent, SearchInputComponent, SearchInputDirective, SegmentedButtonComponent, SegmentedButtonDirective, SegmentedButtonFieldComponent, SegmentedButtonFieldDirective, SegmentedButtonGroupComponent, SegmentedButtonGroupDirective, SegmentedButtonImports, SelectBodyComponent, SelectBodyDirective, SelectComponent, SelectDirective, SelectFieldComponent, SelectFieldDirective, SelectImports, SelectOptionComponent, SelectOptionDirective, SelectionListFieldComponent, SelectionListFieldDirective, SelectionListImports, SelectionListOptionComponent, SelectionListOptionDirective, ShowPickerTriggerDirective, SidebarOverlayService, SkeletonComponent, SkeletonImports, SkeletonItemComponent, SlideToggleComponent, SlideToggleDirective, SlideToggleFieldComponent, SlideToggleImports, SliderComponent, SliderFieldComponent, SliderImports, SliderThumbContentTemplateDirective, SoopPlayerComponent, SoopPlayerDirective, SortDirective, SortHeaderComponent, SortHeaderIntl, SortImports, StaticFormFieldDirective, StaticFormGroupDirective, StreamConsentAcceptDirective, StreamConsentComponent, StreamConsentContentDirective, StreamConsentDirective, StreamConsentPlaceholderDirective, StreamImports, StreamPipChromeComponent, TAB, TABS_CONFIG, TAB_CONTENT, TAB_GROUP, TAB_LABEL, TEL_INPUT_TOKEN, TEXTAREA_INPUT_TOKEN, TEXT_INPUT_TOKEN, TIKTOK_PLAYER_TOKEN, TIMES_ICON, TIME_INPUT_FORMAT_TOKEN, TIME_INPUT_TOKEN, TOGGLETIP, TOGGLETIP_CONFIG, TOGGLETIP_DEFAULT_CONFIG, TOGGLETIP_DIRECTIVE, TOGGLETIP_TEMPLATE, TOGGLETIP_TEXT, TOOLTIP, TOOLTIP_CONFIG, TOOLTIP_DEFAULT_CONFIG, TOOLTIP_DIRECTIVE, TOOLTIP_TEMPLATE, TOOLTIP_TEXT, TWITCH_PLAYER_TOKEN, TabImports, TableBusyDirective, TableBusyOutletDirective, TableComponent, TableDataSource, TableImports, TelInputComponent, TelInputDirective, TextColumnComponent, TextInputComponent, TextInputDirective, TextareaInputComponent, TextareaInputDirective, TikTokPlayerComponent, TikTokPlayerDirective, TimeInputComponent, TimeInputDirective, ToggletipCloseDirective, ToggletipComponent, ToggletipDirective, ToggletipImports, TooltipComponent, TooltipDirective, TooltipImports, TwitchPlayerComponent, TwitchPlayerDirective, VALIDATOR_ERROR_SERVICE_TOKEN, VIMEO_PLAYER_TOKEN, VimeoPlayerComponent, VimeoPlayerDirective, WRITEABLE_INPUT_TOKEN, WRITEABLE_INPUT_VALUE_ACCESSOR, WriteableInputDirective, YOUTUBE_PLAYER_SLOT_TOKEN, YOUTUBE_PLAYER_TOKEN, YoutubePlayerComponent, YoutubePlayerDirective, YoutubePlayerParamsDirective, YoutubePlayerSlotComponent, YoutubePlayerSlotDirective, _MAT_INK_BAR_POSITIONER, _MAT_INK_BAR_POSITIONER_FACTORY, abortFullscreenAnimation, accordionAnimations, anchoredDialogOverlayStrategy, animateWithFixedWrapper, bottomSheetOverlayStrategy, cleanupFullscreenAnimation, cleanupFullscreenAnimationStyles, createBracketConfig, createComboboxConfig, createFormChangesTracker, createNavigationDismissChecker, createOverlayDismissChecker, createOverlayHandler, createOverlayHandlerWithQueryParamLifecycle, createSwipeTracker, createToggletipConfig, createTooltipConfig, defaultSubmitButtonConfigFn, dialogOverlayStrategy, enableDragToDismiss, exactMatchOptions, extractFirstImageUrl, findNextRelevantHtmlElement, fullScreenDialogOverlayStrategy, getClosestOverlay, getOriginCoordinatesAndDimensions, injectAnchoredDialogStrategy, injectAnchoredDialogStrategyDefaults, injectBottomSheetStrategy, injectBottomSheetStrategyDefaults, injectBreadcrumbManager, injectDialogStrategy, injectDialogStrategyDefaults, injectFocusRegistry, injectFullscreenDialogStrategy, injectFullscreenDialogStrategyDefaults, injectLeftSheetStrategy, injectLeftSheetStrategyDefaults, injectOverlayManager, injectOverlayScrollBlocker, injectRightSheetStrategy, injectRightSheetStrategyDefaults, injectRouterNavigationState, injectStreamManager, injectStreamPipManager, injectStreamScriptLoader, injectStreamUserConsentProvider, injectTopSheetStrategy, injectTopSheetStrategyDefaults, isEmptyArray, isHtmlElement, isObjectArray, isPointerEvent, isPrimitiveArray, isScrollableChildActive, isScrollableChildIgnored, isTouchEvent$1 as isTouchEvent, isUpperBracketMatch, leftSheetOverlayStrategy, mergeOverlayBreakpointConfigs, normalizePictureSizes, normalizePictureSource, normalizeRoundType, orderRounds, orderRoundsByRoundNumber, paginate, pipMoveBefore, provideAnchoredDialogStrategy, provideAnchoredDialogStrategyDefaults, provideBottomSheetStrategy, provideBottomSheetStrategyDefaults, provideBracketConfig, provideBreadcrumbManager, provideComboboxConfig, provideDateFormat, provideDateTimeFormat, provideDialogStrategy, provideDialogStrategyDefaults, provideFilterOverlayConfig, provideFocusRegistry, provideFullscreenDialogStrategy, provideFullscreenDialogStrategyDefaults, provideIcons, provideImageConfig, provideLeftSheetStrategy, provideLeftSheetStrategyDefaults, provideOverlay, provideOverlayManager, provideOverlayRouterConfig, provideOverlayScrollBlocker, provideRightSheetStrategy, provideRightSheetStrategyDefaults, provideSidebarOverlayConfig, provideSort, provideStreamManager, provideStreamPipManager, provideTimeFormat, provideToggletipConfig, provideTooltipConfig, provideTopSheetStrategy, provideTopSheetStrategyDefaults, provideValidatorErrorsService, rightSheetOverlayStrategy, signalVisibilityChangeClasses, startFullscreenEnterAnimation, startFullscreenLeaveAnimation, subsetMatchOptions, tabAnimations, topSheetOverlayStrategy, transformingBottomSheetToDialogOverlayStrategy, transformingFullScreenDialogToDialogOverlayStrategy, transformingFullScreenDialogToRightSheetOverlayStrategy };
 //# sourceMappingURL=ethlete-cdk.mjs.map