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

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, 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 { 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 * 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';
@@ -6357,42 +6357,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 +6382,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 +6398,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 +6418,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 +6436,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() {
@@ -9026,71 +8991,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 +9005,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 +9054,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 +9089,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 +9118,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 +9146,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 +9156,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 +9212,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 +9238,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 +9275,7 @@ class ScrollableComponent {
     }
     scrollToElementViaNavigation(elementIndex) {
         const element = this.scrollableChildren()[elementIndex];
-        this._manualActiveNavigationIndex.set(elementIndex);
+        this.manualActiveNavigationIndex.set(elementIndex);
         this.scrollToElement({
             element,
         });
@@ -9523,92 +9296,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 +10480,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 +10490,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 +10522,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 +10537,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 +10612,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 +10629,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 +10638,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 +10669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                                 'autoPlayTime',
                                 'pauseAutoPlayOnHover',
                                 'pauseAutoPlayOnFocus',
+                                'pauseAutoPlayOnHidden',
                                 'transitionType',
                                 'transitionDuration',
                             ],
@@ -19690,5 +19412,5 @@ const injectRouterNavigationState = () => {
  * 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, 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, 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 };
 //# sourceMappingURL=ethlete-cdk.mjs.map