@ethlete/cdk 4.19.5 → 4.20.0

package/esm2022/lib/components/tabs/components/nav-tabs/nav-tabs.component.mjs

@@ -57,7 +57,7 @@ export 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.5", ngImport: i0, type: NavTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", 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", "renderScrollbars", "stickyButtons", "cursorDragScroll", "disableActiveElementScrolling", "scrollMode", "snap", "scrollMargin"], outputs: ["scrollStateChange", "intersectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", 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"], outputs: ["scrollStateChange", "intersectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NavTabsComponent, decorators: [{
             type: Component,

package/esm2022/lib/components/tabs/partials/inline-tabs/inline-tab-header/inline-tab-header.component.mjs

@@ -14,7 +14,7 @@ export class InlineTabHeaderComponent extends PaginatedTabHeaderDirective {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: InlineTabHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", 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", "renderScrollbars", "stickyButtons", "cursorDragScroll", "disableActiveElementScrolling", "scrollMode", "snap", "scrollMargin"], outputs: ["scrollStateChange", "intersectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", 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"], outputs: ["scrollStateChange", "intersectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: InlineTabHeaderComponent, decorators: [{
             type: Component,

package/fesm2022/ethlete-cdk.mjs

@@ -4,7 +4,7 @@ import { AsyncPipe, NgClass, NgTemplateOutlet, JsonPipe, NgComponentOutlet, DOCU
 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, isDevMode, Injectable, ChangeDetectorRef, TemplateRef, ViewContainerRef, ViewChild, forwardRef, EventEmitter, Output, ViewChildren, Optional, Inject, SkipSelf, HostListener, effect, NgZone, NgModule, isSignal, DestroyRef, contentChild, viewChildren, assertInInjectionContext, Attribute } from '@angular/core';
 import * as i1$1 from '@ethlete/core';
-import { LetDirective, createDestroy, Memo, signalHostAttributes, signalHostClasses, previousSignalValue, signalHostStyles, nextFrame, syncSignal, 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, signalElementScrollState, signalElementIntersection, signalElementChildren, signalHostElementDimensions, isElementVisible, getFirstAndLastPartialIntersection, CursorDragScrollDirective, ObserveScrollStateDirective, ClickObserverService, RootBoundaryDirective, elementCanScroll, cloneFormGroup, getFormGroupValue, fromNextFrame, ViewportService, ROOT_BOUNDARY_TOKEN, AnimatedIfDirective, FocusVisibleService, inferMimeType, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
+import { LetDirective, createDestroy, Memo, signalHostAttributes, signalHostClasses, previousSignalValue, signalHostStyles, nextFrame, syncSignal, 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, signalElementIntersection, signalElementChildren, signalHostElementDimensions, isElementVisible, getIntersectionInfo, CursorDragScrollDirective, ObserveScrollStateDirective, ClickObserverService, RootBoundaryDirective, elementCanScroll, cloneFormGroup, getFormGroupValue, fromNextFrame, ViewportService, ROOT_BOUNDARY_TOKEN, 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';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { __decorate, __metadata } from 'tslib';
@@ -8743,6 +8743,9 @@ class ScrollableComponent {
     set _renderButtons(v) {
         this.renderButtons.set(v);
     }
+    set _buttonPosition(v) {
+        this.buttonPosition.set(v);
+    }
     set _renderScrollbars(v) {
         this.renderScrollbars.set(v);
     }
@@ -8764,6 +8767,9 @@ class ScrollableComponent {
     set _scrollMargin(v) {
         this.scrollMargin.set(v);
     }
+    set _scrollOrigin(v) {
+        this.scrollOrigin.set(v);
+    }
     set _scrollable(e) {
         this.scrollable.set(e);
     }
@@ -8789,6 +8795,9 @@ class ScrollableComponent {
         this.renderNavigation = signal(false);
         this.renderMasks = signal(true);
         this.renderButtons = signal(true);
+        this.renderButtonsInside = computed(() => this.buttonPosition() === 'inside' && this.renderButtons());
+        this.renderButtonsInFooter = computed(() => this.buttonPosition() === 'footer' && this.renderButtons());
+        this.buttonPosition = signal('inside');
         this.renderScrollbars = signal(false);
         this.stickyButtons = signal(false);
         this.cursorDragScroll = signal(true);
@@ -8796,6 +8805,7 @@ class ScrollableComponent {
         this.scrollMode = signal('container');
         this.snap = signal(false);
         this.scrollMargin = signal(0);
+        this.scrollOrigin = signal('auto');
         this.scrollStateChange = new EventEmitter();
         this.intersectionChange = new EventEmitter();
         this.scrollable = signal(null);
@@ -8803,6 +8813,9 @@ class ScrollableComponent {
         this.firstElement = signal(null);
         this.lastElement = signal(null);
         this.activeElementList = signal(null);
+        this.navigationDotsContainer = viewChild('navigationDotsContainer');
+        this.firstNavigationDot = viewChild('navigationDot');
+        this.navigationDotDimensions = signalElementDimensions(this.firstNavigationDot);
         this.containerScrollState = signalElementScrollState(this.scrollable);
         this.firstElementIntersection = signalElementIntersection(this.firstElement, { root: this.scrollable });
         this.firstElementVisibility = signal(null);
@@ -8874,19 +8887,28 @@ class ScrollableComponent {
             if (!highestIntersection) {
                 return [];
             }
+            const activeIndex = manualActiveNavigationIndex !== null
+                ? manualActiveNavigationIndex
+                : allIntersections.findIndex((i) => i === highestIntersection);
             return allIntersections.map((i, index) => ({
                 isActive: manualActiveNavigationIndex !== null
                     ? manualActiveNavigationIndex === index
                     : i === highestIntersection && highestIntersection.intersectionRatio > 0,
+                activeOffset: index === activeIndex ? 0 : Math.abs(index - activeIndex),
                 element: i.target,
             }));
         });
+        this.activeIndex = computed(() => {
+            const scrollableNavigation = this.scrollableNavigation();
+            const activeIndex = scrollableNavigation.findIndex((element) => element.isActive);
+            return activeIndex;
+        });
         this.hostAttributeBindings = signalHostAttributes({
             'item-size': this.itemSize,
             'actual-item-size': this._actualItemSize,
             direction: this.direction,
             'render-scrollbars': this.renderScrollbars,
-            'sticky-buttons': this.stickyButtons,
+            'sticky-buttons': computed(() => this.stickyButtons() && this.renderButtonsInside()),
         });
         this.hostClassBindings = signalHostClasses({
             'et-scrollable--can-scroll': computed(() => this.canScroll() && !this.isAtStart() && !this.isAtEnd()),
@@ -8897,6 +8919,16 @@ class ScrollableComponent {
         this.hostStyleBindings = signalHostStyles({
             '--actual-item-size': computed(() => (this._actualItemSize() !== null ? `${this._actualItemSize()}px` : undefined)),
         });
+        effect(() => {
+            // Responsible for centering the active dot in navigation bar by using 'translate'
+            const scrollableDotsContainer = this.navigationDotsContainer();
+            const activeIndex = this.activeIndex();
+            const childCount = this.scrollableContentIntersections().length;
+            const offset = this.getNavigationDotsContainerTranslate(childCount, activeIndex);
+            if (!scrollableDotsContainer)
+                return;
+            scrollableDotsContainer.nativeElement.style.transform = `translateX(${offset})`;
+        });
         effect(() => {
             const scrollable = this.scrollable()?.nativeElement;
             const firstElement = this.firstElement()?.nativeElement;
@@ -8927,18 +8959,21 @@ class ScrollableComponent {
             const elementList = this.scrollableChildren();
             const scrollable = this.scrollable()?.nativeElement;
             const renderNavigation = this.renderNavigation();
-            if (!elementList || !scrollable || !renderNavigation) {
+            const renderButtonsInFooter = this.renderButtonsInFooter();
+            if (!elementList || !scrollable || (!renderNavigation && !renderButtonsInFooter)) {
                 return;
             }
             const firstVisibleElement = elementList.find((e) => isElementVisible({ container: scrollable, element: e }));
             if (!firstVisibleElement) {
                 return;
             }
-            const initialNavigationItems = elementList.map((e) => ({
+            const firstVisibleElementIndex = elementList.indexOf(firstVisibleElement);
+            const initialNavigationItems = elementList.map((e, i) => ({
                 isActive: e === firstVisibleElement,
                 element: e,
+                activeOffset: Math.abs(i - firstVisibleElementIndex),
             }));
-            this._initialScrollableNavigation.set(initialNavigationItems);
+            this._initialScrollableNavigation.set(initialNavigationItems ?? []);
         }, { allowSignalWrites: true });
         effect(() => {
             const isAtStart = this.isAtStart();
@@ -8969,6 +9004,31 @@ class ScrollableComponent {
             })));
         }))
             .subscribe();
+        toObservable(this.manualActiveNavigationIndex)
+            .pipe(filter((i) => i !== null), takeUntilDestroyed(), switchMap(() => {
+            const scrollable = this.scrollable()?.nativeElement;
+            if (!scrollable) {
+                return of(null);
+            }
+            return fromEvent(scrollable, 'scroll');
+        }), debounceTime(50), tap(() => this.manualActiveNavigationIndex.set(null)))
+            .subscribe();
+    }
+    getNavigationDotsContainerTranslate(navigationDotCount, activeIndex) {
+        if (navigationDotCount <= 5) {
+            return '0px';
+        }
+        else {
+            const dotContainerWidth = this.navigationDotDimensions().rect?.width ?? 20;
+            let offset = -(activeIndex - 2);
+            if (activeIndex < 3) {
+                offset = 0;
+            }
+            else if (activeIndex >= navigationDotCount - 3) {
+                offset = 5 - navigationDotCount;
+            }
+            return `${offset * dotContainerWidth}px`;
+        }
     }
     scrollOneContainerSize(direction) {
         const scrollElement = this.scrollable()?.nativeElement;
@@ -8980,8 +9040,8 @@ class ScrollableComponent {
         if (isSnappingEnabled) {
             // If snapping is enabled we want to scroll to a position where no further snapping will happen after the scroll.
             const allIntersections = this.scrollableContentIntersections();
-            const intersections = getFirstAndLastPartialIntersection(allIntersections);
-            const relevantIntersection = direction === 'start' ? intersections?.first : intersections?.last;
+            const intersections = getIntersectionInfo(allIntersections);
+            const relevantIntersection = direction === 'start' ? intersections?.partial.first : intersections?.partial.last;
             if (!relevantIntersection)
                 return;
             const nextIndex = relevantIntersection.intersection.intersectionRatio !== 1
@@ -9015,16 +9075,16 @@ class ScrollableComponent {
             }
             return;
         }
-        const intersections = getFirstAndLastPartialIntersection(allIntersections);
+        const intersections = getIntersectionInfo(allIntersections);
         if (!intersections || !scrollElement)
             return;
         // Means the current element is bigger than the scrollable container.
         // In this case we should scroll to the start of the current element. If we are already there we should scroll to the end of the previous element.
         // This applies to the other direction as well.
-        const isFirstAndLastIntersectionEqual = intersections.first.intersection === intersections.last.intersection;
+        const isFirstAndLastIntersectionEqual = intersections.partial.first.intersection === intersections.partial.last.intersection;
         const scrollableRect = scrollElement.getBoundingClientRect();
         if (isFirstAndLastIntersectionEqual) {
-            const intersection = intersections.first.intersection.target.getBoundingClientRect();
+            const intersection = intersections.partial.first.intersection.target.getBoundingClientRect();
             const isStartOfElementVisible = this.direction() === 'horizontal'
                 ? Math.round(intersection.left) >= Math.round(scrollableRect.left)
                 : Math.round(intersection.top) >= Math.round(scrollableRect.top);
@@ -9035,7 +9095,7 @@ class ScrollableComponent {
                 if (direction === 'start') {
                     if (isStartOfElementVisible) {
                         // to the end of the previous element
-                        const previousIndex = intersections.first.index - 1;
+                        const previousIndex = intersections.partial.first.index - 1;
                         const elementToScrollTo = allIntersections[previousIndex]?.target;
                         if (!elementToScrollTo)
                             return;
@@ -9043,19 +9103,21 @@ class ScrollableComponent {
                             element: elementToScrollTo,
                             origin: 'end',
                         });
+                        this.manualActiveNavigationIndex.set(previousIndex);
                     }
                     else {
                         // to the start of the current element
                         this.scrollToElement({
-                            element: intersections.first.intersection.target,
+                            element: intersections.partial.first.intersection.target,
                             origin: 'start',
                         });
+                        this.manualActiveNavigationIndex.set(intersections.partial.first.index);
                     }
                 }
                 else {
                     if (isEndOfElementVisible) {
                         // to the start of the next element
-                        const nextIndex = intersections.last.index + 1;
+                        const nextIndex = intersections.partial.last.index + 1;
                         const elementToScrollTo = allIntersections[nextIndex]?.target;
                         if (!elementToScrollTo)
                             return;
@@ -9063,20 +9125,34 @@ class ScrollableComponent {
                             element: elementToScrollTo,
                             origin: 'start',
                         });
+                        this.manualActiveNavigationIndex.set(nextIndex);
                     }
                     else {
                         // to the end of the current element
                         this.scrollToElement({
-                            element: intersections.last.intersection.target,
+                            element: intersections.partial.last.intersection.target,
                             origin: 'end',
                         });
+                        this.manualActiveNavigationIndex.set(intersections.partial.last.index);
                     }
                 }
                 return;
             }
         }
-        const data = direction === 'start' ? intersections.first : intersections.last;
+        else if (this.scrollOrigin() === 'center') {
+            // If the scroll origin is forced to be center we should always snap to the center of the next partial intersection in the scroll direction.
+            const nextPartialIntersection = direction === 'start' ? intersections.partial.first : intersections.partial.last;
+            const nextIndex = nextPartialIntersection.index;
+            this.scrollToElement({
+                element: nextPartialIntersection.intersection.target,
+                origin: 'center',
+            });
+            this.manualActiveNavigationIndex.set(nextIndex);
+            return;
+        }
+        const data = direction === 'start' ? intersections.partial.first : intersections.partial.last;
         let elementToScrollTo = data.intersection.target;
+        let nextIndex = data.index;
         if (Math.round(data.intersection.intersectionRatio) === 1) {
             if (direction === 'start' && data.index === 0) {
                 return;
@@ -9084,18 +9160,21 @@ class ScrollableComponent {
             if (direction === 'end' && data.index === allIntersections.length - 1) {
                 return;
             }
-            const nextIndex = direction === 'start' ? data.index - 1 : data.index + 1;
+            nextIndex = direction === 'start' ? data.index - 1 : data.index + 1;
             elementToScrollTo = allIntersections[nextIndex]?.target;
+            if (!elementToScrollTo)
+                return;
         }
-        if (!elementToScrollTo)
-            return;
         this.scrollToElement({
             element: elementToScrollTo,
             origin: direction,
         });
+        this.manualActiveNavigationIndex.set(nextIndex);
     }
     scrollToElement(options) {
         const scrollElement = this.scrollable()?.nativeElement;
+        const { origin } = options;
+        const forcedOrigin = this.scrollOrigin();
         scrollToElement({
             container: scrollElement,
             direction: this.direction() === 'horizontal' ? 'inline' : 'block',
@@ -9103,13 +9182,16 @@ class ScrollableComponent {
                 ? { scrollInlineMargin: this.scrollMargin() }
                 : { scrollBlockMargin: this.scrollMargin() }),
             ...options,
+            ...(forcedOrigin === 'auto' || options.ignoreForcedOrigin ? { origin } : { origin: forcedOrigin }),
         });
     }
     scrollToElementByIndex(options) {
         const elements = this.scrollableChildren();
+        const { origin } = options;
+        const forcedOrigin = this.scrollOrigin();
         if (!elements.length) {
             if (isDevMode()) {
-                console.warn('No elements found to scroll to. Make sure to apply the isElement directive to the elements you want to scroll to.');
+                console.warn('No elements found to scroll to.');
             }
             return;
         }
@@ -9122,19 +9204,15 @@ class ScrollableComponent {
                 ? { scrollInlineMargin: this.scrollMargin() }
                 : { scrollBlockMargin: this.scrollMargin() }),
             ...options,
+            ...(forcedOrigin === 'auto' || options.ignoreForcedOrigin ? { origin } : { origin: forcedOrigin }),
         });
     }
-    scrollToElementViaNavigation(elementIndex, element) {
+    scrollToElementViaNavigation(elementIndex) {
+        const element = this.scrollableChildren()[elementIndex];
         this.manualActiveNavigationIndex.set(elementIndex);
         this.scrollToElement({
             element,
         });
-        const scrollElement = this.scrollable()?.nativeElement;
-        if (!scrollElement)
-            return;
-        fromEvent(scrollElement, 'scroll')
-            .pipe(debounceTime(50), take(1), tap(() => this.manualActiveNavigationIndex.set(null)))
-            .subscribe();
     }
     setIsCursorDragging(isDragging) {
         this._isCursorDragging$.next(isDragging);
@@ -9161,13 +9239,25 @@ class ScrollableComponent {
             const scrollElement = this.scrollable()?.nativeElement;
             if (!scrollElement)
                 return;
-            const intersections = getFirstAndLastPartialIntersection(allIntersections);
+            const intersections = getIntersectionInfo(allIntersections);
             if (!intersections)
                 return;
-            const isFirstAndLastIntersectionEqual = intersections.first.intersection === intersections.last.intersection;
+            const isFirstAndLastIntersectionEqual = intersections.partial.first.intersection === intersections.partial.last.intersection;
             const scrollableRect = scrollElement.getBoundingClientRect();
-            if (isFirstAndLastIntersectionEqual) {
-                const intersection = intersections.first.intersection.target.getBoundingClientRect();
+            if (this.scrollOrigin() === 'center' && intersections.full.hasMultiple) {
+                // If there is more than one fully visible element we should not snap at all.
+                return;
+            }
+            else if (this.scrollOrigin() === 'center' && intersections.full.first.intersection) {
+                // If there is already a fully visible element we should snap it to the center.
+                this.scrollToElement({
+                    element: intersections.full.first.intersection.target,
+                    origin: 'center',
+                });
+                return;
+            }
+            else if (isFirstAndLastIntersectionEqual) {
+                const intersection = intersections.partial.first.intersection.target.getBoundingClientRect();
                 const isStartOfElementVisible = this.direction() === 'horizontal'
                     ? intersection.left >= scrollableRect.left
                     : intersection.top >= scrollableRect.top;
@@ -9181,7 +9271,7 @@ class ScrollableComponent {
                 // If the start of the element is visible we should snap to the start.
                 if (isStartOfElementVisible) {
                     this.scrollToElement({
-                        element: intersections.first.intersection.target,
+                        element: intersections.partial.first.intersection.target,
                         origin: 'start',
                     });
                     return;
@@ -9189,28 +9279,29 @@ class ScrollableComponent {
                 // If the end of the element is visible we should snap to the end.
                 if (isEndOfElementVisible) {
                     this.scrollToElement({
-                        element: intersections.last.intersection.target,
+                        element: intersections.partial.last.intersection.target,
                         origin: 'end',
                     });
                     return;
                 }
             }
             else if ((this.direction() === 'horizontal' &&
-                intersections.biggest.intersection.boundingClientRect.width > scrollableRect.width) ||
+                intersections.partial.biggest.intersection.boundingClientRect.width > scrollableRect.width) ||
                 (this.direction() === 'vertical' &&
-                    intersections.biggest.intersection.boundingClientRect.height > scrollableRect.height)) {
+                    intersections.partial.biggest.intersection.boundingClientRect.height > scrollableRect.height)) {
                 // If the current element is bigger than the scrollable container we should snap to the start of the current element if the scroll direction is forward
                 // and to the end of the current element if the scroll direction is backwards.
-                const origin = intersections.biggest.index === intersections.first.index ? 'end' : 'start';
+                const origin = intersections.partial.biggest.index === intersections.partial.first.index ? 'end' : 'start';
                 this.scrollToElement({
-                    element: intersections.biggest.intersection.target,
+                    element: intersections.partial.biggest.intersection.target,
                     origin,
+                    ignoreForcedOrigin: true,
                 });
             }
             else {
                 // No special case. Just snap to the biggest intersection.
                 this.scrollToElement({
-                    element: intersections.biggest.intersection.target,
+                    element: intersections.partial.biggest.intersection.target,
                 });
             }
         }), takeUntil(this._disableSnapping$))
@@ -9220,7 +9311,7 @@ class ScrollableComponent {
         this._disableSnapping$.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ScrollableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: ScrollableComponent, isStandalone: true, selector: "et-scrollable", inputs: { _itemSize: ["itemSize", "_itemSize"], _direction: ["direction", "_direction"], _scrollableRole: ["scrollableRole", "_scrollableRole"], _scrollableClass: ["scrollableClass", "_scrollableClass"], _renderNavigation: ["renderNavigation", "_renderNavigation", booleanAttribute], _renderMasks: ["renderMasks", "_renderMasks", booleanAttribute], _renderButtons: ["renderButtons", "_renderButtons", booleanAttribute], _renderScrollbars: ["renderScrollbars", "_renderScrollbars", booleanAttribute], _stickyButtons: ["stickyButtons", "_stickyButtons", booleanAttribute], _cursorDragScroll: ["cursorDragScroll", "_cursorDragScroll", booleanAttribute], _disableActiveElementScrolling: ["disableActiveElementScrolling", "_disableActiveElementScrolling", booleanAttribute], _scrollMode: ["scrollMode", "_scrollMode"], _snap: ["snap", "_snap", booleanAttribute], _scrollMargin: ["scrollMargin", "_scrollMargin", numberAttribute] }, outputs: { scrollStateChange: "scrollStateChange", intersectionChange: "intersectionChange" }, host: { classAttribute: "et-scrollable" }, queries: [{ propertyName: "_activeElementList", predicate: SCROLLABLE_IS_ACTIVE_CHILD_TOKEN, descendants: true }], viewQueries: [{ propertyName: "_scrollable", first: true, predicate: ["scrollable"], descendants: true, static: true }, { propertyName: "_scrollableContainer", first: true, predicate: ["scrollableContainer"], descendants: true, static: true }, { propertyName: "_firstElement", first: true, predicate: ["firstElement"], descendants: true, static: true }, { propertyName: "_lastElement", first: true, predicate: ["lastElement"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"et-scrollable-wrapper\">\n  <div\n    #scrollable\n    [attr.role]=\"scrollableRole() ?? undefined\"\n    [etCursorDragScroll]=\"cursorDragScroll() && (!isAtStart() || !isAtEnd())\"\n    [allowedDirection]=\"direction()\"\n    (cursorDragStart)=\"setIsCursorDragging(true)\"\n    (cursorDragEnd)=\"setIsCursorDragging(false)\"\n    class=\"et-scrollable-container-outer\"\n  >\n    <div #scrollableContainer [ngClass]=\"scrollableClass()\" class=\"et-scrollable-container\">\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  </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 (renderButtons()) {\n    <div class=\"et-scrollable-buttons\">\n      <button\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      <button\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    </div>\n  }\n</div>\n\n@if (renderNavigation() && scrollableNavigation().length > 1) {\n  <div class=\"et-scrollable-navigation\" aria-hidden=\"true\">\n    @for (item of scrollableNavigation(); track i; let i = $index) {\n      <button\n        [class.et-scrollable-navigation-item--active]=\"item.isActive\"\n        (click)=\"scrollToElementViaNavigation(i, item.element)\"\n        class=\"et-scrollable-navigation-item\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n      ></button>\n    }\n  </div>\n}\n", styles: [".et-scrollable{--mask: #121212 0, transparent 100%;--mask-size: 25px;--_auto-size: min-content;--_flow: column;display:block}.et-scrollable .et-scrollable-wrapper{display:grid;position:relative}.et-scrollable[item-size=same]{--_auto-size: 1fr}.et-scrollable[item-size=full]{--_auto-size: var(--actual-item-size)}.et-scrollable[render-scrollbars=false] .et-scrollable-container-outer{scrollbar-width:none}.et-scrollable[render-scrollbars=false] .et-scrollable-container-outer::-webkit-scrollbar{display:none}.et-scrollable[direction=horizontal] .et-scrollable-container-outer{overflow-x:auto;overflow-y:hidden}.et-scrollable[direction=horizontal] .et-scrollable-container{grid-auto-columns:var(--_auto-size)}.et-scrollable[direction=horizontal] .et-scrollable-mask,.et-scrollable[direction=horizontal] .et-scrollable-button{inline-size:var(--mask-size);block-size:100%}.et-scrollable[direction=horizontal] .et-scrollable-mask--start,.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:0;inset-inline:0 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--end,.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:0;inset-inline:calc(100% - 40px) 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--start{background:linear-gradient(to right,var(--mask))}.et-scrollable[direction=horizontal] .et-scrollable-mask--end{background:linear-gradient(to left,var(--mask));inset-inline:calc(100% - var(--mask-size)) 100%}.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:calc(50% - 20px);transform:rotate(-90deg)}.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:calc(50% - 20px);transform:rotate(90deg)}.et-scrollable[direction=horizontal] .et-scroll-observer-first-element,.et-scrollable[direction=horizontal] .et-scroll-observer-last-element{block-size:100%;inline-size:1px}.et-scrollable[direction=horizontal] .et-scroll-observer-first-element{inset-inline-start:1px}.et-scrollable[direction=horizontal] .et-scroll-observer-last-element{inset-inline-end:1px}.et-scrollable[direction=vertical]{--_flow: row}.et-scrollable[direction=vertical] .et-scrollable-container-outer{overflow-x:hidden;overflow-y:auto}.et-scrollable[direction=vertical] .et-scrollable-container{grid-auto-rows:var(--_auto-size)}.et-scrollable[direction=vertical] .et-scrollable-mask,.et-scrollable[direction=vertical] .et-scrollable-button{block-size:var(--mask-size);inline-size:100%}.et-scrollable[direction=vertical] .et-scrollable-mask--start,.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-block-start:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--end,.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-block-end:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--start{background:linear-gradient(to bottom,var(--mask))}.et-scrollable[direction=vertical] .et-scrollable-mask--end{background:linear-gradient(to top,var(--mask))}.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-inline-start:calc(50% - 20px);transform:rotate(0)}.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-inline-start:calc(50% - 20px);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{inset-block-start:1px}.et-scrollable[direction=vertical] .et-scroll-observer-last-element{inset-block-end:1px}.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}.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}.et-scrollable:not(.et-scrollable--is-at-end) .et-scrollable-buttons .et-scrollable-button--end{pointer-events:all}.et-scrollable .et-scrollable-container-outer{overflow:auto;display:grid;position:relative;grid-row:1/1;grid-column:1/1}.et-scrollable .et-scroll-observer-first-element,.et-scrollable .et-scroll-observer-last-element{position:absolute;pointer-events:none}.et-scrollable .et-scrollable-container{display:grid;grid-auto-flow:var(--_flow);position:relative}.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-scroll.et-scrollable--enable-overlay-animations .et-scrollable-mask,.et-scrollable.et-scrollable--can-scroll.et-scrollable--enable-overlay-animations .et-scrollable-button{transition:opacity .3s var(--ease-5)}.et-scrollable .et-scrollable-buttons .et-scrollable-button{background:transparent;border:none;padding:12px;inline-size:40px;block-size:40px;border-radius:4px;cursor:pointer}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-chevron-icon{pointer-events:none}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--start{inset-inline:0 0}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--end{inset-inline:calc(100% - 40px) 0}.et-scrollable[sticky-buttons=true]{--_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-navigation{display:flex;justify-content:center;gap:10px;margin-block-start:10px}.et-scrollable .et-scrollable-navigation .et-scrollable-navigation-item{all:unset;inline-size:10px;block-size:10px;display:block;background-color:#4b4b4b;border-radius:50%;cursor:pointer}.et-scrollable .et-scrollable-navigation .et-scrollable-navigation-item.et-scrollable-navigation-item--active{background-color:#c6c6c6}\n"], dependencies: [{ kind: "directive", type: CursorDragScrollDirective, selector: "[etCursorDragScroll]", inputs: ["etCursorDragScroll", "allowedDirection"], outputs: ["cursorDragStart", "cursorDragMove", "cursorDragEnd"], exportAs: ["etCursorDragScroll"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: ScrollableComponent, isStandalone: true, selector: "et-scrollable", inputs: { _itemSize: ["itemSize", "_itemSize"], _direction: ["direction", "_direction"], _scrollableRole: ["scrollableRole", "_scrollableRole"], _scrollableClass: ["scrollableClass", "_scrollableClass"], _renderNavigation: ["renderNavigation", "_renderNavigation", booleanAttribute], _renderMasks: ["renderMasks", "_renderMasks", booleanAttribute], _renderButtons: ["renderButtons", "_renderButtons", booleanAttribute], _buttonPosition: ["buttonPosition", "_buttonPosition"], _renderScrollbars: ["renderScrollbars", "_renderScrollbars", booleanAttribute], _stickyButtons: ["stickyButtons", "_stickyButtons", booleanAttribute], _cursorDragScroll: ["cursorDragScroll", "_cursorDragScroll", booleanAttribute], _disableActiveElementScrolling: ["disableActiveElementScrolling", "_disableActiveElementScrolling", booleanAttribute], _scrollMode: ["scrollMode", "_scrollMode"], _snap: ["snap", "_snap", booleanAttribute], _scrollMargin: ["scrollMargin", "_scrollMargin", numberAttribute], _scrollOrigin: ["scrollOrigin", "_scrollOrigin"] }, outputs: { scrollStateChange: "scrollStateChange", intersectionChange: "intersectionChange" }, host: { classAttribute: "et-scrollable" }, queries: [{ propertyName: "_activeElementList", predicate: SCROLLABLE_IS_ACTIVE_CHILD_TOKEN, descendants: true }], viewQueries: [{ propertyName: "navigationDotsContainer", first: true, predicate: ["navigationDotsContainer"], descendants: true, isSignal: true }, { propertyName: "firstNavigationDot", first: true, predicate: ["navigationDot"], descendants: true, isSignal: true }, { propertyName: "_scrollable", first: true, predicate: ["scrollable"], descendants: true, static: true }, { propertyName: "_scrollableContainer", first: true, predicate: ["scrollableContainer"], descendants: true, static: true }, { propertyName: "_firstElement", first: true, predicate: ["firstElement"], descendants: true, static: true }, { propertyName: "_lastElement", first: true, predicate: ["lastElement"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"et-scrollable-wrapper\">\n  <div\n    #scrollable\n    [attr.role]=\"scrollableRole() ?? undefined\"\n    [etCursorDragScroll]=\"cursorDragScroll() && (!isAtStart() || !isAtEnd())\"\n    [allowedDirection]=\"direction()\"\n    (cursorDragStart)=\"setIsCursorDragging(true)\"\n    (cursorDragEnd)=\"setIsCursorDragging(false)\"\n    class=\"et-scrollable-container-outer\"\n  >\n    <div #scrollableContainer [ngClass]=\"scrollableClass()\" class=\"et-scrollable-container\">\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  </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)) {\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;--_auto-size: min-content;--_flow: column;display:block}.et-scrollable .et-scrollable-wrapper{display:grid;position:relative}.et-scrollable[item-size=same]{--_auto-size: 1fr}.et-scrollable[item-size=full]{--_auto-size: var(--actual-item-size)}.et-scrollable[render-scrollbars=false] .et-scrollable-container-outer{scrollbar-width:none}.et-scrollable[render-scrollbars=false] .et-scrollable-container-outer::-webkit-scrollbar{display:none}.et-scrollable[direction=horizontal] .et-scrollable-container-outer{overflow-x:auto;overflow-y:hidden}.et-scrollable[direction=horizontal] .et-scrollable-container{grid-auto-columns:var(--_auto-size)}.et-scrollable[direction=horizontal] .et-scrollable-mask,.et-scrollable[direction=horizontal] .et-scrollable-button{inline-size:var(--mask-size);block-size:100%}.et-scrollable[direction=horizontal] .et-scrollable-mask--start,.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:0;inset-inline:0 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--end,.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:0;inset-inline:calc(100% - 40px) 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--start{background:linear-gradient(to right,var(--mask))}.et-scrollable[direction=horizontal] .et-scrollable-mask--end{background:linear-gradient(to left,var(--mask));inset-inline:calc(100% - var(--mask-size)) 100%}.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:calc(50% - 20px);transform:rotate(-90deg)}.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:calc(50% - 20px);transform:rotate(90deg)}.et-scrollable[direction=horizontal] .et-scroll-observer-first-element,.et-scrollable[direction=horizontal] .et-scroll-observer-last-element{block-size:100%;inline-size:1px}.et-scrollable[direction=horizontal] .et-scroll-observer-first-element{inset-inline-start:1px}.et-scrollable[direction=horizontal] .et-scroll-observer-last-element{inset-inline-end:1px}.et-scrollable[direction=vertical]{--_flow: row}.et-scrollable[direction=vertical] .et-scrollable-container-outer{overflow-x:hidden;overflow-y:auto}.et-scrollable[direction=vertical] .et-scrollable-container{grid-auto-rows:var(--_auto-size)}.et-scrollable[direction=vertical] .et-scrollable-mask,.et-scrollable[direction=vertical] .et-scrollable-button{block-size:var(--mask-size);inline-size:100%}.et-scrollable[direction=vertical] .et-scrollable-mask--start,.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-block-start:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--end,.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-block-end:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--start{background:linear-gradient(to bottom,var(--mask))}.et-scrollable[direction=vertical] .et-scrollable-mask--end{background:linear-gradient(to top,var(--mask))}.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-inline-start:calc(50% - 20px);transform:rotate(0)}.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-inline-start:calc(50% - 20px);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{inset-block-start:1px}.et-scrollable[direction=vertical] .et-scroll-observer-last-element{inset-block-end:1px}.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}.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}.et-scrollable:not(.et-scrollable--is-at-end) .et-scrollable-buttons .et-scrollable-button--end{pointer-events:all}.et-scrollable .et-scrollable-container-outer{overflow:auto;display:grid;position:relative;grid-row:1/1;grid-column:1/1}.et-scrollable .et-scroll-observer-first-element,.et-scrollable .et-scroll-observer-last-element{position:absolute;pointer-events:none}.et-scrollable .et-scrollable-container{display:grid;grid-auto-flow:var(--_flow);position:relative}.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-scroll.et-scrollable--enable-overlay-animations .et-scrollable-mask,.et-scrollable.et-scrollable--can-scroll.et-scrollable--enable-overlay-animations .et-scrollable-button{transition:opacity .3s var(--ease-5)}.et-scrollable .et-scrollable-buttons .et-scrollable-button{background:transparent;border:none;padding:12px;inline-size:40px;block-size:40px;border-radius:4px;cursor:pointer}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-chevron-icon{pointer-events:none}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--start{inset-inline:0 0}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--end{inset-inline:calc(100% - 40px) 0}.et-scrollable[sticky-buttons=true]{--_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;gap:10px;margin-block-start:10px}.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);transition:background-color .2s linear,transform .2s linear}.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;transition:transform .3s var(--ease-5)}\n"], dependencies: [{ kind: "directive", type: CursorDragScrollDirective, selector: "[etCursorDragScroll]", inputs: ["etCursorDragScroll", "allowedDirection"], outputs: ["cursorDragStart", "cursorDragMove", "cursorDragEnd"], exportAs: ["etCursorDragScroll"] }, { 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.5", ngImport: i0, type: ScrollableComponent, decorators: [{
             type: Component,
@@ -9232,9 +9323,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                         ChevronIconComponent,
                         ScrollableIsActiveChildDirective,
                         ScrollableIgnoreChildDirective,
+                        NgTemplateOutlet,
                     ], host: {
                         class: 'et-scrollable',
-                    }, template: "<div class=\"et-scrollable-wrapper\">\n  <div\n    #scrollable\n    [attr.role]=\"scrollableRole() ?? undefined\"\n    [etCursorDragScroll]=\"cursorDragScroll() && (!isAtStart() || !isAtEnd())\"\n    [allowedDirection]=\"direction()\"\n    (cursorDragStart)=\"setIsCursorDragging(true)\"\n    (cursorDragEnd)=\"setIsCursorDragging(false)\"\n    class=\"et-scrollable-container-outer\"\n  >\n    <div #scrollableContainer [ngClass]=\"scrollableClass()\" class=\"et-scrollable-container\">\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  </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 (renderButtons()) {\n    <div class=\"et-scrollable-buttons\">\n      <button\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      <button\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    </div>\n  }\n</div>\n\n@if (renderNavigation() && scrollableNavigation().length > 1) {\n  <div class=\"et-scrollable-navigation\" aria-hidden=\"true\">\n    @for (item of scrollableNavigation(); track i; let i = $index) {\n      <button\n        [class.et-scrollable-navigation-item--active]=\"item.isActive\"\n        (click)=\"scrollToElementViaNavigation(i, item.element)\"\n        class=\"et-scrollable-navigation-item\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n      ></button>\n    }\n  </div>\n}\n", styles: [".et-scrollable{--mask: #121212 0, transparent 100%;--mask-size: 25px;--_auto-size: min-content;--_flow: column;display:block}.et-scrollable .et-scrollable-wrapper{display:grid;position:relative}.et-scrollable[item-size=same]{--_auto-size: 1fr}.et-scrollable[item-size=full]{--_auto-size: var(--actual-item-size)}.et-scrollable[render-scrollbars=false] .et-scrollable-container-outer{scrollbar-width:none}.et-scrollable[render-scrollbars=false] .et-scrollable-container-outer::-webkit-scrollbar{display:none}.et-scrollable[direction=horizontal] .et-scrollable-container-outer{overflow-x:auto;overflow-y:hidden}.et-scrollable[direction=horizontal] .et-scrollable-container{grid-auto-columns:var(--_auto-size)}.et-scrollable[direction=horizontal] .et-scrollable-mask,.et-scrollable[direction=horizontal] .et-scrollable-button{inline-size:var(--mask-size);block-size:100%}.et-scrollable[direction=horizontal] .et-scrollable-mask--start,.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:0;inset-inline:0 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--end,.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:0;inset-inline:calc(100% - 40px) 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--start{background:linear-gradient(to right,var(--mask))}.et-scrollable[direction=horizontal] .et-scrollable-mask--end{background:linear-gradient(to left,var(--mask));inset-inline:calc(100% - var(--mask-size)) 100%}.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:calc(50% - 20px);transform:rotate(-90deg)}.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:calc(50% - 20px);transform:rotate(90deg)}.et-scrollable[direction=horizontal] .et-scroll-observer-first-element,.et-scrollable[direction=horizontal] .et-scroll-observer-last-element{block-size:100%;inline-size:1px}.et-scrollable[direction=horizontal] .et-scroll-observer-first-element{inset-inline-start:1px}.et-scrollable[direction=horizontal] .et-scroll-observer-last-element{inset-inline-end:1px}.et-scrollable[direction=vertical]{--_flow: row}.et-scrollable[direction=vertical] .et-scrollable-container-outer{overflow-x:hidden;overflow-y:auto}.et-scrollable[direction=vertical] .et-scrollable-container{grid-auto-rows:var(--_auto-size)}.et-scrollable[direction=vertical] .et-scrollable-mask,.et-scrollable[direction=vertical] .et-scrollable-button{block-size:var(--mask-size);inline-size:100%}.et-scrollable[direction=vertical] .et-scrollable-mask--start,.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-block-start:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--end,.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-block-end:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--start{background:linear-gradient(to bottom,var(--mask))}.et-scrollable[direction=vertical] .et-scrollable-mask--end{background:linear-gradient(to top,var(--mask))}.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-inline-start:calc(50% - 20px);transform:rotate(0)}.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-inline-start:calc(50% - 20px);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{inset-block-start:1px}.et-scrollable[direction=vertical] .et-scroll-observer-last-element{inset-block-end:1px}.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}.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}.et-scrollable:not(.et-scrollable--is-at-end) .et-scrollable-buttons .et-scrollable-button--end{pointer-events:all}.et-scrollable .et-scrollable-container-outer{overflow:auto;display:grid;position:relative;grid-row:1/1;grid-column:1/1}.et-scrollable .et-scroll-observer-first-element,.et-scrollable .et-scroll-observer-last-element{position:absolute;pointer-events:none}.et-scrollable .et-scrollable-container{display:grid;grid-auto-flow:var(--_flow);position:relative}.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-scroll.et-scrollable--enable-overlay-animations .et-scrollable-mask,.et-scrollable.et-scrollable--can-scroll.et-scrollable--enable-overlay-animations .et-scrollable-button{transition:opacity .3s var(--ease-5)}.et-scrollable .et-scrollable-buttons .et-scrollable-button{background:transparent;border:none;padding:12px;inline-size:40px;block-size:40px;border-radius:4px;cursor:pointer}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-chevron-icon{pointer-events:none}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--start{inset-inline:0 0}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--end{inset-inline:calc(100% - 40px) 0}.et-scrollable[sticky-buttons=true]{--_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-navigation{display:flex;justify-content:center;gap:10px;margin-block-start:10px}.et-scrollable .et-scrollable-navigation .et-scrollable-navigation-item{all:unset;inline-size:10px;block-size:10px;display:block;background-color:#4b4b4b;border-radius:50%;cursor:pointer}.et-scrollable .et-scrollable-navigation .et-scrollable-navigation-item.et-scrollable-navigation-item--active{background-color:#c6c6c6}\n"] }]
+                    }, template: "<div class=\"et-scrollable-wrapper\">\n  <div\n    #scrollable\n    [attr.role]=\"scrollableRole() ?? undefined\"\n    [etCursorDragScroll]=\"cursorDragScroll() && (!isAtStart() || !isAtEnd())\"\n    [allowedDirection]=\"direction()\"\n    (cursorDragStart)=\"setIsCursorDragging(true)\"\n    (cursorDragEnd)=\"setIsCursorDragging(false)\"\n    class=\"et-scrollable-container-outer\"\n  >\n    <div #scrollableContainer [ngClass]=\"scrollableClass()\" class=\"et-scrollable-container\">\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  </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)) {\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;--_auto-size: min-content;--_flow: column;display:block}.et-scrollable .et-scrollable-wrapper{display:grid;position:relative}.et-scrollable[item-size=same]{--_auto-size: 1fr}.et-scrollable[item-size=full]{--_auto-size: var(--actual-item-size)}.et-scrollable[render-scrollbars=false] .et-scrollable-container-outer{scrollbar-width:none}.et-scrollable[render-scrollbars=false] .et-scrollable-container-outer::-webkit-scrollbar{display:none}.et-scrollable[direction=horizontal] .et-scrollable-container-outer{overflow-x:auto;overflow-y:hidden}.et-scrollable[direction=horizontal] .et-scrollable-container{grid-auto-columns:var(--_auto-size)}.et-scrollable[direction=horizontal] .et-scrollable-mask,.et-scrollable[direction=horizontal] .et-scrollable-button{inline-size:var(--mask-size);block-size:100%}.et-scrollable[direction=horizontal] .et-scrollable-mask--start,.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:0;inset-inline:0 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--end,.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:0;inset-inline:calc(100% - 40px) 0}.et-scrollable[direction=horizontal] .et-scrollable-mask--start{background:linear-gradient(to right,var(--mask))}.et-scrollable[direction=horizontal] .et-scrollable-mask--end{background:linear-gradient(to left,var(--mask));inset-inline:calc(100% - var(--mask-size)) 100%}.et-scrollable[direction=horizontal] .et-scrollable-button--start{inset-block-start:calc(50% - 20px);transform:rotate(-90deg)}.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:calc(50% - 20px);transform:rotate(90deg)}.et-scrollable[direction=horizontal] .et-scroll-observer-first-element,.et-scrollable[direction=horizontal] .et-scroll-observer-last-element{block-size:100%;inline-size:1px}.et-scrollable[direction=horizontal] .et-scroll-observer-first-element{inset-inline-start:1px}.et-scrollable[direction=horizontal] .et-scroll-observer-last-element{inset-inline-end:1px}.et-scrollable[direction=vertical]{--_flow: row}.et-scrollable[direction=vertical] .et-scrollable-container-outer{overflow-x:hidden;overflow-y:auto}.et-scrollable[direction=vertical] .et-scrollable-container{grid-auto-rows:var(--_auto-size)}.et-scrollable[direction=vertical] .et-scrollable-mask,.et-scrollable[direction=vertical] .et-scrollable-button{block-size:var(--mask-size);inline-size:100%}.et-scrollable[direction=vertical] .et-scrollable-mask--start,.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-block-start:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--end,.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-block-end:0;inset-inline-start:0}.et-scrollable[direction=vertical] .et-scrollable-mask--start{background:linear-gradient(to bottom,var(--mask))}.et-scrollable[direction=vertical] .et-scrollable-mask--end{background:linear-gradient(to top,var(--mask))}.et-scrollable[direction=vertical] .et-scrollable-button--start{inset-inline-start:calc(50% - 20px);transform:rotate(0)}.et-scrollable[direction=vertical] .et-scrollable-button--end{inset-inline-start:calc(50% - 20px);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{inset-block-start:1px}.et-scrollable[direction=vertical] .et-scroll-observer-last-element{inset-block-end:1px}.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}.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}.et-scrollable:not(.et-scrollable--is-at-end) .et-scrollable-buttons .et-scrollable-button--end{pointer-events:all}.et-scrollable .et-scrollable-container-outer{overflow:auto;display:grid;position:relative;grid-row:1/1;grid-column:1/1}.et-scrollable .et-scroll-observer-first-element,.et-scrollable .et-scroll-observer-last-element{position:absolute;pointer-events:none}.et-scrollable .et-scrollable-container{display:grid;grid-auto-flow:var(--_flow);position:relative}.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-scroll.et-scrollable--enable-overlay-animations .et-scrollable-mask,.et-scrollable.et-scrollable--can-scroll.et-scrollable--enable-overlay-animations .et-scrollable-button{transition:opacity .3s var(--ease-5)}.et-scrollable .et-scrollable-buttons .et-scrollable-button{background:transparent;border:none;padding:12px;inline-size:40px;block-size:40px;border-radius:4px;cursor:pointer}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-chevron-icon{pointer-events:none}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--start{inset-inline:0 0}.et-scrollable .et-scrollable-buttons .et-scrollable-button .et-scrollable-button--end{inset-inline:calc(100% - 40px) 0}.et-scrollable[sticky-buttons=true]{--_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;gap:10px;margin-block-start:10px}.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);transition:background-color .2s linear,transform .2s linear}.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;transition:transform .3s var(--ease-5)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _itemSize: [{
                 type: Input,
                 args: [{ alias: 'itemSize' }]
@@ -9256,6 +9348,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
             }], _renderButtons: [{
                 type: Input,
                 args: [{ transform: booleanAttribute, alias: 'renderButtons' }]
+            }], _buttonPosition: [{
+                type: Input,
+                args: [{ alias: 'buttonPosition' }]
             }], _renderScrollbars: [{
                 type: Input,
                 args: [{ transform: booleanAttribute, alias: 'renderScrollbars' }]
@@ -9277,6 +9372,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
             }], _scrollMargin: [{
                 type: Input,
                 args: [{ transform: numberAttribute, alias: 'scrollMargin' }]
+            }], _scrollOrigin: [{
+                type: Input,
+                args: [{ alias: 'scrollOrigin' }]
             }], scrollStateChange: [{
                 type: Output
             }], intersectionChange: [{
@@ -9702,7 +9800,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-outer{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", "renderScrollbars", "stickyButtons", "cursorDragScroll", "disableActiveElementScrolling", "scrollMode", "snap", "scrollMargin"], outputs: ["scrollStateChange", "intersectionChange"] }], 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-outer{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"], outputs: ["scrollStateChange", "intersectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
@@ -16793,7 +16891,7 @@ class InlineTabHeaderComponent extends PaginatedTabHeaderDirective {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: InlineTabHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", 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", "renderScrollbars", "stickyButtons", "cursorDragScroll", "disableActiveElementScrolling", "scrollMode", "snap", "scrollMargin"], outputs: ["scrollStateChange", "intersectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", 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"], outputs: ["scrollStateChange", "intersectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: InlineTabHeaderComponent, decorators: [{
             type: Component,
@@ -17314,7 +17412,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.5", ngImport: i0, type: NavTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", 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", "renderScrollbars", "stickyButtons", "cursorDragScroll", "disableActiveElementScrolling", "scrollMode", "snap", "scrollMargin"], outputs: ["scrollStateChange", "intersectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", 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"], outputs: ["scrollStateChange", "intersectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NavTabsComponent, decorators: [{
             type: Component,