@ethlete/cdk 4.3.1 → 4.3.3

package/fesm2022/ethlete-cdk.mjs

@@ -1,6 +1,6 @@
 import * as i1 from '@angular/cdk/portal';
 import { CdkPortal, PortalModule, ComponentPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
-import { AsyncPipe, NgClass, NgTemplateOutlet, NgComponentOutlet, DOCUMENT, JsonPipe, formatDate } from '@angular/common';
+import { AsyncPipe, NgClass, NgTemplateOutlet, NgComponentOutlet, DOCUMENT, JsonPipe, formatDate, NgIf } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Component, ViewEncapsulation, ChangeDetectionStrategy, Directive, InjectionToken, booleanAttribute, Input, ContentChild, ContentChildren, inject, ElementRef, Injector, HostBinding, computed, signal, Optional, Inject, Injectable, SkipSelf, HostListener, ViewContainerRef, EventEmitter, NgZone, isDevMode, Output, NgModule, ChangeDetectorRef, ViewChild, assertInInjectionContext, runInInjectionContext, TemplateRef, forwardRef, LOCALE_ID, numberAttribute, ViewChildren, Pipe, effect, Attribute } from '@angular/core';
 import * as i1$2 from '@ethlete/core';
@@ -4431,7 +4431,7 @@ class OverlayPositionBuilder {
                 minHeight: undefined,
                 minWidth: undefined,
                 containerClass: ET_OVERLAY_DIALOG_CLASS,
-                positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
+                positionStrategy: () => this._overlay.position().global().centerHorizontally().centerVertically(),
             },
             fullScreenDialog: {
                 width: '100%',
@@ -4441,7 +4441,7 @@ class OverlayPositionBuilder {
                 minHeight: undefined,
                 minWidth: undefined,
                 containerClass: ET_OVERLAY_FULL_SCREEN_DIALOG_CLASS,
-                positionStrategy: this._overlay.position().global().left('0').top('0').bottom('0').right('0'),
+                positionStrategy: () => this._overlay.position().global().left('0').top('0').bottom('0').right('0'),
                 documentClass: 'et-overlay--full-screen-dialog-document',
                 applyTransformOrigin: true,
             },
@@ -4453,7 +4453,7 @@ class OverlayPositionBuilder {
                 minHeight: undefined,
                 minWidth: undefined,
                 containerClass: ET_OVERLAY_BOTTOM_SHEET_CLASS,
-                positionStrategy: this._overlay.position().global().centerHorizontally().bottom('0'),
+                positionStrategy: () => this._overlay.position().global().centerHorizontally().bottom('0'),
                 dragToDismiss: {
                     direction: 'to-bottom',
                 },
@@ -4466,7 +4466,7 @@ class OverlayPositionBuilder {
                 minHeight: undefined,
                 minWidth: undefined,
                 containerClass: ET_OVERLAY_TOP_SHEET_CLASS,
-                positionStrategy: this._overlay.position().global().centerHorizontally().top('0'),
+                positionStrategy: () => this._overlay.position().global().centerHorizontally().top('0'),
                 dragToDismiss: {
                     direction: 'to-top',
                 },
@@ -4479,7 +4479,7 @@ class OverlayPositionBuilder {
                 minHeight: undefined,
                 minWidth: undefined,
                 containerClass: ET_OVERLAY_LEFT_SHEET_CLASS,
-                positionStrategy: this._overlay.position().global().left('0').centerVertically(),
+                positionStrategy: () => this._overlay.position().global().left('0').centerVertically(),
                 dragToDismiss: {
                     direction: 'to-left',
                 },
@@ -4492,7 +4492,7 @@ class OverlayPositionBuilder {
                 minHeight: undefined,
                 minWidth: undefined,
                 containerClass: ET_OVERLAY_RIGHT_SHEET_CLASS,
-                positionStrategy: this._overlay.position().global().right('0').centerVertically(),
+                positionStrategy: () => this._overlay.position().global().right('0').centerVertically(),
                 dragToDismiss: {
                     direction: 'to-right',
                 },
@@ -4956,7 +4956,7 @@ class OverlayService {
                 overlayRef.updatePosition(currConfig.position);
             }
             if (currConfig.positionStrategy) {
-                cdkRef.overlayRef.updatePositionStrategy(currConfig.positionStrategy);
+                cdkRef.overlayRef.updatePositionStrategy(currConfig.positionStrategy());
             }
             else {
                 cdkRef.overlayRef.updatePosition();
@@ -9509,12 +9509,12 @@ class ComboboxBodyComponent {
         this._themeProvider.syncWithProvider(provider);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ComboboxBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: ComboboxBodyComponent, isStandalone: true, selector: "et-combobox-body", host: { attributes: { "tabindex": "-1", "role": "listbox" }, properties: { "attr.id": "id" }, classAttribute: "et-combobox-body et-with-default-animation" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.3", type: ComboboxBodyComponent, isStandalone: true, selector: "et-combobox-body", host: { attributes: { "tabindex": "-1", "role": "listbox" }, properties: { "attr.id": "id" }, classAttribute: "et-combobox-body et-with-default-animation" }, providers: [
             {
                 provide: COMBOBOX_BODY_TOKEN,
                 useExisting: ComboboxBodyComponent,
             },
-        ], viewQueries: [{ propertyName: "_containerElementRef", first: true, predicate: ["containerElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }, { propertyName: "_options", predicate: ComboboxOptionComponent, descendants: true }], hostDirectives: [{ directive: i1$2.ClickOutsideDirective }, { directive: i2$1.ProvideThemeDirective }], ngImport: i0, template: "<div #containerElement class=\"et-combobox-body-container\" etAnimatedLifecycle>\n  <ng-container *etLet=\"combobox.options$ | async as options\">\n    @if (!options?.length && !combobox.error && !combobox.loading) {\n      @if (combobox.customBodyEmptyTpl$ | async; as tpl) {\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      } @else {\n        @if (combobox.customBodyMoreItemsHintComponent$ | async; as comp) {\n          <ng-container\n            *ngComponentOutlet=\"comp; inputs: (combobox.customBodyMoreItemsHintComponentInputs$ | async) ?? undefined\"\n          />\n        } @else {\n          @if (combobox.bodyMoreItemsHintText) {\n            <p class=\"et-combobox-body--more-items-hint\">\n              {{ combobox.bodyMoreItemsHintText }}\n            </p>\n          }\n        }\n        <ng-template #default>\n          @if (combobox.bodyMoreItemsHintText) {\n            <p class=\"et-combobox-body--more-items-hint\">\n              {{ combobox.bodyMoreItemsHintText }}\n            </p>\n          }\n        </ng-template>\n      }\n      <ng-template #componentOrNone>\n        @if (combobox.customBodyEmptyComponent$ | async; as comp) {\n          <ng-container\n            *ngComponentOutlet=\"comp; inputs: (combobox.customBodyEmptyComponentInputs$ | async) ?? undefined\"\n          />\n        } @else {\n          #default|\n        }\n        <ng-template #default>\n          <p class=\"et-combobox-body--empty\">{{ combobox._tempEmptyText }}</p>\n        </ng-template>\n      </ng-template>\n    }\n\n    @if (combobox.error && !combobox.loading) {\n      @if (combobox.customBodyErrorTpl$ | async; as tpl) {\n        <ng-container *ngTemplateOutlet=\"tpl; context: { error: combobox.error }\" />\n      } @else {\n        #componentOrNone|\n      }\n      <ng-template #componentOrNone>\n        @if (combobox.customBodyErrorComponent$ | async; as comp) {\n          <ng-container\n            *ngComponentOutlet=\"comp; inputs: (customErrorComponentInputs$ | async) ?? { error: combobox.error }\"\n          />\n        }\n      </ng-template>\n    }\n\n    @if (combobox.loading$ | async) {\n      @if (combobox.customBodyLoadingTpl$ | async; as tpl) {\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      } @else {\n        #componentOrNone|\n      }\n      <ng-template #componentOrNone>\n        @if (combobox.customBodyLoadingComponent$ | async; as comp) {\n          <ng-container\n            *ngComponentOutlet=\"comp; inputs: (combobox.customBodyLoadingComponentInputs$ | async) ?? undefined\"\n          />\n        }\n      </ng-template>\n    }\n\n    @if (!combobox.error) {\n      @for (option of options; track trackByFn($index, option)) {\n        <et-combobox-option [option]=\"option\" />\n      }\n    }\n\n    @if (options?.length && combobox.showBodyMoreItemsHint) {\n      @if (combobox.customBodyMoreItemsHintTpl$ | async; as tpl) {\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      } @else {\n        #componentOrNone|\n      }\n      <ng-template #componentOrNone>\n        @if (combobox.customBodyMoreItemsHintComponent$ | async; as comp) {\n          <ng-container\n            *ngComponentOutlet=\"comp; inputs: (combobox.customBodyMoreItemsHintComponentInputs$ | async) ?? undefined\"\n          />\n        } @else {\n          #default|\n        }\n        <ng-template #default>\n          @if (combobox.bodyMoreItemsHintText) {\n            <p class=\"et-combobox-body--more-items-hint\">\n              {{ combobox.bodyMoreItemsHintText }}\n            </p>\n          }\n        </ng-template>\n      </ng-template>\n    }\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: ComboboxOptionComponent, selector: "et-combobox-option", inputs: ["option"] }, { kind: "directive", type: LetDirective, selector: "[etLet]", inputs: ["etLet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", exportAs: ["etAnimatedLifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "_containerElementRef", first: true, predicate: ["containerElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }, { propertyName: "_options", predicate: ComboboxOptionComponent, descendants: true }], hostDirectives: [{ directive: i1$2.ClickOutsideDirective }, { directive: i2$1.ProvideThemeDirective }], ngImport: i0, template: "<!-- TODO(TRB): Use new control flow -->\n<div #containerElement class=\"et-combobox-body-container\" etAnimatedLifecycle>\n  <ng-container *etLet=\"combobox.options$ | async as options\">\n    <ng-container *ngIf=\"!options?.length && !combobox.error && !combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyEmptyTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyEmptyComponent$ | async as comp; else default\">\n          <ng-container\n            *ngComponentOutlet=\"comp; inputs: (combobox.customBodyEmptyComponentInputs$ | async) ?? undefined\"\n          />\n        </ng-container>\n        <ng-template #default>\n          <p class=\"et-combobox-body--empty\">{{ combobox._tempEmptyText }}</p>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"combobox.error && !combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyErrorTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl; context: { error: combobox.error }\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyErrorComponent$ | async as comp\">\n          <ng-container\n            *ngComponentOutlet=\"comp; inputs: (customErrorComponentInputs$ | async) ?? { error: combobox.error }\"\n          />\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"combobox.loading$ | async\">\n      <ng-container *ngIf=\"combobox.customBodyLoadingTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyLoadingComponent$ | async as comp\">\n          <ng-container\n            *ngComponentOutlet=\"comp; inputs: (combobox.customBodyLoadingComponentInputs$ | async) ?? undefined\"\n          />\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"!combobox.error\">\n      <et-combobox-option *ngFor=\"let option of options; trackBy: trackByFn\" [option]=\"option\" />\n    </ng-container>\n\n    <ng-container *ngIf=\"options?.length && combobox.showBodyMoreItemsHint\">\n      <ng-container *ngIf=\"combobox.customBodyMoreItemsHintTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyMoreItemsHintComponent$ | async as comp; else default\">\n          <ng-container\n            *ngComponentOutlet=\"comp; inputs: (combobox.customBodyMoreItemsHintComponentInputs$ | async) ?? undefined\"\n          />\n        </ng-container>\n        <ng-template #default>\n          <p *ngIf=\"combobox.bodyMoreItemsHintText\" class=\"et-combobox-body--more-items-hint\">\n            {{ combobox.bodyMoreItemsHintText }}\n          </p>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: ComboboxOptionComponent, selector: "et-combobox-option", inputs: ["option"] }, { kind: "directive", type: LetDirective, selector: "[etLet]", inputs: ["etLet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", exportAs: ["etAnimatedLifecycle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ComboboxBodyComponent, decorators: [{
             type: Component,
@@ -9530,12 +9530,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
                         LetDirective,
                         AsyncPipe,
                         AnimatedLifecycleDirective,
+                        NgIf,
                     ], hostDirectives: [ClickOutsideDirective, ProvideThemeDirective], providers: [
                         {
                             provide: COMBOBOX_BODY_TOKEN,
                             useExisting: ComboboxBodyComponent,
                         },
-                    ], template: "<div #containerElement class=\"et-combobox-body-container\" etAnimatedLifecycle>\n  <ng-container *etLet=\"combobox.options$ | async as options\">\n    @if (!options?.length && !combobox.error && !combobox.loading) {\n      @if (combobox.customBodyEmptyTpl$ | async; as tpl) {\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      } @else {\n        @if (combobox.customBodyMoreItemsHintComponent$ | async; as comp) {\n          <ng-container\n            *ngComponentOutlet=\"comp; inputs: (combobox.customBodyMoreItemsHintComponentInputs$ | async) ?? undefined\"\n          />\n        } @else {\n          @if (combobox.bodyMoreItemsHintText) {\n            <p class=\"et-combobox-body--more-items-hint\">\n              {{ combobox.bodyMoreItemsHintText }}\n            </p>\n          }\n        }\n        <ng-template #default>\n          @if (combobox.bodyMoreItemsHintText) {\n            <p class=\"et-combobox-body--more-items-hint\">\n              {{ combobox.bodyMoreItemsHintText }}\n            </p>\n          }\n        </ng-template>\n      }\n      <ng-template #componentOrNone>\n        @if (combobox.customBodyEmptyComponent$ | async; as comp) {\n          <ng-container\n            *ngComponentOutlet=\"comp; inputs: (combobox.customBodyEmptyComponentInputs$ | async) ?? undefined\"\n          />\n        } @else {\n          #default|\n        }\n        <ng-template #default>\n          <p class=\"et-combobox-body--empty\">{{ combobox._tempEmptyText }}</p>\n        </ng-template>\n      </ng-template>\n    }\n\n    @if (combobox.error && !combobox.loading) {\n      @if (combobox.customBodyErrorTpl$ | async; as tpl) {\n        <ng-container *ngTemplateOutlet=\"tpl; context: { error: combobox.error }\" />\n      } @else {\n        #componentOrNone|\n      }\n      <ng-template #componentOrNone>\n        @if (combobox.customBodyErrorComponent$ | async; as comp) {\n          <ng-container\n            *ngComponentOutlet=\"comp; inputs: (customErrorComponentInputs$ | async) ?? { error: combobox.error }\"\n          />\n        }\n      </ng-template>\n    }\n\n    @if (combobox.loading$ | async) {\n      @if (combobox.customBodyLoadingTpl$ | async; as tpl) {\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      } @else {\n        #componentOrNone|\n      }\n      <ng-template #componentOrNone>\n        @if (combobox.customBodyLoadingComponent$ | async; as comp) {\n          <ng-container\n            *ngComponentOutlet=\"comp; inputs: (combobox.customBodyLoadingComponentInputs$ | async) ?? undefined\"\n          />\n        }\n      </ng-template>\n    }\n\n    @if (!combobox.error) {\n      @for (option of options; track trackByFn($index, option)) {\n        <et-combobox-option [option]=\"option\" />\n      }\n    }\n\n    @if (options?.length && combobox.showBodyMoreItemsHint) {\n      @if (combobox.customBodyMoreItemsHintTpl$ | async; as tpl) {\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      } @else {\n        #componentOrNone|\n      }\n      <ng-template #componentOrNone>\n        @if (combobox.customBodyMoreItemsHintComponent$ | async; as comp) {\n          <ng-container\n            *ngComponentOutlet=\"comp; inputs: (combobox.customBodyMoreItemsHintComponentInputs$ | async) ?? undefined\"\n          />\n        } @else {\n          #default|\n        }\n        <ng-template #default>\n          @if (combobox.bodyMoreItemsHintText) {\n            <p class=\"et-combobox-body--more-items-hint\">\n              {{ combobox.bodyMoreItemsHintText }}\n            </p>\n          }\n        </ng-template>\n      </ng-template>\n    }\n  </ng-container>\n</div>\n" }]
+                    ], template: "<!-- TODO(TRB): Use new control flow -->\n<div #containerElement class=\"et-combobox-body-container\" etAnimatedLifecycle>\n  <ng-container *etLet=\"combobox.options$ | async as options\">\n    <ng-container *ngIf=\"!options?.length && !combobox.error && !combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyEmptyTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyEmptyComponent$ | async as comp; else default\">\n          <ng-container\n            *ngComponentOutlet=\"comp; inputs: (combobox.customBodyEmptyComponentInputs$ | async) ?? undefined\"\n          />\n        </ng-container>\n        <ng-template #default>\n          <p class=\"et-combobox-body--empty\">{{ combobox._tempEmptyText }}</p>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"combobox.error && !combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyErrorTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl; context: { error: combobox.error }\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyErrorComponent$ | async as comp\">\n          <ng-container\n            *ngComponentOutlet=\"comp; inputs: (customErrorComponentInputs$ | async) ?? { error: combobox.error }\"\n          />\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"combobox.loading$ | async\">\n      <ng-container *ngIf=\"combobox.customBodyLoadingTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyLoadingComponent$ | async as comp\">\n          <ng-container\n            *ngComponentOutlet=\"comp; inputs: (combobox.customBodyLoadingComponentInputs$ | async) ?? undefined\"\n          />\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"!combobox.error\">\n      <et-combobox-option *ngFor=\"let option of options; trackBy: trackByFn\" [option]=\"option\" />\n    </ng-container>\n\n    <ng-container *ngIf=\"options?.length && combobox.showBodyMoreItemsHint\">\n      <ng-container *ngIf=\"combobox.customBodyMoreItemsHintTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyMoreItemsHintComponent$ | async as comp; else default\">\n          <ng-container\n            *ngComponentOutlet=\"comp; inputs: (combobox.customBodyMoreItemsHintComponentInputs$ | async) ?? undefined\"\n          />\n        </ng-container>\n        <ng-template #default>\n          <p *ngIf=\"combobox.bodyMoreItemsHintText\" class=\"et-combobox-body--more-items-hint\">\n            {{ combobox.bodyMoreItemsHintText }}\n          </p>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
         }], propDecorators: { _containerElementRef: [{
                 type: ViewChild,
                 args: ['containerElement', { static: true, read: ElementRef }]
@@ -12187,7 +12188,7 @@ class ScrollableComponent {
         this.lastElementIntersection = signalElementIntersection(this.lastElement, { root: this.scrollable });
         this.lastElementVisibility = signal(null);
         this.allScrollableChildren = signalElementChildren(this.scrollableContainer);
-        this.scrollableChildren = computed(() => this.allScrollableChildren().filter((c) => !isScrollableChildActive(c)));
+        this.scrollableChildren = computed(() => this.allScrollableChildren().filter((c) => !isScrollableChildIgnored(c)));
         this._disableSnapping$ = new Subject();
         this.scrollableContentIntersections = signalElementIntersection(this.scrollableChildren, {
             root: this.scrollable,
@@ -12296,11 +12297,11 @@ class ScrollableComponent {
             if (!firstVisibleElement) {
                 return;
             }
-            const initialNavigationStuff = elementList.map((e) => ({
+            const initialNavigationItems = elementList.map((e) => ({
                 isActive: e === firstVisibleElement,
                 element: e,
             }));
-            this._initialScrollableNavigation.set(initialNavigationStuff);
+            this._initialScrollableNavigation.set(initialNavigationItems);
         }, { allowSignalWrites: true });
         effect(() => {
             const isAtStart = this.isAtStart();
@@ -12582,7 +12583,7 @@ class ScrollableComponent {
         this._disableSnapping$.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ScrollableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", 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()\"\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()) {\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      ></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: 100%}.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=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: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;block-size:100%;inline-size:1px;pointer-events:none}.et-scrollable .et-scroll-observer-first-element{inset-inline-start:1px}.et-scrollable .et-scroll-observer-last-element{inset-inline-end:1px}.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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", 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()\"\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()) {\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: 100%}.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=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: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;block-size:100%;inline-size:1px;pointer-events:none}.et-scrollable .et-scroll-observer-first-element{inset-inline-start:1px}.et-scrollable .et-scroll-observer-last-element{inset-inline-end:1px}.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ScrollableComponent, decorators: [{
             type: Component,
@@ -12593,9 +12594,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
                         LetDirective,
                         ChevronIconComponent,
                         ScrollableIsActiveChildDirective,
+                        ScrollableIgnoreChildDirective,
                     ], host: {
                         class: 'et-scrollable',
-                    }, template: "<div class=\"et-scrollable-wrapper\">\n  <div\n    #scrollable\n    [attr.role]=\"scrollableRole() ?? undefined\"\n    [etCursorDragScroll]=\"cursorDragScroll()\"\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()) {\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      ></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: 100%}.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=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: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;block-size:100%;inline-size:1px;pointer-events:none}.et-scrollable .et-scroll-observer-first-element{inset-inline-start:1px}.et-scrollable .et-scroll-observer-last-element{inset-inline-end:1px}.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()\"\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()) {\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: 100%}.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=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: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;block-size:100%;inline-size:1px;pointer-events:none}.et-scrollable .et-scroll-observer-first-element{inset-inline-start:1px}.et-scrollable .et-scroll-observer-last-element{inset-inline-end:1px}.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"] }]
         }], ctorParameters: () => [], propDecorators: { _itemSize: [{
                 type: Input,
                 args: [{ alias: 'itemSize' }]