@ethlete/cdk 4.23.6 → 4.24.1

package/fesm2022/ethlete-cdk.mjs

@@ -2,7 +2,7 @@ import * as i1 from '@angular/cdk/portal';
 import { CdkPortal, PortalModule, ComponentPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
 import { AsyncPipe, NgClass, NgTemplateOutlet, JsonPipe, NgComponentOutlet, DOCUMENT, Location } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, Directive, booleanAttribute, Input, ContentChild, ContentChildren, inject, ElementRef, Injector, HostBinding, input, numberAttribute, computed, signal, contentChildren, viewChild, viewChildren, isDevMode, Injectable, ChangeDetectorRef, TemplateRef, ViewContainerRef, ViewChild, forwardRef, EventEmitter, Output, ViewChildren, Optional, Inject, SkipSelf, HostListener, effect, NgZone, NgModule, isSignal, DestroyRef, contentChild, assertInInjectionContext, Attribute } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, Directive, booleanAttribute, Input, ContentChild, ContentChildren, inject, ElementRef, Injector, HostBinding, input, numberAttribute, computed, signal, contentChildren, viewChild, viewChildren, isDevMode, Injectable, ChangeDetectorRef, TemplateRef, ViewContainerRef, ViewChild, forwardRef, EventEmitter, Output, ViewChildren, Optional, Inject, SkipSelf, HostListener, contentChild, effect, NgZone, NgModule, isSignal, DestroyRef, assertInInjectionContext, Attribute } from '@angular/core';
 import * as i1$1 from '@ethlete/core';
 import { LetDirective, createDestroy, Memo, signalHostAttributes, signalHostClasses, previousSignalValue, signalHostStyles, nextFrame, syncSignal, signalStyles, injectHostElement, ObserveVisibilityDirective, signalVisibilityChangeClasses, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, AT_LEAST_ONE_REQUIRED, equal, switchQueryListChanges, signalAttributes, ResizeObserverService, createFlipAnimation, AnimatedOverlayDirective, RuntimeError, SelectionModel, ActiveSelectionModel, KeyPressManager, signalClasses, scrollToElement, isEmptyArray, isObjectArray, isPrimitiveArray, createComponentId, ClickOutsideDirective, ANIMATED_LIFECYCLE_TOKEN, AnimatedLifecycleDirective, ObserveContentDirective, clamp, DELAYABLE_TOKEN, ObserveResizeDirective, SmartBlockScrollStrategy, RouterStateService, signalElementDimensions, signalElementScrollState, createIsRenderedSignal, createCanAnimateSignal, useCursorDragScroll, signalElementIntersection, signalElementChildren, getIntersectionInfo, getElementScrollCoordinates, ObserveScrollStateDirective, ClickObserverService, RootBoundaryDirective, elementCanScroll, cloneFormGroup, getFormGroupValue, fromNextFrame, ViewportService, ROOT_BOUNDARY_TOKEN, isElementVisible, AnimatedIfDirective, FocusVisibleService, inferMimeType, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
 import { BehaviorSubject, startWith, map, switchMap, combineLatest, pairwise, tap, takeUntil, skip, of, merge, timer, takeWhile, filter, fromEvent, Subject, Observable, debounceTime, withLatestFrom, distinctUntilChanged, take, skipUntil, skipWhile, catchError, throwError, defer, partition, from, finalize, Subscription } from 'rxjs';
@@ -8701,6 +8701,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                 args: [{ transform: booleanAttribute, alias: SCROLLABLE_IS_ACTIVE_CHILD_ATTRIBUTE }]
             }] } });
 
