@ethlete/cdk 4.22.0 → 4.22.2

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.6", ngImport: i0, type: NavTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", 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: ["scrollStateChange", "intersectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", 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.6", ngImport: i0, type: InlineTabHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", 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: ["scrollStateChange", "intersectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: InlineTabHeaderComponent, decorators: [{
             type: Component,

package/fesm2022/ethlete-cdk.mjs

@@ -2,13 +2,13 @@ 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, isDevMode, Injectable, ChangeDetectorRef, TemplateRef, ViewContainerRef, ViewChild, forwardRef, EventEmitter, Output, ViewChildren, Optional, Inject, SkipSelf, HostListener, output, effect, NgZone, NgModule, isSignal, DestroyRef, contentChild, viewChildren, 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, 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, signalElementDimensions, createIsRenderedSignal, createCanAnimateSignal, signalElementScrollState, signalElementIntersection, signalElementChildren, getIntersectionInfo, CursorDragScrollDirective, ObserveScrollStateDirective, ClickObserverService, RootBoundaryDirective, elementCanScroll, cloneFormGroup, getFormGroupValue, fromNextFrame, ViewportService, ROOT_BOUNDARY_TOKEN, isElementVisible, 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, createIsRenderedSignal, createCanAnimateSignal, signalElementScrollState, signalElementIntersection, signalElementChildren, signalStyles, getIntersectionInfo, getElementScrollCoordinates, CursorDragScrollDirective, 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';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { __decorate, __metadata } from 'tslib';
-import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { toSignal, toObservable, takeUntilDestroyed, outputFromObservable } from '@angular/core/rxjs-interop';
 import { extractQuery, isQueryStateSuccess, isQueryStateFailure, isQueryStateLoading, QueryDirective, switchQueryState, shouldRetryRequest, isClassValidatorError, isSymfonyFormViolationListError, isSymfonyListError } from '@ethlete/query';
 import * as i1$2 from '@angular/cdk/a11y';
 import { FocusMonitor, FocusKeyManager, InputModalityDetector, FocusTrapFactory, InteractivityChecker, AriaDescriber, A11yModule } from '@angular/cdk/a11y';
@@ -8744,8 +8744,6 @@ class ScrollableComponent {
         this.scrollMargin = input(0, { transform: numberAttribute });
         this.scrollOrigin = input('auto');
         this.darkenNonIntersectingItems = input(false, { transform: booleanAttribute });
-        this.scrollStateChange = output();
-        this.intersectionChange = output();
         this.scrollable = viewChild('scrollable');
         this.firstElement = viewChild('firstElement');
         this.lastElement = viewChild('lastElement');
@@ -8765,12 +8763,7 @@ class ScrollableComponent {
                     return null;
                 const firstActive = activeElementList.find((a) => a.isActiveChildEnabled());
                 if (firstActive && !this.disableActiveElementScrolling()) {
-                    const offsetTop = firstActive.elementRef.nativeElement.offsetTop - scrollable.offsetTop;
-                    const offsetLeft = firstActive.elementRef.nativeElement.offsetLeft - scrollable.offsetLeft;
-                    return {
-                        x: offsetLeft - this.scrollMargin(),
-                        y: offsetTop - this.scrollMargin(),
-                    };
+                    return this.getElementScrollCoordinates({ element: firstActive.elementRef.nativeElement });
                 }
                 return null;
             }),
@@ -8851,6 +8844,22 @@ class ScrollableComponent {
             const activeIndex = scrollableNavigation.findIndex((element) => element.isActive);
             return activeIndex;
         });
+        this.intersectionChange = outputFromObservable(this.scrollableContentIntersections$.pipe(takeUntilDestroyed(), debounceTime(50), map((entries) => entries.map((i, index) => ({
+            index,
+            element: i.target,
+            intersectionRatio: i.intersectionRatio,
+            isIntersecting: i.isIntersecting,
+        })))));
+        this.scrollStateChange = outputFromObservable(toObservable(computed(() => {
+            const isAtStart = this.isAtStart();
+            const isAtEnd = this.isAtEnd();
+            const canScroll = this.canScroll();
+            return {
+                canScroll,
+                isAtEnd: !!isAtEnd,
+                isAtStart: !!isAtStart,
+            };
+        })));
         this.allChildElementClassBindings = signalClasses(this.allScrollableElements, {
             'et-scrollable-item': signal(true),
         });
@@ -8873,26 +8882,15 @@ class ScrollableComponent {
         this.hostStyleBindings = signalHostStyles({
             '--item-count': computed(() => this.scrollableChildren().length),
         });
-        effect(() => {
+        this.scrollableDotsContainerStyleBindings = signalStyles(this.navigationDotsContainer, {
             // 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;
-            const dir = this.direction() === 'horizontal' ? 'X' : 'Y';
-            scrollableDotsContainer.nativeElement.style.transform = `translate${dir}(${offset})`;
-        });
-        effect(() => {
-            const isAtStart = this.isAtStart();
-            const isAtEnd = this.isAtEnd();
-            const canScroll = this.canScroll();
-            this.scrollStateChange.emit({
-                canScroll,
-                isAtEnd: !!isAtEnd,
-                isAtStart: !!isAtStart,
-            });
+            transform: computed(() => {
+                const activeIndex = this.activeIndex();
+                const childCount = this.scrollableContentIntersections().length;
+                const offset = this.getNavigationDotsContainerTranslate(childCount, activeIndex);
+                const dir = this.direction() === 'horizontal' ? 'X' : 'Y';
+                return `translate${dir}(${offset})`;
+            }),
         });
         effect(() => {
             const enableSnapping = this.snap();
@@ -8903,16 +8901,6 @@ class ScrollableComponent {
                 this._disableSnapping();
             }
         });
-        this.scrollableContentIntersections$
-            .pipe(takeUntilDestroyed(), debounceTime(10), tap((entries) => {
-            this.intersectionChange.emit(entries.map((i, index) => ({
-                index,
-                element: i.target,
-                intersectionRatio: i.intersectionRatio,
-                isIntersecting: i.isIntersecting,
-            })));
-        }))
-            .subscribe();
         toObservable(this._manualActiveNavigationIndex)
             .pipe(filter((i) => i !== null), takeUntilDestroyed(), switchMap(() => {
             const scrollable = this.scrollable()?.nativeElement;
@@ -9081,11 +9069,11 @@ class ScrollableComponent {
         });
         this._manualActiveNavigationIndex.set(nextIndex);
     }
-    scrollToElement(options) {
+    getElementScrollCoordinates(options) {
         const scrollElement = this.scrollable()?.nativeElement;
         const { origin } = options;
         const forcedOrigin = this.scrollOrigin();
-        scrollToElement({
+        return getElementScrollCoordinates({
             container: scrollElement,
             direction: this.direction() === 'horizontal' ? 'inline' : 'block',
             ...(this.direction() === 'horizontal'
@@ -9095,26 +9083,17 @@ class ScrollableComponent {
             ...(forcedOrigin === 'auto' || options.ignoreForcedOrigin ? { origin } : { origin: forcedOrigin }),
         });
     }
+    scrollToElement(options) {
+        this.scrollable()?.nativeElement.scroll(this.getElementScrollCoordinates(options));
+    }
     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.');
-            }
-            return;
-        }
-        const scrollElement = this.scrollable()?.nativeElement;
         const element = elements[options.index];
-        scrollToElement({
-            container: scrollElement,
+        if (!element)
+            return;
+        this.scrollToElement({
             element,
-            ...(this.direction() === 'horizontal'
-                ? { scrollInlineMargin: this.scrollMargin() }
-                : { scrollBlockMargin: this.scrollMargin() }),
             ...options,
-            ...(forcedOrigin === 'auto' || options.ignoreForcedOrigin ? { origin } : { origin: forcedOrigin }),
         });
     }
     scrollToElementViaNavigation(elementIndex) {
@@ -9221,7 +9200,7 @@ class ScrollableComponent {
         this._disableSnapping$.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ScrollableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.6", 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: { scrollStateChange: "scrollStateChange", intersectionChange: "intersectionChange" }, 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    [etCursorDragScroll]=\"cursorDragScroll() && (!isAtStart() || !isAtEnd())\"\n    [allowedDirection]=\"direction()\"\n    [ngClass]=\"scrollableClass()\"\n    (cursorDragStart)=\"setIsCursorDragging(true)\"\n    (cursorDragEnd)=\"setIsCursorDragging(false)\"\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)) {\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{scrollbar-width:none}.et-scrollable[render-scrollbars=false] .et-scrollable-container::-webkit-scrollbar{display:none}.et-scrollable .et-scrollable-button .et-chevron-icon{display:block}.et-scrollable[direction=horizontal] .et-scrollable-container{grid-template-columns:repeat(var(--item-count),var(--_auto-size));overflow-x:auto;overflow-y:hidden}.et-scrollable[direction=horizontal] .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){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{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:translate(-10px)}.et-scrollable[direction=horizontal] .et-scrollable-button--start .et-chevron-icon{transform:rotate(-90deg)}.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:calc(50% - 20px);transform:translate(10px)}.et-scrollable[direction=horizontal] .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{block-size:100%;inline-size:1px}.et-scrollable[direction=horizontal] .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{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-template-rows:repeat(var(--item-count),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:filter .3s var(--ease-5)}.et-scrollable.et-scrollable--darken-non-intersecting-items .et-scrollable-item--not-intersecting{filter:brightness(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: 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.6", 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    [etCursorDragScroll]=\"cursorDragScroll() && (!isAtStart() || !isAtEnd())\"\n    [allowedDirection]=\"direction()\"\n    [ngClass]=\"scrollableClass()\"\n    (cursorDragStart)=\"setIsCursorDragging(true)\"\n    (cursorDragEnd)=\"setIsCursorDragging(false)\"\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)) {\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{scrollbar-width:none}.et-scrollable[render-scrollbars=false] .et-scrollable-container::-webkit-scrollbar{display:none}.et-scrollable .et-scrollable-button .et-chevron-icon{display:block}.et-scrollable[direction=horizontal] .et-scrollable-container{grid-template-columns:repeat(var(--item-count),var(--_auto-size));overflow-x:auto;overflow-y:hidden}.et-scrollable[direction=horizontal] .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){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{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:translate(-10px)}.et-scrollable[direction=horizontal] .et-scrollable-button--start .et-chevron-icon{transform:rotate(-90deg)}.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:calc(50% - 20px);transform:translate(10px)}.et-scrollable[direction=horizontal] .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{block-size:100%;inline-size:1px}.et-scrollable[direction=horizontal] .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{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-template-rows:repeat(var(--item-count),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: 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.6", ngImport: i0, type: ScrollableComponent, decorators: [{
             type: Component,
@@ -9236,7 +9215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
                         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    [ngClass]=\"scrollableClass()\"\n    (cursorDragStart)=\"setIsCursorDragging(true)\"\n    (cursorDragEnd)=\"setIsCursorDragging(false)\"\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)) {\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{scrollbar-width:none}.et-scrollable[render-scrollbars=false] .et-scrollable-container::-webkit-scrollbar{display:none}.et-scrollable .et-scrollable-button .et-chevron-icon{display:block}.et-scrollable[direction=horizontal] .et-scrollable-container{grid-template-columns:repeat(var(--item-count),var(--_auto-size));overflow-x:auto;overflow-y:hidden}.et-scrollable[direction=horizontal] .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){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{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:translate(-10px)}.et-scrollable[direction=horizontal] .et-scrollable-button--start .et-chevron-icon{transform:rotate(-90deg)}.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:calc(50% - 20px);transform:translate(10px)}.et-scrollable[direction=horizontal] .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{block-size:100%;inline-size:1px}.et-scrollable[direction=horizontal] .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{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-template-rows:repeat(var(--item-count),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:filter .3s var(--ease-5)}.et-scrollable.et-scrollable--darken-non-intersecting-items .et-scrollable-item--not-intersecting{filter:brightness(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    [etCursorDragScroll]=\"cursorDragScroll() && (!isAtStart() || !isAtEnd())\"\n    [allowedDirection]=\"direction()\"\n    [ngClass]=\"scrollableClass()\"\n    (cursorDragStart)=\"setIsCursorDragging(true)\"\n    (cursorDragEnd)=\"setIsCursorDragging(false)\"\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)) {\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{scrollbar-width:none}.et-scrollable[render-scrollbars=false] .et-scrollable-container::-webkit-scrollbar{display:none}.et-scrollable .et-scrollable-button .et-chevron-icon{display:block}.et-scrollable[direction=horizontal] .et-scrollable-container{grid-template-columns:repeat(var(--item-count),var(--_auto-size));overflow-x:auto;overflow-y:hidden}.et-scrollable[direction=horizontal] .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){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{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:translate(-10px)}.et-scrollable[direction=horizontal] .et-scrollable-button--start .et-chevron-icon{transform:rotate(-90deg)}.et-scrollable[direction=horizontal] .et-scrollable-button--end{inset-block-start:calc(50% - 20px);transform:translate(10px)}.et-scrollable[direction=horizontal] .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{block-size:100%;inline-size:1px}.et-scrollable[direction=horizontal] .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{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-template-rows:repeat(var(--item-count),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');
@@ -9643,7 +9622,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", "buttonPosition", "renderScrollbars", "stickyButtons", "cursorDragScroll", "disableActiveElementScrolling", "scrollMode", "snap", "scrollMargin", "scrollOrigin", "darkenNonIntersectingItems"], 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", "darkenNonIntersectingItems"], outputs: ["intersectionChange", "scrollStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
@@ -16734,7 +16713,7 @@ class InlineTabHeaderComponent extends PaginatedTabHeaderDirective {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: InlineTabHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", 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: ["scrollStateChange", "intersectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: InlineTabHeaderComponent, decorators: [{
             type: Component,
@@ -17255,7 +17234,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.6", ngImport: i0, type: NavTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", 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: ["scrollStateChange", "intersectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: NavTabsComponent, decorators: [{
             type: Component,