@ethlete/cdk 4.31.0 → 4.32.0

package/fesm2022/ethlete-cdk.mjs

@@ -16805,8 +16805,10 @@ class ActiveTabUnderlineDirective {
         const currentClientRect = element.getBoundingClientRect();
         const widthDelta = previousIndicatorClientRect.width / currentClientRect.width;
         const xPosition = previousIndicatorClientRect.left - currentClientRect.left;
+        const heightDelta = previousIndicatorClientRect.height / currentClientRect.height;
+        const yPosition = previousIndicatorClientRect.top - currentClientRect.top;
         element.classList.add(NO_TRANSITION_CLASS);
-        this._underlineContentElement.style.setProperty('transform', `translateX(${xPosition}px) scaleX(${widthDelta})`);
+        this._underlineContentElement.style.setProperty('transform', `translateX(${xPosition}px) translateY(${yPosition}px) scaleX(${widthDelta}) scaleY(${heightDelta})`);
         element.getBoundingClientRect();
         element.classList.remove(NO_TRANSITION_CLASS);
         element.classList.add(ACTIVE_CLASS);
@@ -16897,6 +16899,7 @@ class PaginatedTabHeaderDirective {
         this.renderMasks = true;
         this.renderButtons = true;
         this.renderScrollbars = false;
+        this.direction = input('horizontal');
         this.selectFocusedIndex = new EventEmitter();
         this.indexFocused = new EventEmitter();
         this._ngZone.runOutsideAngular(() => {
@@ -17102,7 +17105,7 @@ class PaginatedTabHeaderDirective {
         return { maxScrollDistance, distance: this._scrollDistance };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PaginatedTabHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.1.4", type: PaginatedTabHeaderDirective, inputs: { selectedIndex: "selectedIndex", itemSize: "itemSize", scrollableClass: "scrollableClass", renderMasks: ["renderMasks", "renderMasks", booleanAttribute], renderButtons: ["renderButtons", "renderButtons", booleanAttribute], renderScrollbars: ["renderScrollbars", "renderScrollbars", booleanAttribute] }, outputs: { selectFocusedIndex: "selectFocusedIndex", indexFocused: "indexFocused" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.4", type: PaginatedTabHeaderDirective, inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: false, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: false, isRequired: false, transformFunction: null }, scrollableClass: { classPropertyName: "scrollableClass", publicName: "scrollableClass", isSignal: false, isRequired: false, transformFunction: null }, renderMasks: { classPropertyName: "renderMasks", publicName: "renderMasks", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, renderButtons: { classPropertyName: "renderButtons", publicName: "renderButtons", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, renderScrollbars: { classPropertyName: "renderScrollbars", publicName: "renderScrollbars", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectFocusedIndex: "selectFocusedIndex", indexFocused: "indexFocused" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PaginatedTabHeaderDirective, decorators: [{
             type: Directive
@@ -17174,13 +17177,13 @@ class InlineTabHeaderComponent extends PaginatedTabHeaderDirective {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: InlineTabHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: InlineTabHeaderComponent, isStandalone: true, selector: "et-inline-tab-header", host: { classAttribute: "et-inline-tab-header" }, queries: [{ propertyName: "_items", predicate: InlineTabLabelWrapperDirective }, { propertyName: "_inkBars", predicate: i0.forwardRef(() => ActiveTabUnderlineDirective), descendants: true }], viewQueries: [{ propertyName: "_scrollable", first: true, predicate: ScrollableComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<et-scrollable\n  [itemSize]=\"itemSize\"\n  [renderButtons]=\"renderButtons\"\n  [scrollableClass]=\"scrollableClass\"\n  [renderMasks]=\"renderMasks\"\n  [renderScrollbars]=\"renderScrollbars\"\n  (keydown)=\"_handleKeydown($event)\"\n  (contentChanged)=\"_onContentChanges()\"\n>\n  <ng-content />\n</et-scrollable>\n", dependencies: [{ kind: "component", type: ScrollableComponent, selector: "et-scrollable", inputs: ["itemSize", "direction", "scrollableRole", "scrollableClass", "renderNavigation", "renderMasks", "renderButtons", "buttonPosition", "renderScrollbars", "stickyButtons", "cursorDragScroll", "disableActiveElementScrolling", "scrollMode", "snap", "scrollMargin", "scrollOrigin", "darkenNonIntersectingItems", "showLoadingTemplate", "loadingTemplatePosition"], outputs: ["intersectionChange", "scrollStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", 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  [direction]=\"direction()\"\n  (keydown)=\"_handleKeydown($event)\"\n  (contentChanged)=\"_onContentChanges()\"\n>\n  <ng-content />\n</et-scrollable>\n", dependencies: [{ kind: "component", type: ScrollableComponent, selector: "et-scrollable", inputs: ["itemSize", "direction", "scrollableRole", "scrollableClass", "renderNavigation", "renderMasks", "renderButtons", "buttonPosition", "renderScrollbars", "stickyButtons", "cursorDragScroll", "disableActiveElementScrolling", "scrollMode", "snap", "scrollMargin", "scrollOrigin", "darkenNonIntersectingItems", "showLoadingTemplate", "loadingTemplatePosition"], outputs: ["intersectionChange", "scrollStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: InlineTabHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-inline-tab-header', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ScrollableComponent, NgClass, ObserveContentDirective, ScrollObserverIgnoreTargetDirective], host: {
                         class: 'et-inline-tab-header',
-                    }, 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" }]
+                    }, template: "<et-scrollable\n  [itemSize]=\"itemSize\"\n  [renderButtons]=\"renderButtons\"\n  [scrollableClass]=\"scrollableClass\"\n  [renderMasks]=\"renderMasks\"\n  [renderScrollbars]=\"renderScrollbars\"\n  [direction]=\"direction()\"\n  (keydown)=\"_handleKeydown($event)\"\n  (contentChanged)=\"_onContentChanges()\"\n>\n  <ng-content />\n</et-scrollable>\n" }]
         }], propDecorators: { _items: [{
                 type: ContentChildren,
                 args: [InlineTabLabelWrapperDirective, { descendants: false }]
@@ -17205,6 +17208,7 @@ class InlineTabsComponent {
         this.renderMasks = true;
         this.renderButtons = true;
         this.renderScrollbars = false;
+        this.direction = input('horizontal');
         this.selectedIndexChange = new EventEmitter();
         this.focusChange = new EventEmitter();
         this.selectedTabChange = new EventEmitter(true);
@@ -17370,12 +17374,12 @@ class InlineTabsComponent {
         return event;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: InlineTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: InlineTabsComponent, isStandalone: true, selector: "et-inline-tabs", inputs: { selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute], contentTabIndex: ["contentTabIndex", "contentTabIndex", numberAttribute], preserveContent: ["preserveContent", "preserveContent", booleanAttribute], tabHeaderClasses: "tabHeaderClasses", itemSize: "itemSize", scrollableClass: "scrollableClass", renderMasks: ["renderMasks", "renderMasks", booleanAttribute], renderButtons: ["renderButtons", "renderButtons", booleanAttribute], renderScrollbars: ["renderScrollbars", "renderScrollbars", booleanAttribute] }, outputs: { selectedIndexChange: "selectedIndexChange", focusChange: "focusChange", selectedTabChange: "selectedTabChange" }, host: { classAttribute: "et-inline-tabs" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: InlineTabsComponent, isStandalone: true, selector: "et-inline-tabs", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, contentTabIndex: { classPropertyName: "contentTabIndex", publicName: "contentTabIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, preserveContent: { classPropertyName: "preserveContent", publicName: "preserveContent", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabHeaderClasses: { classPropertyName: "tabHeaderClasses", publicName: "tabHeaderClasses", isSignal: false, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: false, isRequired: false, transformFunction: null }, scrollableClass: { classPropertyName: "scrollableClass", publicName: "scrollableClass", isSignal: false, isRequired: false, transformFunction: null }, renderMasks: { classPropertyName: "renderMasks", publicName: "renderMasks", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, renderButtons: { classPropertyName: "renderButtons", publicName: "renderButtons", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, renderScrollbars: { classPropertyName: "renderScrollbars", publicName: "renderScrollbars", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndexChange: "selectedIndexChange", focusChange: "focusChange", selectedTabChange: "selectedTabChange" }, host: { classAttribute: "et-inline-tabs" }, providers: [
             {
                 provide: TAB_GROUP,
                 useExisting: InlineTabsComponent,
             },
-        ], queries: [{ propertyName: "_allTabs", predicate: InlineTabComponent, descendants: true }], viewQueries: [{ propertyName: "_tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true }, { propertyName: "_tabHeader", first: true, predicate: ["tabHeader"], descendants: true }], ngImport: i0, template: "<et-inline-tab-header\n  #tabHeader\n  [selectedIndex]=\"selectedIndex || 0\"\n  [ngClass]=\"tabHeaderClasses\"\n  [itemSize]=\"itemSize\"\n  [renderButtons]=\"renderButtons\"\n  [scrollableClass]=\"scrollableClass\"\n  [renderMasks]=\"renderMasks\"\n  [renderScrollbars]=\"renderScrollbars\"\n  (indexFocused)=\"_focusChanged($event)\"\n  (selectFocusedIndex)=\"_handleEnter($event)\"\n>\n  @for (tab of _tabs; track trackByTabFn(i, tab); let i = $index) {\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n    <div\n      [id]=\"_getTabLabelId(i)\"\n      [attr.tabIndex]=\"_getTabIndex(tab, i)\"\n      [attr.aria-posinset]=\"i + 1\"\n      [attr.aria-setsize]=\"_tabs.length\"\n      [attr.aria-controls]=\"_getTabContentId(i)\"\n      [attr.aria-selected]=\"selectedIndex === i\"\n      [attr.aria-label]=\"tab.ariaLabel || null\"\n      [attr.aria-labelledby]=\"!tab.ariaLabel && tab.ariaLabelledby ? tab.ariaLabelledby : null\"\n      [disabled]=\"tab.disabled\"\n      [class.et-inline-tab-label--active]=\"selectedIndex === i\"\n      [class.et-inline-tab-label--is-text]=\"!!tab.textLabel\"\n      [fitUnderlineToContent]=\"tab.fitUnderlineToContent\"\n      (click)=\"_handleClick(tab, tabHeader, i)\"\n      (cdkFocusChange)=\"_tabFocusChanged($event, i)\"\n      role=\"tab\"\n      etInlineTabLabelWrapper\n      cdkMonitorElementFocus\n    >\n      <span class=\"et-tab-content\">\n        @if (tab.templateLabel) {\n          <ng-template [cdkPortalOutlet]=\"tab.templateLabel\" />\n        } @else {\n          {{ tab.textLabel }}\n        }\n      </span>\n    </div>\n  }\n</et-inline-tab-header>\n\n<div #tabBodyWrapper class=\"et-inline-tabs-body-wrapper\">\n  @for (tab of _tabs; track trackByTabFn(i, tab); let i = $index) {\n    <et-inline-tab-body\n      [id]=\"_getTabContentId(i)\"\n      [attr.tabindex]=\"contentTabIndex !== null && selectedIndex === i ? contentTabIndex : null\"\n      [attr.aria-labelledby]=\"_getTabLabelId(i)\"\n      [class.cdk-visually-hidden]=\"selectedIndex !== i\"\n      [ngClass]=\"tab.bodyClass\"\n      [class.sr-only]=\"selectedIndex !== i\"\n      [content]=\"tab.content!\"\n      [position]=\"tab.position!\"\n      [origin]=\"tab.origin\"\n      [preserveContent]=\"preserveContent\"\n      role=\"tabpanel\"\n      animationDuration=\"0ms\"\n    />\n  }\n</div>\n", styles: [".et-inline-tabs{display:block}.et-inline-tabs .et-inline-tab-label--is-text{white-space:nowrap}.et-inline-tabs .et-inline-tab-label-wrapper:not([aria-disabled=true]){cursor:pointer}.et-inline-tabs .et-scrollable-container{position:relative}.et-inline-tabs .et-inline-tabs-body-wrapper{display:grid}\n"], dependencies: [{ kind: "component", type: InlineTabHeaderComponent, selector: "et-inline-tab-header" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InlineTabLabelWrapperDirective, selector: "[etInlineTabLabelWrapper]", inputs: ["disabled"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: InlineTabBodyComponent, selector: "et-inline-tab-body", inputs: ["content", "origin", "animationDuration", "preserveContent", "position"], outputs: ["_onCentering", "_beforeCentering", "_afterLeavingCenter", "_onCentered"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "_allTabs", predicate: InlineTabComponent, descendants: true }], viewQueries: [{ propertyName: "_tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true }, { propertyName: "_tabHeader", first: true, predicate: ["tabHeader"], descendants: true }], ngImport: i0, template: "<et-inline-tab-header\n  #tabHeader\n  [selectedIndex]=\"selectedIndex || 0\"\n  [ngClass]=\"tabHeaderClasses\"\n  [itemSize]=\"itemSize\"\n  [renderButtons]=\"renderButtons\"\n  [scrollableClass]=\"scrollableClass\"\n  [renderMasks]=\"renderMasks\"\n  [renderScrollbars]=\"renderScrollbars\"\n  [direction]=\"direction()\"\n  (indexFocused)=\"_focusChanged($event)\"\n  (selectFocusedIndex)=\"_handleEnter($event)\"\n>\n  @for (tab of _tabs; track trackByTabFn(i, tab); let i = $index) {\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n    <div\n      [id]=\"_getTabLabelId(i)\"\n      [attr.tabIndex]=\"_getTabIndex(tab, i)\"\n      [attr.aria-posinset]=\"i + 1\"\n      [attr.aria-setsize]=\"_tabs.length\"\n      [attr.aria-controls]=\"_getTabContentId(i)\"\n      [attr.aria-selected]=\"selectedIndex === i\"\n      [attr.aria-label]=\"tab.ariaLabel || null\"\n      [attr.aria-labelledby]=\"!tab.ariaLabel && tab.ariaLabelledby ? tab.ariaLabelledby : null\"\n      [disabled]=\"tab.disabled\"\n      [class.et-inline-tab-label--active]=\"selectedIndex === i\"\n      [class.et-inline-tab-label--is-text]=\"!!tab.textLabel\"\n      [fitUnderlineToContent]=\"tab.fitUnderlineToContent\"\n      (click)=\"_handleClick(tab, tabHeader, i)\"\n      (cdkFocusChange)=\"_tabFocusChanged($event, i)\"\n      role=\"tab\"\n      etInlineTabLabelWrapper\n      cdkMonitorElementFocus\n    >\n      <span class=\"et-tab-content\">\n        @if (tab.templateLabel) {\n          <ng-template [cdkPortalOutlet]=\"tab.templateLabel\" />\n        } @else {\n          {{ tab.textLabel }}\n        }\n      </span>\n    </div>\n  }\n</et-inline-tab-header>\n\n<div #tabBodyWrapper class=\"et-inline-tabs-body-wrapper\">\n  @for (tab of _tabs; track trackByTabFn(i, tab); let i = $index) {\n    <et-inline-tab-body\n      [id]=\"_getTabContentId(i)\"\n      [attr.tabindex]=\"contentTabIndex !== null && selectedIndex === i ? contentTabIndex : null\"\n      [attr.aria-labelledby]=\"_getTabLabelId(i)\"\n      [class.cdk-visually-hidden]=\"selectedIndex !== i\"\n      [ngClass]=\"tab.bodyClass\"\n      [class.sr-only]=\"selectedIndex !== i\"\n      [content]=\"tab.content!\"\n      [position]=\"tab.position!\"\n      [origin]=\"tab.origin\"\n      [preserveContent]=\"preserveContent\"\n      role=\"tabpanel\"\n      animationDuration=\"0ms\"\n    />\n  }\n</div>\n", styles: [".et-inline-tabs{display:block}.et-inline-tabs .et-inline-tab-label--is-text{white-space:nowrap}.et-inline-tabs .et-inline-tab-label-wrapper:not([aria-disabled=true]){cursor:pointer}.et-inline-tabs .et-scrollable-container{position:relative}.et-inline-tabs .et-inline-tabs-body-wrapper{display:grid}\n"], dependencies: [{ kind: "component", type: InlineTabHeaderComponent, selector: "et-inline-tab-header" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InlineTabLabelWrapperDirective, selector: "[etInlineTabLabelWrapper]", inputs: ["disabled"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: InlineTabBodyComponent, selector: "et-inline-tab-body", inputs: ["content", "origin", "animationDuration", "preserveContent", "position"], outputs: ["_onCentering", "_beforeCentering", "_afterLeavingCenter", "_onCentered"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: InlineTabsComponent, decorators: [{
             type: Component,
@@ -17393,7 +17397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         PortalModule,
                     ], host: {
                         class: 'et-inline-tabs',
-                    }, template: "<et-inline-tab-header\n  #tabHeader\n  [selectedIndex]=\"selectedIndex || 0\"\n  [ngClass]=\"tabHeaderClasses\"\n  [itemSize]=\"itemSize\"\n  [renderButtons]=\"renderButtons\"\n  [scrollableClass]=\"scrollableClass\"\n  [renderMasks]=\"renderMasks\"\n  [renderScrollbars]=\"renderScrollbars\"\n  (indexFocused)=\"_focusChanged($event)\"\n  (selectFocusedIndex)=\"_handleEnter($event)\"\n>\n  @for (tab of _tabs; track trackByTabFn(i, tab); let i = $index) {\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n    <div\n      [id]=\"_getTabLabelId(i)\"\n      [attr.tabIndex]=\"_getTabIndex(tab, i)\"\n      [attr.aria-posinset]=\"i + 1\"\n      [attr.aria-setsize]=\"_tabs.length\"\n      [attr.aria-controls]=\"_getTabContentId(i)\"\n      [attr.aria-selected]=\"selectedIndex === i\"\n      [attr.aria-label]=\"tab.ariaLabel || null\"\n      [attr.aria-labelledby]=\"!tab.ariaLabel && tab.ariaLabelledby ? tab.ariaLabelledby : null\"\n      [disabled]=\"tab.disabled\"\n      [class.et-inline-tab-label--active]=\"selectedIndex === i\"\n      [class.et-inline-tab-label--is-text]=\"!!tab.textLabel\"\n      [fitUnderlineToContent]=\"tab.fitUnderlineToContent\"\n      (click)=\"_handleClick(tab, tabHeader, i)\"\n      (cdkFocusChange)=\"_tabFocusChanged($event, i)\"\n      role=\"tab\"\n      etInlineTabLabelWrapper\n      cdkMonitorElementFocus\n    >\n      <span class=\"et-tab-content\">\n        @if (tab.templateLabel) {\n          <ng-template [cdkPortalOutlet]=\"tab.templateLabel\" />\n        } @else {\n          {{ tab.textLabel }}\n        }\n      </span>\n    </div>\n  }\n</et-inline-tab-header>\n\n<div #tabBodyWrapper class=\"et-inline-tabs-body-wrapper\">\n  @for (tab of _tabs; track trackByTabFn(i, tab); let i = $index) {\n    <et-inline-tab-body\n      [id]=\"_getTabContentId(i)\"\n      [attr.tabindex]=\"contentTabIndex !== null && selectedIndex === i ? contentTabIndex : null\"\n      [attr.aria-labelledby]=\"_getTabLabelId(i)\"\n      [class.cdk-visually-hidden]=\"selectedIndex !== i\"\n      [ngClass]=\"tab.bodyClass\"\n      [class.sr-only]=\"selectedIndex !== i\"\n      [content]=\"tab.content!\"\n      [position]=\"tab.position!\"\n      [origin]=\"tab.origin\"\n      [preserveContent]=\"preserveContent\"\n      role=\"tabpanel\"\n      animationDuration=\"0ms\"\n    />\n  }\n</div>\n", styles: [".et-inline-tabs{display:block}.et-inline-tabs .et-inline-tab-label--is-text{white-space:nowrap}.et-inline-tabs .et-inline-tab-label-wrapper:not([aria-disabled=true]){cursor:pointer}.et-inline-tabs .et-scrollable-container{position:relative}.et-inline-tabs .et-inline-tabs-body-wrapper{display:grid}\n"] }]
+                    }, template: "<et-inline-tab-header\n  #tabHeader\n  [selectedIndex]=\"selectedIndex || 0\"\n  [ngClass]=\"tabHeaderClasses\"\n  [itemSize]=\"itemSize\"\n  [renderButtons]=\"renderButtons\"\n  [scrollableClass]=\"scrollableClass\"\n  [renderMasks]=\"renderMasks\"\n  [renderScrollbars]=\"renderScrollbars\"\n  [direction]=\"direction()\"\n  (indexFocused)=\"_focusChanged($event)\"\n  (selectFocusedIndex)=\"_handleEnter($event)\"\n>\n  @for (tab of _tabs; track trackByTabFn(i, tab); let i = $index) {\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n    <div\n      [id]=\"_getTabLabelId(i)\"\n      [attr.tabIndex]=\"_getTabIndex(tab, i)\"\n      [attr.aria-posinset]=\"i + 1\"\n      [attr.aria-setsize]=\"_tabs.length\"\n      [attr.aria-controls]=\"_getTabContentId(i)\"\n      [attr.aria-selected]=\"selectedIndex === i\"\n      [attr.aria-label]=\"tab.ariaLabel || null\"\n      [attr.aria-labelledby]=\"!tab.ariaLabel && tab.ariaLabelledby ? tab.ariaLabelledby : null\"\n      [disabled]=\"tab.disabled\"\n      [class.et-inline-tab-label--active]=\"selectedIndex === i\"\n      [class.et-inline-tab-label--is-text]=\"!!tab.textLabel\"\n      [fitUnderlineToContent]=\"tab.fitUnderlineToContent\"\n      (click)=\"_handleClick(tab, tabHeader, i)\"\n      (cdkFocusChange)=\"_tabFocusChanged($event, i)\"\n      role=\"tab\"\n      etInlineTabLabelWrapper\n      cdkMonitorElementFocus\n    >\n      <span class=\"et-tab-content\">\n        @if (tab.templateLabel) {\n          <ng-template [cdkPortalOutlet]=\"tab.templateLabel\" />\n        } @else {\n          {{ tab.textLabel }}\n        }\n      </span>\n    </div>\n  }\n</et-inline-tab-header>\n\n<div #tabBodyWrapper class=\"et-inline-tabs-body-wrapper\">\n  @for (tab of _tabs; track trackByTabFn(i, tab); let i = $index) {\n    <et-inline-tab-body\n      [id]=\"_getTabContentId(i)\"\n      [attr.tabindex]=\"contentTabIndex !== null && selectedIndex === i ? contentTabIndex : null\"\n      [attr.aria-labelledby]=\"_getTabLabelId(i)\"\n      [class.cdk-visually-hidden]=\"selectedIndex !== i\"\n      [ngClass]=\"tab.bodyClass\"\n      [class.sr-only]=\"selectedIndex !== i\"\n      [content]=\"tab.content!\"\n      [position]=\"tab.position!\"\n      [origin]=\"tab.origin\"\n      [preserveContent]=\"preserveContent\"\n      role=\"tabpanel\"\n      animationDuration=\"0ms\"\n    />\n  }\n</div>\n", styles: [".et-inline-tabs{display:block}.et-inline-tabs .et-inline-tab-label--is-text{white-space:nowrap}.et-inline-tabs .et-inline-tab-label-wrapper:not([aria-disabled=true]){cursor:pointer}.et-inline-tabs .et-scrollable-container{position:relative}.et-inline-tabs .et-inline-tabs-body-wrapper{display:grid}\n"] }]
         }], propDecorators: { selectedIndex: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
@@ -17695,13 +17699,13 @@ class NavTabsComponent extends PaginatedTabHeaderDirective {
         return this.tabOutlet ? 'tablist' : this._elementRef.nativeElement.getAttribute('role');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NavTabsComponent, isStandalone: true, selector: "[et-nav-tabs]", inputs: { tabOutlet: "tabOutlet" }, host: { properties: { "attr.role": "this._attrRole" }, classAttribute: "et-nav-tabs" }, queries: [{ propertyName: "_items", predicate: i0.forwardRef(() => NavTabLinkComponent), descendants: true }, { propertyName: "_inkBars", predicate: i0.forwardRef(() => ActiveTabUnderlineDirective), descendants: true }], viewQueries: [{ propertyName: "_scrollable", first: true, predicate: ScrollableComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<et-scrollable\n  [itemSize]=\"itemSize\"\n  [renderButtons]=\"renderButtons\"\n  [scrollableClass]=\"scrollableClass\"\n  [renderMasks]=\"renderMasks\"\n  [renderScrollbars]=\"renderScrollbars\"\n  (keydown)=\"_handleKeydown($event)\"\n  (contentChanged)=\"_onContentChanges()\"\n>\n  <ng-content />\n</et-scrollable>\n", dependencies: [{ kind: "component", type: ScrollableComponent, selector: "et-scrollable", inputs: ["itemSize", "direction", "scrollableRole", "scrollableClass", "renderNavigation", "renderMasks", "renderButtons", "buttonPosition", "renderScrollbars", "stickyButtons", "cursorDragScroll", "disableActiveElementScrolling", "scrollMode", "snap", "scrollMargin", "scrollOrigin", "darkenNonIntersectingItems", "showLoadingTemplate", "loadingTemplatePosition"], outputs: ["intersectionChange", "scrollStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", 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  [direction]=\"direction()\"\n  (keydown)=\"_handleKeydown($event)\"\n  (contentChanged)=\"_onContentChanges()\"\n>\n  <ng-content />\n</et-scrollable>\n", dependencies: [{ kind: "component", type: ScrollableComponent, selector: "et-scrollable", inputs: ["itemSize", "direction", "scrollableRole", "scrollableClass", "renderNavigation", "renderMasks", "renderButtons", "buttonPosition", "renderScrollbars", "stickyButtons", "cursorDragScroll", "disableActiveElementScrolling", "scrollMode", "snap", "scrollMargin", "scrollOrigin", "darkenNonIntersectingItems", "showLoadingTemplate", "loadingTemplatePosition"], outputs: ["intersectionChange", "scrollStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: '[et-nav-tabs]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, standalone: true, imports: [ScrollableComponent, NgClass, ScrollObserverIgnoreTargetDirective], host: {
                         class: 'et-nav-tabs',
-                    }, 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" }]
+                    }, template: "<et-scrollable\n  [itemSize]=\"itemSize\"\n  [renderButtons]=\"renderButtons\"\n  [scrollableClass]=\"scrollableClass\"\n  [renderMasks]=\"renderMasks\"\n  [renderScrollbars]=\"renderScrollbars\"\n  [direction]=\"direction()\"\n  (keydown)=\"_handleKeydown($event)\"\n  (contentChanged)=\"_onContentChanges()\"\n>\n  <ng-content />\n</et-scrollable>\n" }]
         }], propDecorators: { tabOutlet: [{
                 type: Input
             }], _items: [{