+const SCROLLABLE_LOADING_TEMPLATE_TOKEN = new InjectionToken('SCROLLABLE_LOADING_TEMPLATE_TOKEN');
+class ScrollableLoadingTemplateDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+        this.repeatContentCount = input(1, { transform: numberAttribute });
+        this.repeat = computed(() => Array.from({ length: this.repeatContentCount() }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ScrollableLoadingTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.9", type: ScrollableLoadingTemplateDirective, isStandalone: true, selector: "ng-template[etScrollableLoadingTemplate]", inputs: { repeatContentCount: { classPropertyName: "repeatContentCount", publicName: "repeatContentCount", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: SCROLLABLE_LOADING_TEMPLATE_TOKEN,
+                useExisting: ScrollableLoadingTemplateDirective,
+            },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ScrollableLoadingTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[etScrollableLoadingTemplate]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: SCROLLABLE_LOADING_TEMPLATE_TOKEN,
+                            useExisting: ScrollableLoadingTemplateDirective,
+                        },
+                    ],
+                }]
+        }] });
+
 // Thresholds for the intersection observer.
 const ELEMENT_INTERSECTION_THRESHOLD = [
     // 5% steps
@@ -8735,12 +8764,15 @@ class ScrollableComponent {
         this.scrollMargin = input(0, { transform: numberAttribute });
         this.scrollOrigin = input('auto');
         this.darkenNonIntersectingItems = input(false, { transform: booleanAttribute });
+        this.showLoadingTemplate = input(false, { transform: booleanAttribute });
+        this.loadingTemplatePosition = input('end');
         this.scrollable = viewChild('scrollable');
         this.firstElement = viewChild('firstElement');
         this.lastElement = viewChild('lastElement');
         this.activeElementList = contentChildren(SCROLLABLE_IS_ACTIVE_CHILD_TOKEN, { descendants: true });
         this.navigationDotsContainer = viewChild('navigationDotsContainer');
         this.firstNavigationDot = viewChild('navigationDot');
+        this.loadingTemplate = contentChild(SCROLLABLE_LOADING_TEMPLATE_TOKEN);
         this.navigationDotDimensions = signalElementDimensions(this.firstNavigationDot);
         this.scrollState = signalElementScrollState(this.scrollable);
         this.isRendered = createIsRenderedSignal();
@@ -8901,7 +8933,7 @@ class ScrollableComponent {
             return '0px';
         }
         else {
-            const dotContainerWidth = this.navigationDotDimensions().rect?.width ?? 20;
+            const dotContainerWidth = this.navigationDotDimensions().client?.width ?? 20;
             let offset = -(activeIndex - 2);
             if (activeIndex < 3) {
                 offset = 0;
@@ -9181,7 +9213,7 @@ class ScrollableComponent {
         this._disableSnapping$.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ScrollableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", 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 } }, outputs: { intersectionChange: "intersectionChange", scrollStateChange: "scrollStateChange" }, host: { classAttribute: "et-scrollable" }, queries: [{ propertyName: "activeElementList", predicate: SCROLLABLE_IS_ACTIVE_CHILD_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    <ng-content />\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    <et-chevron-icon />\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    <et-chevron-icon />\n  </button>\n</ng-template>\n", styles: [".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=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-chevron-icon{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-chevron-icon,.et-scrollable:not([direction]) .et-scrollable-button--start .et-chevron-icon{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-chevron-icon,.et-scrollable:not([direction]) .et-scrollable-button--end .et-chevron-icon{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-chevron-icon{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-chevron-icon{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-chevron-icon{pointer-events:none}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--start{inset-inline:0 0}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--end{inset-inline:calc(100% - 40px) 0}.et-scrollable[sticky-buttons=true]{--_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-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: "component", type: ChevronIconComponent, selector: "et-chevron-icon" }, { kind: "directive", type: ScrollableIgnoreChildDirective, selector: "[etScrollableIgnoreChild]", inputs: ["etScrollableIgnoreChild"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", 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" }, 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    <et-chevron-icon />\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    <et-chevron-icon />\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: [".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=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-chevron-icon{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-chevron-icon,.et-scrollable:not([direction]) .et-scrollable-button--start .et-chevron-icon{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-chevron-icon,.et-scrollable:not([direction]) .et-scrollable-button--end .et-chevron-icon{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-chevron-icon{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-chevron-icon{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-chevron-icon{pointer-events:none}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--start{inset-inline:0 0}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--end{inset-inline:calc(100% - 40px) 0}.et-scrollable[sticky-buttons=true]{--_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-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: "component", type: ChevronIconComponent, selector: "et-chevron-icon" }, { kind: "directive", type: ScrollableIgnoreChildDirective, selector: "[etScrollableIgnoreChild]", inputs: ["etScrollableIgnoreChild"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ScrollableComponent, decorators: [{
             type: Component,
@@ -9195,7 +9227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                         NgTemplateOutlet,
                     ], host: {
                         class: 'et-scrollable',
-                    }, 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    <ng-content />\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    <et-chevron-icon />\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    <et-chevron-icon />\n  </button>\n</ng-template>\n", styles: [".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=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-chevron-icon{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-chevron-icon,.et-scrollable:not([direction]) .et-scrollable-button--start .et-chevron-icon{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-chevron-icon,.et-scrollable:not([direction]) .et-scrollable-button--end .et-chevron-icon{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-chevron-icon{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-chevron-icon{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-chevron-icon{pointer-events:none}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--start{inset-inline:0 0}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--end{inset-inline:calc(100% - 40px) 0}.et-scrollable[sticky-buttons=true]{--_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-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"] }]
+                    }, 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    <et-chevron-icon />\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    <et-chevron-icon />\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: [".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=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-chevron-icon{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-chevron-icon,.et-scrollable:not([direction]) .et-scrollable-button--start .et-chevron-icon{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-chevron-icon,.et-scrollable:not([direction]) .et-scrollable-button--end .et-chevron-icon{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-chevron-icon{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-chevron-icon{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-chevron-icon{pointer-events:none}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--start{inset-inline:0 0}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--end{inset-inline:calc(100% - 40px) 0}.et-scrollable[sticky-buttons=true]{--_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-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: () => [] });
 
 const MENU_CONTAINER = new InjectionToken('ET_MENU_CONTAINER');
@@ -9602,7 +9634,7 @@ class MenuComponent {
                 provide: MENU,
                 useExisting: MenuComponent,
             },
-        ], queries: [{ propertyName: "__menuItemList", predicate: MENU_ITEM_TOKEN, descendants: true }], ngImport: i0, template: "<et-scrollable\n  [direction]=\"orientation()\"\n  [renderButtons]=\"renderScrollableButtons()\"\n  [renderMasks]=\"renderScrollableMasks()\"\n  [cursorDragScroll]=\"orientation() === 'horizontal'\"\n  [scrollableClass]=\"scrollableClass()\"\n  renderScrollbars\n>\n  <ng-content />\n</et-scrollable>\n", styles: [".et-menu{--et-menu-max-inline-size: 300px;--et-menu-max-block-size: 200px;--et-menu-background-color: #b3b3b3;--et-menu-border-radius: 10px}.et-scrollable-container{max-inline-size:var(--et-menu-max-inline-size);max-block-size:min(var(--et-menu-max-block-size),var(--et-floating-max-height, var(--et-menu-max-block-size)));background-color:var(--et-menu-background-color);border-radius:var(--et-menu-border-radius);box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: ScrollableComponent, selector: "et-scrollable", inputs: ["itemSize", "direction", "scrollableRole", "scrollableClass", "renderNavigation", "renderMasks", "renderButtons", "buttonPosition", "renderScrollbars", "stickyButtons", "cursorDragScroll", "disableActiveElementScrolling", "scrollMode", "snap", "scrollMargin", "scrollOrigin", "darkenNonIntersectingItems"], outputs: ["intersectionChange", "scrollStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "__menuItemList", predicate: MENU_ITEM_TOKEN, descendants: true }], ngImport: i0, template: "<et-scrollable\n  [direction]=\"orientation()\"\n  [renderButtons]=\"renderScrollableButtons()\"\n  [renderMasks]=\"renderScrollableMasks()\"\n  [cursorDragScroll]=\"orientation() === 'horizontal'\"\n  [scrollableClass]=\"scrollableClass()\"\n  renderScrollbars\n>\n  <ng-content />\n</et-scrollable>\n", styles: [".et-menu{--et-menu-max-inline-size: 300px;--et-menu-max-block-size: 200px;--et-menu-background-color: #b3b3b3;--et-menu-border-radius: 10px}.et-scrollable-container{max-inline-size:var(--et-menu-max-inline-size);max-block-size:min(var(--et-menu-max-block-size),var(--et-floating-max-height, var(--et-menu-max-block-size)));background-color:var(--et-menu-background-color);border-radius:var(--et-menu-border-radius);box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: ScrollableComponent, selector: "et-scrollable", inputs: ["itemSize", "direction", "scrollableRole", "scrollableClass", "renderNavigation", "renderMasks", "renderButtons", "buttonPosition", "renderScrollbars", "stickyButtons", "cursorDragScroll", "disableActiveElementScrolling", "scrollMode", "snap", "scrollMargin", "scrollOrigin", "darkenNonIntersectingItems", "showLoadingTemplate", "loadingTemplatePosition"], outputs: ["intersectionChange", "scrollStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
@@ -14895,10 +14927,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                     }, imports: [NgClass], hostDirectives: [{ directive: QueryErrorDirective, inputs: ['error', 'query', 'language'] }], template: "<div\n  [ngClass]=\"{ 'et-query-error--can-be-retried': canBeRetried(), 'et-query-error--is-list': isList() }\"\n  class=\"et-query-error\"\n>\n  @if (errorList(); as errorList) {\n    <h3 class=\"et-query-error-title\">{{ errorList.title }}</h3>\n\n    @if (!errorList.isList) {\n      <p class=\"et-query-error-message\">{{ errorList.items[0]!.message }}</p>\n    }\n\n    @if (errorList.isList) {\n      <ul class=\"et-query-error-list\">\n        @for (item of errorList.items; track trackByFn($index, item)) {\n          <li class=\"et-query-error-list-item\">\n            {{ item.message }}\n          </li>\n        }\n      </ul>\n    }\n\n    @if (errorList.canBeRetried) {\n      <button (click)=\"retry()\" class=\"et-query-error-retry-button\">\n        {{ host.language() === 'en' ? 'Retry' : 'Erneut versuchen' }}\n      </button>\n    }\n  }\n</div>\n" }]
         }] });
 
+const SCROLLABLE_PLACEHOLDER_ITEM_TEMPLATE_TOKEN = new InjectionToken('SCROLLABLE_PLACEHOLDER_ITEM_TEMPLATE_TOKEN');
+class ScrollablePlaceholderItemTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ScrollablePlaceholderItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ScrollablePlaceholderItemTemplateDirective, isStandalone: true, selector: "ng-template[etScrollablePlaceholderItemTemplate]", providers: [
+            {
+                provide: SCROLLABLE_PLACEHOLDER_ITEM_TEMPLATE_TOKEN,
+                useExisting: ScrollablePlaceholderItemTemplateDirective,
+            },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ScrollablePlaceholderItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[etScrollablePlaceholderItemTemplate]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: SCROLLABLE_PLACEHOLDER_ITEM_TEMPLATE_TOKEN,
+                            useExisting: ScrollablePlaceholderItemTemplateDirective,
+                        },
+                    ],
+                }]
+        }] });
+
+const SCROLLABLE_PLACEHOLDER_OVERLAY_TEMPLATE_TOKEN = new InjectionToken('SCROLLABLE_PLACEHOLDER_OVERLAY_TEMPLATE_TOKEN');
+class ScrollablePlaceholderOverlayTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ScrollablePlaceholderOverlayTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ScrollablePlaceholderOverlayTemplateDirective, isStandalone: true, selector: "ng-template[etScrollablePlaceholderOverlayTemplate]", providers: [
+            {
+                provide: SCROLLABLE_PLACEHOLDER_OVERLAY_TEMPLATE_TOKEN,
+                useExisting: ScrollablePlaceholderOverlayTemplateDirective,
+            },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ScrollablePlaceholderOverlayTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[etScrollablePlaceholderOverlayTemplate]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: SCROLLABLE_PLACEHOLDER_OVERLAY_TEMPLATE_TOKEN,
+                            useExisting: ScrollablePlaceholderOverlayTemplateDirective,
+                        },
+                    ],
+                }]
+        }] });
+
+class ScrollablePlaceholderComponent {
+    constructor() {
+        this.renderMasks = input(true, { transform: booleanAttribute });
+        this.renderStartMask = input(false, { transform: booleanAttribute });
+        this.renderEndMask = input(true, { transform: booleanAttribute });
+        this.repeatContentCount = input(1, { transform: numberAttribute });
+        this.scrollableClass = input();
+        this.repeat = computed(() => Array.from({ length: this.repeatContentCount() }));
+        this.contentTemplate = contentChild.required(SCROLLABLE_PLACEHOLDER_ITEM_TEMPLATE_TOKEN, { read: TemplateRef });
+        this.overlayTemplate = contentChild(SCROLLABLE_PLACEHOLDER_OVERLAY_TEMPLATE_TOKEN, { read: TemplateRef });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ScrollablePlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: ScrollablePlaceholderComponent, isStandalone: true, selector: "et-scrollable-placeholder", inputs: { renderMasks: { classPropertyName: "renderMasks", publicName: "renderMasks", isSignal: true, isRequired: false, transformFunction: null }, renderStartMask: { classPropertyName: "renderStartMask", publicName: "renderStartMask", isSignal: true, isRequired: false, transformFunction: null }, renderEndMask: { classPropertyName: "renderEndMask", publicName: "renderEndMask", isSignal: true, isRequired: false, transformFunction: null }, repeatContentCount: { classPropertyName: "repeatContentCount", publicName: "repeatContentCount", isSignal: true, isRequired: false, transformFunction: null }, scrollableClass: { classPropertyName: "scrollableClass", publicName: "scrollableClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-scrollable-placeholder" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: SCROLLABLE_PLACEHOLDER_ITEM_TEMPLATE_TOKEN, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "overlayTemplate", first: true, predicate: SCROLLABLE_PLACEHOLDER_OVERLAY_TEMPLATE_TOKEN, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-template>\n  <ng-content />\n</ng-template>\n\n<div class=\"et-scrollable-placeholder-wrapper\">\n  <div [ngClass]=\"scrollableClass()\" class=\"et-scrollable-placeholder-container\">\n    <div class=\"et-scroll-observer-first-element\"></div>\n    @for (\n      _ of 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=\"contentTemplate(); context: { index, even, odd, first, last }\" />\n    }\n    <div class=\"et-scroll-observer-last-element\"></div>\n  </div>\n\n  @if (renderMasks()) {\n    <div class=\"et-scrollable-masks\">\n      @if (renderStartMask()) {\n        <div class=\"et-scrollable-mask et-scrollable-mask--start\"></div>\n      }\n      @if (renderEndMask()) {\n        <div class=\"et-scrollable-mask et-scrollable-mask--end\"></div>\n      }\n    </div>\n  }\n\n  @if (overlayTemplate(); as overlayTemplate) {\n    <div class=\"et-scrollable-placeholder-overlay\">\n      <ng-container *ngTemplateOutlet=\"overlayTemplate\" />\n    </div>\n  }\n</div>\n", styles: [".et-scrollable-placeholder{--mask: #121212 0, transparent 100%;--mask-size: 25px;display:block;position:relative}.et-scrollable-placeholder .et-scroll-observer-first-element,.et-scrollable-placeholder .et-scroll-observer-last-element{position:absolute}.et-scrollable-placeholder .et-scrollable-mask{inline-size:var(--mask-size);block-size:100%;position:absolute}.et-scrollable-placeholder .et-scrollable-mask--start{background:linear-gradient(to right,var(--mask));inset-block-start:0;inset-inline:0 0}.et-scrollable-placeholder .et-scrollable-mask--end{background:linear-gradient(to left,var(--mask));inset-inline:calc(100% - var(--mask-size)) 100%;inset-block-start:0}.et-scrollable-placeholder .et-scrollable-masks{grid-row:1/1;grid-column:1/1;pointer-events:none}.et-scrollable-placeholder-overlay{grid-row:1/1;grid-column:1/1;display:grid}.et-scrollable-placeholder-wrapper{display:grid;block-size:100%;inline-size:100%}.et-scrollable-placeholder-container{position:relative;grid-row:1/1;grid-column:1/1;overflow:hidden;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ScrollablePlaceholderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-scrollable-placeholder', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, NgClass], host: {
+                        class: 'et-scrollable-placeholder',
+                    }, template: "<ng-template>\n  <ng-content />\n</ng-template>\n\n<div class=\"et-scrollable-placeholder-wrapper\">\n  <div [ngClass]=\"scrollableClass()\" class=\"et-scrollable-placeholder-container\">\n    <div class=\"et-scroll-observer-first-element\"></div>\n    @for (\n      _ of 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=\"contentTemplate(); context: { index, even, odd, first, last }\" />\n    }\n    <div class=\"et-scroll-observer-last-element\"></div>\n  </div>\n\n  @if (renderMasks()) {\n    <div class=\"et-scrollable-masks\">\n      @if (renderStartMask()) {\n        <div class=\"et-scrollable-mask et-scrollable-mask--start\"></div>\n      }\n      @if (renderEndMask()) {\n        <div class=\"et-scrollable-mask et-scrollable-mask--end\"></div>\n      }\n    </div>\n  }\n\n  @if (overlayTemplate(); as overlayTemplate) {\n    <div class=\"et-scrollable-placeholder-overlay\">\n      <ng-container *ngTemplateOutlet=\"overlayTemplate\" />\n    </div>\n  }\n</div>\n", styles: [".et-scrollable-placeholder{--mask: #121212 0, transparent 100%;--mask-size: 25px;display:block;position:relative}.et-scrollable-placeholder .et-scroll-observer-first-element,.et-scrollable-placeholder .et-scroll-observer-last-element{position:absolute}.et-scrollable-placeholder .et-scrollable-mask{inline-size:var(--mask-size);block-size:100%;position:absolute}.et-scrollable-placeholder .et-scrollable-mask--start{background:linear-gradient(to right,var(--mask));inset-block-start:0;inset-inline:0 0}.et-scrollable-placeholder .et-scrollable-mask--end{background:linear-gradient(to left,var(--mask));inset-inline:calc(100% - var(--mask-size)) 100%;inset-block-start:0}.et-scrollable-placeholder .et-scrollable-masks{grid-row:1/1;grid-column:1/1;pointer-events:none}.et-scrollable-placeholder-overlay{grid-row:1/1;grid-column:1/1;display:grid}.et-scrollable-placeholder-wrapper{display:grid;block-size:100%;inline-size:100%}.et-scrollable-placeholder-container{position:relative;grid-row:1/1;grid-column:1/1;overflow:hidden;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}\n"] }]
+        }] });
+
 const ScrollableImports = [
     ScrollableComponent,
     ScrollableIsActiveChildDirective,
     ScrollableIgnoreChildDirective,
+    ScrollableLoadingTemplateDirective,
+    ScrollablePlaceholderItemTemplateDirective,
+    ScrollablePlaceholderOverlayTemplateDirective,
+    ScrollablePlaceholderComponent,
 ];
 
 class SkeletonComponent {
@@ -16697,7 +16802,7 @@ class InlineTabHeaderComponent extends PaginatedTabHeaderDirective {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: InlineTabHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: InlineTabHeaderComponent, isStandalone: true, selector: "et-inline-tab-header", host: { classAttribute: "et-inline-tab-header" }, queries: [{ propertyName: "_items", predicate: InlineTabLabelWrapperDirective }, { propertyName: "_inkBars", predicate: i0.forwardRef(() => ActiveTabUnderlineDirective), descendants: true }], viewQueries: [{ propertyName: "_scrollable", first: true, predicate: ScrollableComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<et-scrollable\n  [itemSize]=\"itemSize\"\n  [renderButtons]=\"renderButtons\"\n  [scrollableClass]=\"scrollableClass\"\n  [renderMasks]=\"renderMasks\"\n  [renderScrollbars]=\"renderScrollbars\"\n  (keydown)=\"_handleKeydown($event)\"\n  (contentChanged)=\"_onContentChanges()\"\n>\n  <ng-content />\n</et-scrollable>\n", dependencies: [{ kind: "component", type: ScrollableComponent, selector: "et-scrollable", inputs: ["itemSize", "direction", "scrollableRole", "scrollableClass", "renderNavigation", "renderMasks", "renderButtons", "buttonPosition", "renderScrollbars", "stickyButtons", "cursorDragScroll", "disableActiveElementScrolling", "scrollMode", "snap", "scrollMargin", "scrollOrigin", "darkenNonIntersectingItems"], outputs: ["intersectionChange", "scrollStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: InlineTabHeaderComponent, isStandalone: true, selector: "et-inline-tab-header", host: { classAttribute: "et-inline-tab-header" }, queries: [{ propertyName: "_items", predicate: InlineTabLabelWrapperDirective }, { propertyName: "_inkBars", predicate: i0.forwardRef(() => ActiveTabUnderlineDirective), descendants: true }], viewQueries: [{ propertyName: "_scrollable", first: true, predicate: ScrollableComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<et-scrollable\n  [itemSize]=\"itemSize\"\n  [renderButtons]=\"renderButtons\"\n  [scrollableClass]=\"scrollableClass\"\n  [renderMasks]=\"renderMasks\"\n  [renderScrollbars]=\"renderScrollbars\"\n  (keydown)=\"_handleKeydown($event)\"\n  (contentChanged)=\"_onContentChanges()\"\n>\n  <ng-content />\n</et-scrollable>\n", dependencies: [{ kind: "component", type: ScrollableComponent, selector: "et-scrollable", inputs: ["itemSize", "direction", "scrollableRole", "scrollableClass", "renderNavigation", "renderMasks", "renderButtons", "buttonPosition", "renderScrollbars", "stickyButtons", "cursorDragScroll", "disableActiveElementScrolling", "scrollMode", "snap", "scrollMargin", "scrollOrigin", "darkenNonIntersectingItems", "showLoadingTemplate", "loadingTemplatePosition"], outputs: ["intersectionChange", "scrollStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: InlineTabHeaderComponent, decorators: [{
             type: Component,
@@ -17218,7 +17323,7 @@ class NavTabsComponent extends PaginatedTabHeaderDirective {
         return this.tabOutlet ? 'tablist' : this._elementRef.nativeElement.getAttribute('role');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NavTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: NavTabsComponent, isStandalone: true, selector: "[et-nav-tabs]", inputs: { tabOutlet: "tabOutlet" }, host: { properties: { "attr.role": "this._attrRole" }, classAttribute: "et-nav-tabs" }, queries: [{ propertyName: "_items", predicate: i0.forwardRef(() => NavTabLinkComponent), descendants: true }, { propertyName: "_inkBars", predicate: i0.forwardRef(() => ActiveTabUnderlineDirective), descendants: true }], viewQueries: [{ propertyName: "_scrollable", first: true, predicate: ScrollableComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<et-scrollable\n  [itemSize]=\"itemSize\"\n  [renderButtons]=\"renderButtons\"\n  [scrollableClass]=\"scrollableClass\"\n  [renderMasks]=\"renderMasks\"\n  [renderScrollbars]=\"renderScrollbars\"\n  (keydown)=\"_handleKeydown($event)\"\n  (contentChanged)=\"_onContentChanges()\"\n>\n  <ng-content />\n</et-scrollable>\n", dependencies: [{ kind: "component", type: ScrollableComponent, selector: "et-scrollable", inputs: ["itemSize", "direction", "scrollableRole", "scrollableClass", "renderNavigation", "renderMasks", "renderButtons", "buttonPosition", "renderScrollbars", "stickyButtons", "cursorDragScroll", "disableActiveElementScrolling", "scrollMode", "snap", "scrollMargin", "scrollOrigin", "darkenNonIntersectingItems"], outputs: ["intersectionChange", "scrollStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: NavTabsComponent, isStandalone: true, selector: "[et-nav-tabs]", inputs: { tabOutlet: "tabOutlet" }, host: { properties: { "attr.role": "this._attrRole" }, classAttribute: "et-nav-tabs" }, queries: [{ propertyName: "_items", predicate: i0.forwardRef(() => NavTabLinkComponent), descendants: true }, { propertyName: "_inkBars", predicate: i0.forwardRef(() => ActiveTabUnderlineDirective), descendants: true }], viewQueries: [{ propertyName: "_scrollable", first: true, predicate: ScrollableComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<et-scrollable\n  [itemSize]=\"itemSize\"\n  [renderButtons]=\"renderButtons\"\n  [scrollableClass]=\"scrollableClass\"\n  [renderMasks]=\"renderMasks\"\n  [renderScrollbars]=\"renderScrollbars\"\n  (keydown)=\"_handleKeydown($event)\"\n  (contentChanged)=\"_onContentChanges()\"\n>\n  <ng-content />\n</et-scrollable>\n", dependencies: [{ kind: "component", type: ScrollableComponent, selector: "et-scrollable", inputs: ["itemSize", "direction", "scrollableRole", "scrollableClass", "renderNavigation", "renderMasks", "renderButtons", "buttonPosition", "renderScrollbars", "stickyButtons", "cursorDragScroll", "disableActiveElementScrolling", "scrollMode", "snap", "scrollMargin", "scrollOrigin", "darkenNonIntersectingItems", "showLoadingTemplate", "loadingTemplatePosition"], outputs: ["intersectionChange", "scrollStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NavTabsComponent, decorators: [{
             type: Component,
@@ -17279,5 +17384,5 @@ const FLOATING_UI_PLACEMENTS = [
  * 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, BOTTOM_SHEET_CONFIG, BOTTOM_SHEET_DATA, BOTTOM_SHEET_DEFAULT_CONFIG, BOTTOM_SHEET_DEFAULT_OPTIONS, BOTTOM_SHEET_MIN_SWIPE_TO_CLOSE_LENGTH, BOTTOM_SHEET_MIN_VELOCITY_TO_CLOSE, BOTTOM_SHEET_SCROLL_STRATEGY, BOTTOM_SHEET_SCROLL_STRATEGY_PROVIDER, BOTTOM_SHEET_SCROLL_STRATEGY_PROVIDER_FACTORY, BRACKET_CONFIG_TOKEN, BRACKET_DEFAULT_CONFIG, BRACKET_MATCH_ID_TOKEN, BRACKET_ROUND_ID_TOKEN, BRACKET_TOKEN, BottomSheetContainerBaseComponent, BottomSheetContainerComponent, BottomSheetDragHandleComponent, BottomSheetImports, BottomSheetRef, BottomSheetService, BottomSheetServiceBase, BottomSheetSwipeHandlerService, BottomSheetTitleDirective, Bracket, BracketComponent, BracketImports, BracketMatchComponent, BracketMatchDirective, BracketRoundDirective, BracketRoundHeaderComponent, 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, CDK_MENU, CHECKBOX_FIELD_TOKEN, CHECKBOX_GROUP_CONTROL_TOKEN, CHECKBOX_GROUP_TOKEN, CHECKBOX_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, CdkContextMenuTrigger, CdkMenu, CdkMenuBar, CdkMenuBase, CdkMenuGroup, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuItemSelectable, CdkMenuModule, CdkMenuTrigger, CdkMenuTriggerBase, CdkTargetMenuAim, CellDefDirective, CellDirective, CheckboxComponent, CheckboxDirective, CheckboxFieldComponent, CheckboxFieldDirective, CheckboxGroupComponent, CheckboxGroupControlDirective, CheckboxGroupDirective, CheckboxImports, ChevronIconComponent, ColumnDefDirective, ComboboxBodyComponent, ComboboxBodyEmptyTemplateDirective, ComboboxBodyErrorTemplateDirective, ComboboxBodyLoadingTemplateDirective, ComboboxBodyMoreItemsHintTemplateDirective, ComboboxComponent, ComboboxDirective, ComboboxImports, ComboboxOptionComponent, ComboboxOptionTemplateDirective, ComboboxSelectedOptionTemplateDirective, ContextMenuTracker, 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, DIALOG_CONFIG, DIALOG_DATA, DIALOG_DEFAULT_CONFIG, DIALOG_DEFAULT_OPTIONS, DIALOG_SCROLL_STRATEGY, DIALOG_SCROLL_STRATEGY_PROVIDER, DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY, DYNAMIC_FORM_FIELD_TOKEN, DYNAMIC_FORM_GROUP_TOKEN, DateInputComponent, DateInputDirective, DateTimeInputComponent, DateTimeInputDirective, DecoratedFormFieldBase, DecoratedInputBase, DefaultValidatorErrorsService, DialogCloseDirective, DialogContainerBaseComponent, DialogContainerComponent, DialogImports, DialogRef, DialogService, DialogServiceBase, DialogTitleDirective, DynamicFormFieldDirective, DynamicFormGroupDirective, DynamicOverlayService, DynamicOverlayTitleDirective, EMAIL_INPUT_TOKEN, ET_OVERLAY_BOTTOM_SHEET_CLASS, ET_OVERLAY_DIALOG_CLASS, ET_OVERLAY_FULL_SCREEN_DIALOG_CLASS, ET_OVERLAY_LEFT_SHEET_CLASS, ET_OVERLAY_RIGHT_SHEET_CLASS, ET_OVERLAY_TOP_SHEET_CLASS, 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, IMAGE_CONFIG_TOKEN, INPUT_PREFIX_TOKEN, INPUT_SUFFIX_TOKEN, INPUT_TOKEN, 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_AIM, MENU_CHECKBOX_GROUP_TOKEN, MENU_CONTAINER, MENU_GROUP_TITLE_TOKEN, MENU_GROUP_TOKEN, MENU_ITEM_TOKEN, MENU_RADIO_GROUP_TOKEN, MENU_STACK, MENU_TEMPLATE, MENU_TRIGGER, MENU_TRIGGER_TOKEN, MasonryComponent, MasonryImports, MasonryItemComponent, MenuCheckboxGroupDirective, MenuCheckboxItemComponent, MenuComponent, MenuContainerComponent, MenuGroupDirective, MenuGroupTitleDirective, MenuImports, MenuItemDirective, MenuRadioGroupDirective, MenuRadioItemComponent, MenuStack, 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, NoDataRowDirective, NumberInputComponent, NumberInputDirective, OVERLAY_BACK_OR_CLOSE_TOKEN, OVERLAY_BODY_TOKEN, OVERLAY_CLOSE_BLOCKER_TOKEN, OVERLAY_CONFIG, OVERLAY_DATA, OVERLAY_DEFAULT_CONFIG, OVERLAY_DEFAULT_OPTIONS, OVERLAY_FOOTER_TOKEN, OVERLAY_HEADER_TEMPLATE_TOKEN, OVERLAY_HEADER_TOKEN, OVERLAY_MAIN_TOKEN, OVERLAY_ROUTER_CONFIG_TOKEN, OVERLAY_ROUTER_LINK_TOKEN, OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, OVERLAY_ROUTER_OUTLET_TOKEN, OVERLAY_SCROLL_STRATEGY, OVERLAY_SCROLL_STRATEGY_PROVIDER, OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY, OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, OVERLAY_STATE, OverlayBackOrCloseDirective, OverlayBodyComponent, OverlayCloseBlockerDirective, OverlayCloseDirective, OverlayContainerComponent, OverlayFooterDirective, OverlayHeaderDirective, OverlayHeaderTemplateDirective, OverlayImports, OverlayMainDirective, OverlayPositionBuilder, OverlayRef, OverlayRouteHeaderTemplateOutletComponent, OverlayRouterLinkDirective, OverlayRouterOutletComponent, OverlayRouterOutletDisabledTemplateDirective, OverlayRouterService, OverlayService, OverlaySharedRouteTemplateDirective, OverlaySharedRouteTemplateOutletComponent, OverlaySidebarComponent, OverlaySidebarPageComponent, OverlayTitleDirective, OverlayWithRoutingImports, OverlayWithSidebarImports, PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER, PARENT_OR_NEW_MENU_STACK_PROVIDER, PASSWORD_INPUT_TOKEN, PROGRESS_SPINNER_DEFAULT_OPTIONS, PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY, PaginatedTabHeaderDirective, PaginationComponent, PaginationHeadService, PaginationImports, PaginationLinkDirective, PasswordInputComponent, PasswordInputDirective, PasswordInputToggleComponent, PictureComponent, PointerFocusTracker, 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, RecycleRowsDirective, 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, 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, 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, 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, SortDirective, SortHeaderComponent, SortHeaderIntl, SortImports, StaticFormFieldDirective, StaticFormGroupDirective, SwipeHandlerService, TAB, TABS_CONFIG, TAB_CONTENT, TAB_GROUP, TAB_LABEL, TEXTAREA_INPUT_TOKEN, TEXT_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, TargetMenuAim, TextColumnComponent, TextInputComponent, TextInputDirective, TextareaInputComponent, TextareaInputDirective, 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, accordionAnimations, convertHttpStatusCodeToMessageDe, convertHttpStatusCodeToMessageEn, convertHttpStatusCodeToTitleDe, convertHttpStatusCodeToTitleEn, createBottomSheetConfig, createBracketConfig, createComboboxConfig, createDialogConfig, createOverlayConfig, createOverlayDismissChecker, createToggletipConfig, createTooltipConfig, defaultSubmitButtonConfigFn, getClosestBottomSheet, getClosestDialog, getClosestOverlay, isScrollableChildActive, isScrollableChildIgnored, isUpperBracketMatch, normalizePictureSizes, normalizePictureSource, normalizeRoundType, orderRounds, orderRoundsByRoundNumber, paginate, provideBottomSheet, provideBottomSheetDefaultConfig, provideBracketConfig, provideComboboxConfig, provideDateFormat, provideDateTimeFormat, provideDialog, provideDialogDefaultConfig, provideFilterOverlayConfig, provideImageConfig, provideOverlay, provideOverlayDefaultConfig, provideOverlayRouterConfig, provideSidebarOverlayConfig, provideSort, provideToggletipConfig, provideTooltipConfig, provideValidatorErrorsService, tabAnimations };
+export { ACCORDION_COMPONENT, ACCORDION_HINT_WRAPPER_DIRECTIVE, ACCORDION_LABEL_WRAPPER_DIRECTIVE, AccordionComponent, AccordionGroupComponent, AccordionHintDirective, AccordionHintWrapperDirective, AccordionImports, AccordionLabelDirective, AccordionLabelWrapperDirective, ActiveTabUnderlineBarManager, ActiveTabUnderlineDirective, AutosizeTextareaDirective, BOTTOM_SHEET_CONFIG, BOTTOM_SHEET_DATA, BOTTOM_SHEET_DEFAULT_CONFIG, BOTTOM_SHEET_DEFAULT_OPTIONS, BOTTOM_SHEET_MIN_SWIPE_TO_CLOSE_LENGTH, BOTTOM_SHEET_MIN_VELOCITY_TO_CLOSE, BOTTOM_SHEET_SCROLL_STRATEGY, BOTTOM_SHEET_SCROLL_STRATEGY_PROVIDER, BOTTOM_SHEET_SCROLL_STRATEGY_PROVIDER_FACTORY, BRACKET_CONFIG_TOKEN, BRACKET_DEFAULT_CONFIG, BRACKET_MATCH_ID_TOKEN, BRACKET_ROUND_ID_TOKEN, BRACKET_TOKEN, BottomSheetContainerBaseComponent, BottomSheetContainerComponent, BottomSheetDragHandleComponent, BottomSheetImports, BottomSheetRef, BottomSheetService, BottomSheetServiceBase, BottomSheetSwipeHandlerService, BottomSheetTitleDirective, Bracket, BracketComponent, BracketImports, BracketMatchComponent, BracketMatchDirective, BracketRoundDirective, BracketRoundHeaderComponent, 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, CDK_MENU, CHECKBOX_FIELD_TOKEN, CHECKBOX_GROUP_CONTROL_TOKEN, CHECKBOX_GROUP_TOKEN, CHECKBOX_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, CdkContextMenuTrigger, CdkMenu, CdkMenuBar, CdkMenuBase, CdkMenuGroup, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuItemSelectable, CdkMenuModule, CdkMenuTrigger, CdkMenuTriggerBase, CdkTargetMenuAim, CellDefDirective, CellDirective, CheckboxComponent, CheckboxDirective, CheckboxFieldComponent, CheckboxFieldDirective, CheckboxGroupComponent, CheckboxGroupControlDirective, CheckboxGroupDirective, CheckboxImports, ChevronIconComponent, ColumnDefDirective, ComboboxBodyComponent, ComboboxBodyEmptyTemplateDirective, ComboboxBodyErrorTemplateDirective, ComboboxBodyLoadingTemplateDirective, ComboboxBodyMoreItemsHintTemplateDirective, ComboboxComponent, ComboboxDirective, ComboboxImports, ComboboxOptionComponent, ComboboxOptionTemplateDirective, ComboboxSelectedOptionTemplateDirective, ContextMenuTracker, 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, DIALOG_CONFIG, DIALOG_DATA, DIALOG_DEFAULT_CONFIG, DIALOG_DEFAULT_OPTIONS, DIALOG_SCROLL_STRATEGY, DIALOG_SCROLL_STRATEGY_PROVIDER, DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY, DYNAMIC_FORM_FIELD_TOKEN, DYNAMIC_FORM_GROUP_TOKEN, DateInputComponent, DateInputDirective, DateTimeInputComponent, DateTimeInputDirective, DecoratedFormFieldBase, DecoratedInputBase, DefaultValidatorErrorsService, DialogCloseDirective, DialogContainerBaseComponent, DialogContainerComponent, DialogImports, DialogRef, DialogService, DialogServiceBase, DialogTitleDirective, DynamicFormFieldDirective, DynamicFormGroupDirective, DynamicOverlayService, DynamicOverlayTitleDirective, EMAIL_INPUT_TOKEN, ET_OVERLAY_BOTTOM_SHEET_CLASS, ET_OVERLAY_DIALOG_CLASS, ET_OVERLAY_FULL_SCREEN_DIALOG_CLASS, ET_OVERLAY_LEFT_SHEET_CLASS, ET_OVERLAY_RIGHT_SHEET_CLASS, ET_OVERLAY_TOP_SHEET_CLASS, 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, IMAGE_CONFIG_TOKEN, INPUT_PREFIX_TOKEN, INPUT_SUFFIX_TOKEN, INPUT_TOKEN, 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_AIM, MENU_CHECKBOX_GROUP_TOKEN, MENU_CONTAINER, MENU_GROUP_TITLE_TOKEN, MENU_GROUP_TOKEN, MENU_ITEM_TOKEN, MENU_RADIO_GROUP_TOKEN, MENU_STACK, MENU_TEMPLATE, MENU_TRIGGER, MENU_TRIGGER_TOKEN, MasonryComponent, MasonryImports, MasonryItemComponent, MenuCheckboxGroupDirective, MenuCheckboxItemComponent, MenuComponent, MenuContainerComponent, MenuGroupDirective, MenuGroupTitleDirective, MenuImports, MenuItemDirective, MenuRadioGroupDirective, MenuRadioItemComponent, MenuStack, 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, NoDataRowDirective, NumberInputComponent, NumberInputDirective, OVERLAY_BACK_OR_CLOSE_TOKEN, OVERLAY_BODY_TOKEN, OVERLAY_CLOSE_BLOCKER_TOKEN, OVERLAY_CONFIG, OVERLAY_DATA, OVERLAY_DEFAULT_CONFIG, OVERLAY_DEFAULT_OPTIONS, OVERLAY_FOOTER_TOKEN, OVERLAY_HEADER_TEMPLATE_TOKEN, OVERLAY_HEADER_TOKEN, OVERLAY_MAIN_TOKEN, OVERLAY_ROUTER_CONFIG_TOKEN, OVERLAY_ROUTER_LINK_TOKEN, OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, OVERLAY_ROUTER_OUTLET_TOKEN, OVERLAY_SCROLL_STRATEGY, OVERLAY_SCROLL_STRATEGY_PROVIDER, OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY, OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, OVERLAY_STATE, OverlayBackOrCloseDirective, OverlayBodyComponent, OverlayCloseBlockerDirective, OverlayCloseDirective, OverlayContainerComponent, OverlayFooterDirective, OverlayHeaderDirective, OverlayHeaderTemplateDirective, OverlayImports, OverlayMainDirective, OverlayPositionBuilder, OverlayRef, OverlayRouteHeaderTemplateOutletComponent, OverlayRouterLinkDirective, OverlayRouterOutletComponent, OverlayRouterOutletDisabledTemplateDirective, OverlayRouterService, OverlayService, OverlaySharedRouteTemplateDirective, OverlaySharedRouteTemplateOutletComponent, OverlaySidebarComponent, OverlaySidebarPageComponent, OverlayTitleDirective, OverlayWithRoutingImports, OverlayWithSidebarImports, PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER, PARENT_OR_NEW_MENU_STACK_PROVIDER, PASSWORD_INPUT_TOKEN, PROGRESS_SPINNER_DEFAULT_OPTIONS, PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY, PaginatedTabHeaderDirective, PaginationComponent, PaginationHeadService, PaginationImports, PaginationLinkDirective, PasswordInputComponent, PasswordInputDirective, PasswordInputToggleComponent, PictureComponent, PointerFocusTracker, 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, RecycleRowsDirective, 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, 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, SortDirective, SortHeaderComponent, SortHeaderIntl, SortImports, StaticFormFieldDirective, StaticFormGroupDirective, SwipeHandlerService, TAB, TABS_CONFIG, TAB_CONTENT, TAB_GROUP, TAB_LABEL, TEXTAREA_INPUT_TOKEN, TEXT_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, TargetMenuAim, TextColumnComponent, TextInputComponent, TextInputDirective, TextareaInputComponent, TextareaInputDirective, 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, accordionAnimations, convertHttpStatusCodeToMessageDe, convertHttpStatusCodeToMessageEn, convertHttpStatusCodeToTitleDe, convertHttpStatusCodeToTitleEn, createBottomSheetConfig, createBracketConfig, createComboboxConfig, createDialogConfig, createOverlayConfig, createOverlayDismissChecker, createToggletipConfig, createTooltipConfig, defaultSubmitButtonConfigFn, getClosestBottomSheet, getClosestDialog, getClosestOverlay, isScrollableChildActive, isScrollableChildIgnored, isUpperBracketMatch, normalizePictureSizes, normalizePictureSource, normalizeRoundType, orderRounds, orderRoundsByRoundNumber, paginate, provideBottomSheet, provideBottomSheetDefaultConfig, provideBracketConfig, provideComboboxConfig, provideDateFormat, provideDateTimeFormat, provideDialog, provideDialogDefaultConfig, provideFilterOverlayConfig, provideImageConfig, provideOverlay, provideOverlayDefaultConfig, provideOverlayRouterConfig, provideSidebarOverlayConfig, provideSort, provideToggletipConfig, provideTooltipConfig, provideValidatorErrorsService, tabAnimations };
 //# sourceMappingURL=ethlete-cdk.mjs.map