@koobiq/components 17.0.0-rc.8 → 17.0.0

package/fesm2022/koobiq-components-tabs.mjs

@@ -1,30 +1,30 @@
-import * as i1$2 from '@angular/cdk/a11y';
-import { FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
+import * as i3 from '@angular/cdk/bidi';
 import * as i2$1 from '@angular/cdk/portal';
 import { CdkPortalOutlet, CdkPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
-import * as i1 from '@angular/cdk/scrolling';
-import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import * as i1$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Input, Output, ViewChild, forwardRef, Directive, Inject, InjectionToken, TemplateRef, ContentChild, ContentChildren, Attribute, NgModule } from '@angular/core';
-import { mixinDisabled, PopUpPlacements, KBQ_SELECT_SCROLL_STRATEGY, KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER, KBQ_PARENT_ANIMATION_COMPONENT, mixinTabIndex, KbqCommonModule } from '@koobiq/components/core';
-import * as i4 from '@koobiq/components/icon';
-import { KbqIconModule } from '@koobiq/components/icon';
-import * as i4$1 from '@koobiq/components/tooltip';
-import { KbqToolTipModule } from '@koobiq/components/tooltip';
-import * as i3 from '@angular/cdk/bidi';
 import { Subscription, Subject, fromEvent, of, merge, timer } from 'rxjs';
-import { startWith, takeUntil, debounceTime, delay } from 'rxjs/operators';
+import { startWith, takeUntil, debounceTime } from 'rxjs/operators';
 import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i1 from '@angular/cdk/scrolling';
+import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { mixinDisabled, PopUpPlacements, KBQ_SELECT_SCROLL_STRATEGY, KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER, KBQ_PARENT_ANIMATION_COMPONENT, mixinTabIndex, KbqCommonModule } from '@koobiq/components/core';
 import * as i2 from '@angular/cdk/platform';
 import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
 import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
+import * as i1$2 from '@angular/cdk/a11y';
+import { FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
 import { hasModifierKey, ENTER, SPACE } from '@angular/cdk/keycodes';
 import { HOME, END, UP_ARROW, DOWN_ARROW, RIGHT_ARROW, LEFT_ARROW } from '@koobiq/cdk/keycodes';
 import { KBQ_DROPDOWN_SCROLL_STRATEGY } from '@koobiq/components/dropdown';
 import { KBQ_POPOVER_SCROLL_STRATEGY } from '@koobiq/components/popover';
+import * as i4 from '@koobiq/components/icon';
+import { KbqIconModule } from '@koobiq/components/icon';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i4$1 from '@koobiq/components/tooltip';
+import { KbqToolTipModule } from '@koobiq/components/tooltip';
 
 const kbqTabsAnimations = {
     /** Animation translates a tab along the X axis. */
@@ -77,8 +77,7 @@ class KbqTabBody {
         /** Subscription to the directionality change observable. */
         this.dirChangeSubscription = Subscription.EMPTY;
         if (this.dir && changeDetectorRef) {
-            this.dirChangeSubscription = this.dir.change
-                .subscribe((direction) => {
+            this.dirChangeSubscription = this.dir.change.subscribe((direction) => {
                 this.computePositionAnimationState(direction);
                 changeDetectorRef.markForCheck();
             });
@@ -144,13 +143,13 @@ class KbqTabBody {
         return 'right-origin-center';
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTabBody, deps: [{ token: i0.ElementRef }, { token: i3.Directionality, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqTabBody, selector: "kbq-tab-body", inputs: { position: "position", content: "content", origin: "origin", animationDuration: "animationDuration" }, outputs: { onCentering: "onCentering", beforeCentering: "beforeCentering", afterLeavingCenter: "afterLeavingCenter", onCentered: "onCentered" }, host: { classAttribute: "kbq-tab-body" }, viewQueries: [{ propertyName: "portalHost", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: "<div class=\"kbq-tab-body__content kbq-scrollbar\"\n     #content\n     [@translateTab]=\"{\n        value: bodyPosition,\n        params: {animationDuration: animationDuration}\n     }\"\n     (@translateTab.start)=\"onTranslateTabStarted($event)\"\n     (@translateTab.done)=\"onTranslateTabComplete($event)\"\n     cdk-scrollable>\n    <ng-template kbqTabBodyHost></ng-template>\n</div>\n", styles: [".kbq-tab-body__content{height:100%;overflow:auto}.kbq-tab-body__content .kbq-tab-group_dynamic-height{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.CdkScrollable), selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i0.forwardRef(() => KbqTabBodyPortal), selector: "[kbqTabBodyHost]" }], animations: [kbqTabsAnimations.translateTab], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqTabBody, selector: "kbq-tab-body", inputs: { position: "position", content: "content", origin: "origin", animationDuration: "animationDuration" }, outputs: { onCentering: "onCentering", beforeCentering: "beforeCentering", afterLeavingCenter: "afterLeavingCenter", onCentered: "onCentered" }, host: { classAttribute: "kbq-tab-body" }, viewQueries: [{ propertyName: "portalHost", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: "<div\n    #content\n    cdk-scrollable\n    class=\"kbq-tab-body__content kbq-scrollbar\"\n    (@translateTab.done)=\"onTranslateTabComplete($event)\"\n    (@translateTab.start)=\"onTranslateTabStarted($event)\"\n    [@translateTab]=\"{\n        value: bodyPosition,\n        params: { animationDuration: animationDuration }\n    }\"\n>\n    <ng-template kbqTabBodyHost />\n</div>\n", styles: [".kbq-tab-body__content{height:100%;overflow:auto}.kbq-tab-body__content .kbq-tab-group_dynamic-height{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.CdkScrollable), selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i0.forwardRef(() => KbqTabBodyPortal), selector: "[kbqTabBodyHost]" }], animations: [kbqTabsAnimations.translateTab], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTabBody, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-tab-body', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [kbqTabsAnimations.translateTab], host: {
                         class: 'kbq-tab-body'
-                    }, template: "<div class=\"kbq-tab-body__content kbq-scrollbar\"\n     #content\n     [@translateTab]=\"{\n        value: bodyPosition,\n        params: {animationDuration: animationDuration}\n     }\"\n     (@translateTab.start)=\"onTranslateTabStarted($event)\"\n     (@translateTab.done)=\"onTranslateTabComplete($event)\"\n     cdk-scrollable>\n    <ng-template kbqTabBodyHost></ng-template>\n</div>\n", styles: [".kbq-tab-body__content{height:100%;overflow:auto}.kbq-tab-body__content .kbq-tab-group_dynamic-height{overflow:hidden}\n"] }]
+                    }, template: "<div\n    #content\n    cdk-scrollable\n    class=\"kbq-tab-body__content kbq-scrollbar\"\n    (@translateTab.done)=\"onTranslateTabComplete($event)\"\n    (@translateTab.start)=\"onTranslateTabStarted($event)\"\n    [@translateTab]=\"{\n        value: bodyPosition,\n        params: { animationDuration: animationDuration }\n    }\"\n>\n    <ng-template kbqTabBodyHost />\n</div>\n", styles: [".kbq-tab-body__content{height:100%;overflow:auto}.kbq-tab-body__content .kbq-tab-group_dynamic-height{overflow:hidden}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i3.Directionality, decorators: [{
                     type: Optional
                 }] }, { type: i0.ChangeDetectorRef }], propDecorators: { position: [{
@@ -167,8 +166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                 type: ViewChild,
                 args: [CdkPortalOutlet, { static: false }]
             }], content: [{
-                type: Input,
-                args: ['content']
+                type: Input
             }], origin: [{
                 type: Input
             }], animationDuration: [{
@@ -197,8 +195,9 @@ class KbqTabBodyPortal extends CdkPortalOutlet {
                 this.attach(this.host.content);
             }
         });
-        this.leavingSub = this.host.afterLeavingCenter
-            .subscribe(() => { this.detach(); });
+        this.leavingSub = this.host.afterLeavingCenter.subscribe(() => {
+            this.detach();
+        });
     }
     /** Clean up centering subscription. */
     ngOnDestroy() {
@@ -232,7 +231,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
             args: [{ selector: '[kbqTabContent]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
-/* tslint:disable:naming-convention */
 /** Config used to bind passive event listeners */
 const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: true });
 /**
@@ -345,12 +343,11 @@ class KbqPaginatedTabHeader {
         const realign = () => {
             this.updatePagination();
         };
-        this.keyManager = new FocusKeyManager(this.items)
-            .withHorizontalOrientation(this.getLayoutDirection());
+        this.keyManager = new FocusKeyManager(this.items).withHorizontalOrientation(this.getLayoutDirection());
         this.keyManager.updateActiveItem(this._selectedIndex);
         // Defer the first call in order to allow for slower browsers to lay out the elements.
         // This helps in cases where the user lands directly on a page with paginated tabs.
-        typeof requestAnimationFrame !== undefined ? requestAnimationFrame(realign) : realign();
+        typeof requestAnimationFrame !== 'undefined' ? requestAnimationFrame(realign) : realign();
         // On dir change or window resize, realign the ink bar and update the orientation of
         // the key manager if the direction has changed.
         merge(dirChange, resize, this.items.changes)
@@ -368,9 +365,7 @@ class KbqPaginatedTabHeader {
         // If there is a change in the focus key manager we need to emit the `indexFocused`
         // event in order to provide a public event that notifies about focus changes. Also we realign
         // the tabs container by scrolling the new focused tab into the visible section.
-        this.keyManager.change
-            .pipe(takeUntil(this.destroyed))
-            .subscribe((newFocusIndex) => {
+        this.keyManager.change.pipe(takeUntil(this.destroyed)).subscribe((newFocusIndex) => {
             this.indexFocused.emit(newFocusIndex);
             this.setTabFocus(newFocusIndex);
         });
@@ -408,7 +403,6 @@ class KbqPaginatedTabHeader {
         if (hasModifierKey(event)) {
             return;
         }
-        // tslint:disable-next-line: deprecation
         const key = event.keyCode;
         if (key === HOME) {
             this.keyManager.setFirstItemActive();
@@ -635,7 +629,7 @@ class KbqPaginatedTabHeader {
     getMaxScrollDistance() {
         const lengthOfTabList = this.tabList.nativeElement.scrollWidth;
         const viewLength = this.tabListContainer.nativeElement.offsetWidth;
-        return (lengthOfTabList - viewLength) || 0;
+        return lengthOfTabList - viewLength || 0;
     }
     /** Stops the currently-running paginator interval.  */
     stopInterval() {
@@ -809,9 +803,8 @@ class KbqTab extends KbqTabMixinBase {
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTab, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqTab, selector: "kbq-tab", inputs: { disabled: "disabled", tooltipTitle: "tooltipTitle", tooltipPlacement: "tooltipPlacement", textLabel: ["label", "textLabel"], empty: "empty", tabId: "tabId" }, providers: [
-            ...[KBQ_SELECT_SCROLL_STRATEGY, KBQ_DROPDOWN_SCROLL_STRATEGY, KBQ_POPOVER_SCROLL_STRATEGY]
-                .map(((token) => KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER(token, ((overlay) => (() => overlay.scrollStrategies.close())))))
-        ], queries: [{ propertyName: "templateLabel", first: true, predicate: KBQ_TAB_LABEL, descendants: true }, { propertyName: "explicitContent", first: true, predicate: KbqTabContent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], exportAs: ["kbqTab"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+            ...[KBQ_SELECT_SCROLL_STRATEGY, KBQ_DROPDOWN_SCROLL_STRATEGY, KBQ_POPOVER_SCROLL_STRATEGY].map(((token) => KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER(token, ((overlay) => (() => overlay.scrollStrategies.close())))))
+        ], queries: [{ propertyName: "templateLabel", first: true, predicate: KBQ_TAB_LABEL, descendants: true }, { propertyName: "explicitContent", first: true, predicate: KbqTabContent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], exportAs: ["kbqTab"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-template><ng-content /></ng-template>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTab, decorators: [{
             type: Component,
@@ -821,13 +814,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                     // Create a template for the content of the <kbq-tab> so that we can grab a reference to this
                     // TemplateRef and use it in a Portal to render the tab content in the appropriate place in the
                     // tab-group.
-                    template: '<ng-template><ng-content></ng-content></ng-template>',
+                    template: '<ng-template><ng-content /></ng-template>',
                     inputs: ['disabled'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     providers: [
-                        ...[KBQ_SELECT_SCROLL_STRATEGY, KBQ_DROPDOWN_SCROLL_STRATEGY, KBQ_POPOVER_SCROLL_STRATEGY]
-                            .map(((token) => KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER(token, ((overlay) => (() => overlay.scrollStrategies.close())))))
+                        ...[KBQ_SELECT_SCROLL_STRATEGY, KBQ_DROPDOWN_SCROLL_STRATEGY, KBQ_POPOVER_SCROLL_STRATEGY].map(((token) => KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER(token, ((overlay) => (() => overlay.scrollStrategies.close())))))
                     ]
                 }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { templateLabel: [{
@@ -849,8 +841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
             }], empty: [{
                 type: Input
             }], tabId: [{
-                type: Input,
-                args: ['tabId']
+                type: Input
             }] } });
 
 // Boilerplate for applying mixins to KbqTabLabelWrapper.
@@ -947,7 +938,7 @@ class KbqTabHeader extends KbqPaginatedTabHeader {
         event.preventDefault();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTabHeader, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ViewportRuler }, { token: i0.NgZone }, { token: i2.Platform }, { token: i3.Directionality, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqTabHeader, selector: "kbq-tab-header", inputs: { selectedIndex: "selectedIndex", vertical: "vertical" }, outputs: { selectFocusedIndex: "selectFocusedIndex", indexFocused: "indexFocused" }, host: { properties: { "class.kbq-tab-header_vertical": "vertical", "class.kbq-tab-header__pagination-controls_enabled": "showPaginationControls", "class.kbq-tab-header_rtl": "getLayoutDirection() == 'rtl'" }, classAttribute: "kbq-tab-header" }, queries: [{ propertyName: "items", predicate: KbqTabLabelWrapper }], viewQueries: [{ propertyName: "tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, static: true }, { propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true, static: true }, { propertyName: "nextPaginator", first: true, predicate: ["nextPaginator"], descendants: true }, { propertyName: "previousPaginator", first: true, predicate: ["previousPaginator"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-tab-header__pagination kbq-tab-header__pagination_before\"\n     #previousPaginator\n     [class.kbq-disabled]=\"disableScrollBefore\"\n     (click)=\"handlePaginatorClick('before')\"\n     (mousedown)=\"handlePaginatorPress('before', $event)\"\n     (touchend)=\"stopInterval()\">\n\n    <i kbq-icon=\"mc-angle-left-M_16\"></i>\n</div>\n\n<div class=\"kbq-tab-header__content\"\n     #tabListContainer\n     (keydown)=\"handleKeydown($event)\">\n\n    <div class=\"kbq-tab-list\"\n         #tabList\n         (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n\n<div class=\"kbq-tab-header__pagination kbq-tab-header__pagination_after\"\n     #nextPaginator\n     [class.kbq-disabled]=\"disableScrollAfter\"\n     (mousedown)=\"handlePaginatorPress('after', $event)\"\n     (click)=\"handlePaginatorClick('after')\"\n     (touchend)=\"stopInterval()\">\n\n    <i kbq-icon=\"mc-angle-right-M_16\"></i>\n</div>\n", styles: [".kbq-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.kbq-tab-list__content{display:flex}.kbq-tab-group_align-labels-center .kbq-tab-list__content{justify-content:center}.kbq-tab-group_align-labels-end .kbq-tab-list__content{justify-content:flex-end}.kbq-tab-header_vertical .kbq-tab-list__content{flex-direction:column}.kbq-tab-header__pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding-left:12px;padding-right:12px}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__content{display:flex;flex-grow:1;z-index:1;overflow:hidden}.kbq-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-label{position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical, 6px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal, 12px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width, 2px);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius, 8px);outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-tab-label.kbq-selected{cursor:default}.kbq-tab-label.cdk-keyboard-focused{z-index:1}.kbq-tab-label.kbq-disabled{pointer-events:none}.kbq-tab-label .kbq-tab-label__content{display:flex;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal, 4px)}.kbq-tab-label.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-label.kbq-tab-label_vertical .kbq-tab-label__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-group_stretch-labels .kbq-tab-label{flex-basis:0;flex-grow:1}\n"], dependencies: [{ kind: "component", type: i4.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqTabHeader, selector: "kbq-tab-header", inputs: { selectedIndex: "selectedIndex", vertical: "vertical" }, outputs: { selectFocusedIndex: "selectFocusedIndex", indexFocused: "indexFocused" }, host: { properties: { "class.kbq-tab-header_vertical": "vertical", "class.kbq-tab-header__pagination-controls_enabled": "showPaginationControls", "class.kbq-tab-header_rtl": "getLayoutDirection() == 'rtl'" }, classAttribute: "kbq-tab-header" }, queries: [{ propertyName: "items", predicate: KbqTabLabelWrapper }], viewQueries: [{ propertyName: "tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, static: true }, { propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true, static: true }, { propertyName: "nextPaginator", first: true, predicate: ["nextPaginator"], descendants: true }, { propertyName: "previousPaginator", first: true, predicate: ["previousPaginator"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    #previousPaginator\n    class=\"kbq-tab-header__pagination kbq-tab-header__pagination_before\"\n    [class.kbq-disabled]=\"disableScrollBefore\"\n    (click)=\"handlePaginatorClick('before')\"\n    (mousedown)=\"handlePaginatorPress('before', $event)\"\n    (touchend)=\"stopInterval()\"\n>\n    <i kbq-icon=\"mc-angle-left-M_16\"></i>\n</div>\n\n<div\n    #tabListContainer\n    class=\"kbq-tab-header__content\"\n    (keydown)=\"handleKeydown($event)\"\n>\n    <div\n        #tabList\n        class=\"kbq-tab-list\"\n        (cdkObserveContent)=\"onContentChanges()\"\n    >\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n        </div>\n    </div>\n</div>\n\n<div\n    #nextPaginator\n    class=\"kbq-tab-header__pagination kbq-tab-header__pagination_after\"\n    [class.kbq-disabled]=\"disableScrollAfter\"\n    (click)=\"handlePaginatorClick('after')\"\n    (mousedown)=\"handlePaginatorPress('after', $event)\"\n    (touchend)=\"stopInterval()\"\n>\n    <i kbq-icon=\"mc-angle-right-M_16\"></i>\n</div>\n", styles: [".kbq-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.kbq-tab-list__content{display:flex}.kbq-tab-group_align-labels-center .kbq-tab-list__content{justify-content:center}.kbq-tab-group_align-labels-end .kbq-tab-list__content{justify-content:flex-end}.kbq-tab-header_vertical .kbq-tab-list__content{flex-direction:column}.kbq-tab-header__pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding-left:12px;padding-right:12px}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__content{display:flex;flex-grow:1;z-index:1;overflow:hidden}.kbq-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-label{position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical, 6px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal, 12px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width, 2px);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius, 8px);outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-tab-label.kbq-selected{cursor:default}.kbq-tab-label.cdk-keyboard-focused{z-index:1}.kbq-tab-label.kbq-disabled{pointer-events:none}.kbq-tab-label .kbq-tab-label__content{display:flex;align-items:center;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal, 4px)}.kbq-tab-label.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-label.kbq-tab-label_vertical .kbq-tab-label__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-group_stretch-labels .kbq-tab-label{flex-basis:0;flex-grow:1}\n"], dependencies: [{ kind: "component", type: i4.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTabHeader, decorators: [{
             type: Component,
@@ -955,8 +946,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                         class: 'kbq-tab-header',
                         '[class.kbq-tab-header_vertical]': 'vertical',
                         '[class.kbq-tab-header__pagination-controls_enabled]': 'showPaginationControls',
-                        '[class.kbq-tab-header_rtl]': 'getLayoutDirection() == \'rtl\''
-                    }, template: "<div class=\"kbq-tab-header__pagination kbq-tab-header__pagination_before\"\n     #previousPaginator\n     [class.kbq-disabled]=\"disableScrollBefore\"\n     (click)=\"handlePaginatorClick('before')\"\n     (mousedown)=\"handlePaginatorPress('before', $event)\"\n     (touchend)=\"stopInterval()\">\n\n    <i kbq-icon=\"mc-angle-left-M_16\"></i>\n</div>\n\n<div class=\"kbq-tab-header__content\"\n     #tabListContainer\n     (keydown)=\"handleKeydown($event)\">\n\n    <div class=\"kbq-tab-list\"\n         #tabList\n         (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n\n<div class=\"kbq-tab-header__pagination kbq-tab-header__pagination_after\"\n     #nextPaginator\n     [class.kbq-disabled]=\"disableScrollAfter\"\n     (mousedown)=\"handlePaginatorPress('after', $event)\"\n     (click)=\"handlePaginatorClick('after')\"\n     (touchend)=\"stopInterval()\">\n\n    <i kbq-icon=\"mc-angle-right-M_16\"></i>\n</div>\n", styles: [".kbq-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.kbq-tab-list__content{display:flex}.kbq-tab-group_align-labels-center .kbq-tab-list__content{justify-content:center}.kbq-tab-group_align-labels-end .kbq-tab-list__content{justify-content:flex-end}.kbq-tab-header_vertical .kbq-tab-list__content{flex-direction:column}.kbq-tab-header__pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding-left:12px;padding-right:12px}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__content{display:flex;flex-grow:1;z-index:1;overflow:hidden}.kbq-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-label{position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical, 6px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal, 12px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width, 2px);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius, 8px);outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-tab-label.kbq-selected{cursor:default}.kbq-tab-label.cdk-keyboard-focused{z-index:1}.kbq-tab-label.kbq-disabled{pointer-events:none}.kbq-tab-label .kbq-tab-label__content{display:flex;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal, 4px)}.kbq-tab-label.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-label.kbq-tab-label_vertical .kbq-tab-label__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-group_stretch-labels .kbq-tab-label{flex-basis:0;flex-grow:1}\n"] }]
+                        '[class.kbq-tab-header_rtl]': "getLayoutDirection() == 'rtl'"
+                    }, template: "<div\n    #previousPaginator\n    class=\"kbq-tab-header__pagination kbq-tab-header__pagination_before\"\n    [class.kbq-disabled]=\"disableScrollBefore\"\n    (click)=\"handlePaginatorClick('before')\"\n    (mousedown)=\"handlePaginatorPress('before', $event)\"\n    (touchend)=\"stopInterval()\"\n>\n    <i kbq-icon=\"mc-angle-left-M_16\"></i>\n</div>\n\n<div\n    #tabListContainer\n    class=\"kbq-tab-header__content\"\n    (keydown)=\"handleKeydown($event)\"\n>\n    <div\n        #tabList\n        class=\"kbq-tab-list\"\n        (cdkObserveContent)=\"onContentChanges()\"\n    >\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n        </div>\n    </div>\n</div>\n\n<div\n    #nextPaginator\n    class=\"kbq-tab-header__pagination kbq-tab-header__pagination_after\"\n    [class.kbq-disabled]=\"disableScrollAfter\"\n    (click)=\"handlePaginatorClick('after')\"\n    (mousedown)=\"handlePaginatorPress('after', $event)\"\n    (touchend)=\"stopInterval()\"\n>\n    <i kbq-icon=\"mc-angle-right-M_16\"></i>\n</div>\n", styles: [".kbq-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.kbq-tab-list__content{display:flex}.kbq-tab-group_align-labels-center .kbq-tab-list__content{justify-content:center}.kbq-tab-group_align-labels-end .kbq-tab-list__content{justify-content:flex-end}.kbq-tab-header_vertical .kbq-tab-list__content{flex-direction:column}.kbq-tab-header__pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding-left:12px;padding-right:12px}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__content{display:flex;flex-grow:1;z-index:1;overflow:hidden}.kbq-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-label{position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical, 6px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal, 12px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width, 2px);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius, 8px);outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-tab-label.kbq-selected{cursor:default}.kbq-tab-label.cdk-keyboard-focused{z-index:1}.kbq-tab-label.kbq-disabled{pointer-events:none}.kbq-tab-label .kbq-tab-label__content{display:flex;align-items:center;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal, 4px)}.kbq-tab-label.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-label.kbq-tab-label_vertical .kbq-tab-label__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-group_stretch-labels .kbq-tab-label{flex-basis:0;flex-grow:1}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ViewportRuler }, { type: i0.NgZone }, { type: i2.Platform }, { type: i3.Directionality, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -1067,8 +1058,9 @@ class KbqTabGroup extends KbqTabGroupMixinBase {
             case 'number':
                 return this.tabs.get(this.clampTabIndex(this.attributeToSelectBy)) || null;
             case 'string':
-                return this.tabs.toArray()
-                    .find(({ tabId }) => tabId === this.attributeToSelectBy) || this.tabs.get(0) || null;
+                return (this.tabs.toArray().find(({ tabId }) => tabId === this.attributeToSelectBy) ||
+                    this.tabs.get(0) ||
+                    null);
             case 'function':
                 return this.attributeToSelectBy(this.tabs.toArray());
             default:
@@ -1108,8 +1100,7 @@ class KbqTabGroup extends KbqTabGroupMixinBase {
         this.resizeSubscription = Subscription.EMPTY;
         this.resizeDebounceInterval = 100;
         this.checkOverflow = () => {
-            this.tabHeader.items
-                .forEach((headerTab) => headerTab.checkOverflow());
+            this.tabHeader.items.forEach((headerTab) => headerTab.checkOverflow());
         };
         this.vertical = coerceBooleanProperty(vertical);
         this.groupId = nextId++;
@@ -1136,7 +1127,7 @@ class KbqTabGroup extends KbqTabGroupMixinBase {
             // Changing these values after change detection has run
             // since the checked content may contain references to them.
             Promise.resolve().then(() => {
-                this.tabs.forEach((tab, index) => tab.isActive = index === indexToSelect);
+                this.tabs.forEach((tab, index) => (tab.isActive = index === indexToSelect));
                 if (!isFirstRun) {
                     const tabToSelect = this.activeTab;
                     this.selectedIndexChange.emit(indexToSelect);
@@ -1164,8 +1155,7 @@ class KbqTabGroup extends KbqTabGroupMixinBase {
         this.subscribeToTabLabels();
         // Subscribe to changes in the amount of tabs, in order to be
         // able to re-render the content as new tabs are added or removed.
-        this.tabsSubscription = this.tabs.changes
-            .subscribe(() => {
+        this.tabsSubscription = this.tabs.changes.subscribe(() => {
             // const indexToSelect = this.clampTabIndex(this.indexToSelect);
             const indexToSelect = this.getTabIndexToSelect();
             // Maintain the previously-selected tab if a new tab is added or removed and there is no
@@ -1268,8 +1258,7 @@ class KbqTabGroup extends KbqTabGroupMixinBase {
         if (this.tabLabelSubscription) {
             this.tabLabelSubscription.unsubscribe();
         }
-        this.tabLabelSubscription = merge(...this.tabs.map((tab) => tab.stateChanges))
-            .subscribe(() => this.changeDetectorRef.markForCheck());
+        this.tabLabelSubscription = merge(...this.tabs.map((tab) => tab.stateChanges)).subscribe(() => this.changeDetectorRef.markForCheck());
     }
     subscribeToResize() {
         if (!this.vertical) {
@@ -1297,7 +1286,7 @@ class KbqTabGroup extends KbqTabGroupMixinBase {
         return this.tabs?.toArray().indexOf(currentSelectedTab);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTabGroup, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: 'vertical', attribute: true }, { token: KBQ_TABS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqTabGroup, selector: "kbq-tab-group", inputs: { disabled: "disabled", transparent: "transparent", onSurface: "onSurface", dynamicHeight: "dynamicHeight", selectedIndex: "selectedIndex", activeTab: "activeTab", headerPosition: "headerPosition", animationDuration: "animationDuration" }, outputs: { selectedIndexChange: "selectedIndexChange", activeTabChange: "activeTabChange", focusChange: "focusChange", animationDone: "animationDone", selectedTabChange: "selectedTabChange" }, host: { listeners: { "window:resize": "resizeStream.next($event)" }, properties: { "class.kbq-tab-group_filled": "!transparent", "class.kbq-tab-group_transparent": "transparent", "class.kbq-tab-group_on-background": "!onSurface", "class.kbq-tab-group_on-surface": "onSurface", "class.kbq-tab-group_dynamic-height": "dynamicHeight", "class.kbq-tab-group_inverted-header": "headerPosition === \"below\"" }, classAttribute: "kbq-tab-group" }, providers: [{ provide: KBQ_PARENT_ANIMATION_COMPONENT, useExisting: forwardRef((() => this)) }], queries: [{ propertyName: "tabs", predicate: KbqTab }], viewQueries: [{ propertyName: "tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true }, { propertyName: "tabHeader", first: true, predicate: ["tabHeader"], descendants: true }], exportAs: ["kbqTabGroup"], usesInheritance: true, ngImport: i0, template: "<kbq-tab-header\n    #tabHeader\n    [vertical]=\"vertical\"\n    [selectedIndex]=\"selectedIndex\"\n    (indexFocused)=\"focusChanged($event)\"\n    (selectFocusedIndex)=\"onSelectFocusedIndex($event)\">\n\n    <div class=\"kbq-tab-label\"\n         kbqTabLabelWrapper\n         cdkMonitorElementFocus\n         [attr.tabindex]=\"getTabIndex(tab, i)\"\n         [class.kbq-tab-label_horizontal]=\"!vertical\"\n         [class.kbq-tab-label_vertical]=\"vertical\"\n         [class.kbq-tab-label_empty]=\"tab.empty\"\n         [class.kbq-selected]=\"selectedIndex == i\"\n         *ngFor=\"let tab of tabs; let i = index\"\n         [tab]=\"tab\"\n         [id]=\"getTabLabelId(i)\"\n         [disabled]=\"tab.disabled\"\n         (click)=\"handleClick(tab, tabHeader, i)\"\n\n         [kbqTooltip]=\"tab.tooltipTitle\"\n         [kbqTooltipDisabled]=\"!tab.empty && !tab.isOverflown\"\n         [kbqTrigger]=\"'hover, focus'\"\n         [kbqPlacement]=\"tab.tooltipPlacement\">\n\n        <div #labelContent class=\"kbq-tab-label__content\"\n            [class.kbq-tab-label__template]=\"tab.templateLabel\">\n            <!-- If there is a label template, use it. -->\n            <ng-template [ngIf]=\"tab.templateLabel\">\n                <ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template>\n            </ng-template>\n\n            <!-- If there is not a label template, fall back to the text label. -->\n            <ng-template [ngIf]=\"!tab.templateLabel\">{{ tab.textLabel }}</ng-template>\n        </div>\n    </div>\n</kbq-tab-header>\n\n<div class=\"kbq-tab-body__wrapper\" #tabBodyWrapper>\n    <kbq-tab-body\n        *ngFor=\"let tab of tabs; let i = index\"\n        [id]=\"getTabContentId(i)\"\n        [class.kbq-tab-body__active]=\"selectedIndex == i\"\n        [content]=\"tab.content!\"\n        [position]=\"tab.position!\"\n        [origin]=\"tab.origin!\"\n        [animationDuration]=\"animationDuration\"\n        (onCentered)=\"removeTabBodyWrapperHeight()\"\n        (onCentering)=\"setTabBodyWrapperHeight($event)\">\n    </kbq-tab-body>\n</div>\n", styles: [".kbq-tab-group{display:flex;flex-direction:column;box-sizing:border-box;text-align:left}.kbq-tab-group.kbq-tab-group_inverted-header{flex-direction:column-reverse}.kbq-tab-group_vertical{flex-direction:row}.kbq-tab-group_vertical .kbq-tab-list__content{gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical, 8px) 0}.kbq-tab-group_vertical .kbq-tab-header__content{overflow-y:auto}.kbq-tab-body__wrapper{display:flex;overflow:hidden;position:relative}.kbq-tab-body{inset:0;position:absolute;display:block;overflow:hidden}.kbq-tab-body.kbq-tab-body__active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.kbq-tab-group.kbq-tab-group_dynamic-height .kbq-tab-body.kbq-tab-body__active{overflow-y:hidden}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i1$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i4$1.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqVisible", "kbqPlacement", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipColor"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "directive", type: KbqTabLabelWrapper, selector: "[kbqTabLabelWrapper]", inputs: ["disabled", "tab"] }, { kind: "component", type: KbqTabBody, selector: "kbq-tab-body", inputs: ["position", "content", "origin", "animationDuration"], outputs: ["onCentering", "beforeCentering", "afterLeavingCenter", "onCentered"] }, { kind: "component", type: KbqTabHeader, selector: "kbq-tab-header", inputs: ["selectedIndex", "vertical"], outputs: ["selectFocusedIndex", "indexFocused"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqTabGroup, selector: "kbq-tab-group", inputs: { disabled: "disabled", transparent: "transparent", onSurface: "onSurface", dynamicHeight: "dynamicHeight", selectedIndex: "selectedIndex", activeTab: "activeTab", headerPosition: "headerPosition", animationDuration: "animationDuration" }, outputs: { selectedIndexChange: "selectedIndexChange", activeTabChange: "activeTabChange", focusChange: "focusChange", animationDone: "animationDone", selectedTabChange: "selectedTabChange" }, host: { listeners: { "window:resize": "resizeStream.next($event)" }, properties: { "class.kbq-tab-group_filled": "!transparent", "class.kbq-tab-group_transparent": "transparent", "class.kbq-tab-group_on-background": "!onSurface", "class.kbq-tab-group_on-surface": "onSurface", "class.kbq-tab-group_dynamic-height": "dynamicHeight", "class.kbq-tab-group_inverted-header": "headerPosition === \"below\"" }, classAttribute: "kbq-tab-group" }, providers: [{ provide: KBQ_PARENT_ANIMATION_COMPONENT, useExisting: forwardRef((() => this)) }], queries: [{ propertyName: "tabs", predicate: KbqTab }], viewQueries: [{ propertyName: "tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true }, { propertyName: "tabHeader", first: true, predicate: ["tabHeader"], descendants: true }], exportAs: ["kbqTabGroup"], usesInheritance: true, ngImport: i0, template: "<kbq-tab-header\n    #tabHeader\n    [selectedIndex]=\"selectedIndex\"\n    [vertical]=\"vertical\"\n    (indexFocused)=\"focusChanged($event)\"\n    (selectFocusedIndex)=\"onSelectFocusedIndex($event)\"\n>\n    <div\n        *ngFor=\"let tab of tabs; let i = index\"\n        cdkMonitorElementFocus\n        kbqTabLabelWrapper\n        class=\"kbq-tab-label\"\n        [attr.tabindex]=\"getTabIndex(tab, i)\"\n        [class.kbq-selected]=\"selectedIndex === i\"\n        [class.kbq-tab-label_empty]=\"tab.empty\"\n        [class.kbq-tab-label_horizontal]=\"!vertical\"\n        [class.kbq-tab-label_vertical]=\"vertical\"\n        [disabled]=\"tab.disabled\"\n        [id]=\"getTabLabelId(i)\"\n        [kbqPlacement]=\"tab.tooltipPlacement\"\n        [kbqTooltip]=\"tab.tooltipTitle\"\n        [kbqTooltipDisabled]=\"!tab.empty && !tab.isOverflown\"\n        [kbqTrigger]=\"'hover, focus'\"\n        [tab]=\"tab\"\n        (click)=\"handleClick(tab, tabHeader, i)\"\n    >\n        <div\n            #labelContent\n            class=\"kbq-tab-label__content\"\n            [class.kbq-tab-label__template]=\"tab.templateLabel\"\n        >\n            <!-- If there is a label template, use it. -->\n            <ng-template [ngIf]=\"tab.templateLabel\">\n                <ng-template [cdkPortalOutlet]=\"tab.templateLabel\" />\n            </ng-template>\n\n            <!-- If there is not a label template, fall back to the text label. -->\n            <ng-template [ngIf]=\"!tab.templateLabel\">{{ tab.textLabel }}</ng-template>\n        </div>\n    </div>\n</kbq-tab-header>\n\n<div\n    #tabBodyWrapper\n    class=\"kbq-tab-body__wrapper\"\n>\n    <kbq-tab-body\n        *ngFor=\"let tab of tabs; let i = index\"\n        [animationDuration]=\"animationDuration\"\n        [class.kbq-tab-body__active]=\"selectedIndex === i\"\n        [content]=\"tab.content!\"\n        [id]=\"getTabContentId(i)\"\n        [origin]=\"tab.origin!\"\n        [position]=\"tab.position!\"\n        (onCentered)=\"removeTabBodyWrapperHeight()\"\n        (onCentering)=\"setTabBodyWrapperHeight($event)\"\n    />\n</div>\n", styles: [".kbq-tab-group{display:flex;flex-direction:column;box-sizing:border-box;text-align:left}.kbq-tab-group.kbq-tab-group_inverted-header{flex-direction:column-reverse}.kbq-tab-group_vertical{flex-direction:row}.kbq-tab-group_vertical .kbq-tab-list__content{gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical, 8px) 0}.kbq-tab-group_vertical .kbq-tab-header__content{overflow-y:auto}.kbq-tab-body__wrapper{display:flex;overflow:hidden;position:relative}.kbq-tab-body{inset:0;position:absolute;display:block;overflow:hidden}.kbq-tab-body.kbq-tab-body__active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.kbq-tab-group.kbq-tab-group_dynamic-height .kbq-tab-body.kbq-tab-body__active{overflow-y:hidden}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i1$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i4$1.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqVisible", "kbqPlacement", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipColor"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "directive", type: KbqTabLabelWrapper, selector: "[kbqTabLabelWrapper]", inputs: ["disabled", "tab"] }, { kind: "component", type: KbqTabBody, selector: "kbq-tab-body", inputs: ["position", "content", "origin", "animationDuration"], outputs: ["onCentering", "beforeCentering", "afterLeavingCenter", "onCentered"] }, { kind: "component", type: KbqTabHeader, selector: "kbq-tab-header", inputs: ["selectedIndex", "vertical"], outputs: ["selectFocusedIndex", "indexFocused"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTabGroup, decorators: [{
             type: Component,
@@ -1310,7 +1299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                         '[class.kbq-tab-group_dynamic-height]': 'dynamicHeight',
                         '[class.kbq-tab-group_inverted-header]': 'headerPosition === "below"',
                         '(window:resize)': 'resizeStream.next($event)'
-                    }, providers: [{ provide: KBQ_PARENT_ANIMATION_COMPONENT, useExisting: forwardRef((() => this)) }], template: "<kbq-tab-header\n    #tabHeader\n    [vertical]=\"vertical\"\n    [selectedIndex]=\"selectedIndex\"\n    (indexFocused)=\"focusChanged($event)\"\n    (selectFocusedIndex)=\"onSelectFocusedIndex($event)\">\n\n    <div class=\"kbq-tab-label\"\n         kbqTabLabelWrapper\n         cdkMonitorElementFocus\n         [attr.tabindex]=\"getTabIndex(tab, i)\"\n         [class.kbq-tab-label_horizontal]=\"!vertical\"\n         [class.kbq-tab-label_vertical]=\"vertical\"\n         [class.kbq-tab-label_empty]=\"tab.empty\"\n         [class.kbq-selected]=\"selectedIndex == i\"\n         *ngFor=\"let tab of tabs; let i = index\"\n         [tab]=\"tab\"\n         [id]=\"getTabLabelId(i)\"\n         [disabled]=\"tab.disabled\"\n         (click)=\"handleClick(tab, tabHeader, i)\"\n\n         [kbqTooltip]=\"tab.tooltipTitle\"\n         [kbqTooltipDisabled]=\"!tab.empty && !tab.isOverflown\"\n         [kbqTrigger]=\"'hover, focus'\"\n         [kbqPlacement]=\"tab.tooltipPlacement\">\n\n        <div #labelContent class=\"kbq-tab-label__content\"\n            [class.kbq-tab-label__template]=\"tab.templateLabel\">\n            <!-- If there is a label template, use it. -->\n            <ng-template [ngIf]=\"tab.templateLabel\">\n                <ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template>\n            </ng-template>\n\n            <!-- If there is not a label template, fall back to the text label. -->\n            <ng-template [ngIf]=\"!tab.templateLabel\">{{ tab.textLabel }}</ng-template>\n        </div>\n    </div>\n</kbq-tab-header>\n\n<div class=\"kbq-tab-body__wrapper\" #tabBodyWrapper>\n    <kbq-tab-body\n        *ngFor=\"let tab of tabs; let i = index\"\n        [id]=\"getTabContentId(i)\"\n        [class.kbq-tab-body__active]=\"selectedIndex == i\"\n        [content]=\"tab.content!\"\n        [position]=\"tab.position!\"\n        [origin]=\"tab.origin!\"\n        [animationDuration]=\"animationDuration\"\n        (onCentered)=\"removeTabBodyWrapperHeight()\"\n        (onCentering)=\"setTabBodyWrapperHeight($event)\">\n    </kbq-tab-body>\n</div>\n", styles: [".kbq-tab-group{display:flex;flex-direction:column;box-sizing:border-box;text-align:left}.kbq-tab-group.kbq-tab-group_inverted-header{flex-direction:column-reverse}.kbq-tab-group_vertical{flex-direction:row}.kbq-tab-group_vertical .kbq-tab-list__content{gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical, 8px) 0}.kbq-tab-group_vertical .kbq-tab-header__content{overflow-y:auto}.kbq-tab-body__wrapper{display:flex;overflow:hidden;position:relative}.kbq-tab-body{inset:0;position:absolute;display:block;overflow:hidden}.kbq-tab-body.kbq-tab-body__active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.kbq-tab-group.kbq-tab-group_dynamic-height .kbq-tab-body.kbq-tab-body__active{overflow-y:hidden}\n"] }]
+                    }, providers: [{ provide: KBQ_PARENT_ANIMATION_COMPONENT, useExisting: forwardRef((() => this)) }], template: "<kbq-tab-header\n    #tabHeader\n    [selectedIndex]=\"selectedIndex\"\n    [vertical]=\"vertical\"\n    (indexFocused)=\"focusChanged($event)\"\n    (selectFocusedIndex)=\"onSelectFocusedIndex($event)\"\n>\n    <div\n        *ngFor=\"let tab of tabs; let i = index\"\n        cdkMonitorElementFocus\n        kbqTabLabelWrapper\n        class=\"kbq-tab-label\"\n        [attr.tabindex]=\"getTabIndex(tab, i)\"\n        [class.kbq-selected]=\"selectedIndex === i\"\n        [class.kbq-tab-label_empty]=\"tab.empty\"\n        [class.kbq-tab-label_horizontal]=\"!vertical\"\n        [class.kbq-tab-label_vertical]=\"vertical\"\n        [disabled]=\"tab.disabled\"\n        [id]=\"getTabLabelId(i)\"\n        [kbqPlacement]=\"tab.tooltipPlacement\"\n        [kbqTooltip]=\"tab.tooltipTitle\"\n        [kbqTooltipDisabled]=\"!tab.empty && !tab.isOverflown\"\n        [kbqTrigger]=\"'hover, focus'\"\n        [tab]=\"tab\"\n        (click)=\"handleClick(tab, tabHeader, i)\"\n    >\n        <div\n            #labelContent\n            class=\"kbq-tab-label__content\"\n            [class.kbq-tab-label__template]=\"tab.templateLabel\"\n        >\n            <!-- If there is a label template, use it. -->\n            <ng-template [ngIf]=\"tab.templateLabel\">\n                <ng-template [cdkPortalOutlet]=\"tab.templateLabel\" />\n            </ng-template>\n\n            <!-- If there is not a label template, fall back to the text label. -->\n            <ng-template [ngIf]=\"!tab.templateLabel\">{{ tab.textLabel }}</ng-template>\n        </div>\n    </div>\n</kbq-tab-header>\n\n<div\n    #tabBodyWrapper\n    class=\"kbq-tab-body__wrapper\"\n>\n    <kbq-tab-body\n        *ngFor=\"let tab of tabs; let i = index\"\n        [animationDuration]=\"animationDuration\"\n        [class.kbq-tab-body__active]=\"selectedIndex === i\"\n        [content]=\"tab.content!\"\n        [id]=\"getTabContentId(i)\"\n        [origin]=\"tab.origin!\"\n        [position]=\"tab.position!\"\n        (onCentered)=\"removeTabBodyWrapperHeight()\"\n        (onCentering)=\"setTabBodyWrapperHeight($event)\"\n    />\n</div>\n", styles: [".kbq-tab-group{display:flex;flex-direction:column;box-sizing:border-box;text-align:left}.kbq-tab-group.kbq-tab-group_inverted-header{flex-direction:column-reverse}.kbq-tab-group_vertical{flex-direction:row}.kbq-tab-group_vertical .kbq-tab-list__content{gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical, 8px) 0}.kbq-tab-group_vertical .kbq-tab-header__content{overflow-y:auto}.kbq-tab-body__wrapper{display:flex;overflow:hidden;position:relative}.kbq-tab-body{inset:0;position:absolute;display:block;overflow:hidden}.kbq-tab-body.kbq-tab-body__active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.kbq-tab-group.kbq-tab-group_dynamic-height .kbq-tab-body.kbq-tab-body__active{overflow-y:hidden}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Attribute,
                     args: ['vertical']
@@ -1360,10 +1349,46 @@ class KbqTabLinkBase {
 }
 /** @docs-private */
 const KbqTabLinkMixinBase = mixinTabIndex(mixinDisabled(KbqTabLinkBase));
+/**
+ * Navigation component matching the styles of the tab group header.
+ */
+class KbqTabNav {
+    constructor(vertical) {
+        this.vertical = false;
+        this.transparent = false;
+        this.onSurface = false;
+        this.vertical = coerceBooleanProperty(vertical);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTabNav, deps: [{ token: 'vertical', attribute: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqTabNav, selector: "[kbq-tab-nav-bar]", inputs: { transparent: "transparent", onSurface: "onSurface" }, host: { properties: { "class.kbq-tab-nav-bar_filled": "!transparent", "class.kbq-tab-nav-bar_transparent": "transparent", "class.kbq-tab-nav-bar_on-background": "!onSurface", "class.kbq-tab-nav-bar_on-surface": "onSurface" }, classAttribute: "kbq-tab-nav-bar" }, queries: [{ propertyName: "links", predicate: i0.forwardRef(() => KbqTabLink) }], exportAs: ["kbqTabNavBar", "kbqTabNav"], ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-tab-link{vertical-align:top;text-decoration:none;-webkit-tap-highlight-color:transparent;position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical, 6px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal, 12px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width, 2px);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius, 8px);outline:none}.kbq-tab-link.kbq-selected{cursor:default}.kbq-tab-link.cdk-keyboard-focused{z-index:1}.kbq-tab-link.kbq-disabled{pointer-events:none}.kbq-tab-link .kbq-tab-label__content{display:flex;align-items:center;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal, 4px)}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-link .kbq-tab-group_stretch-labels .kbq-tab-link{flex-basis:0;flex-grow:1}.kbq-tab-nav-bar{display:flex;flex-grow:1;position:relative}.kbq-tab-nav-bar .kbq-tab-group_align-labels-center{justify-content:center}.kbq-tab-nav-bar .kbq-tab-group_align-labels-end{justify-content:flex-end}.kbq-tab-nav-bar.kbq-tab-group_vertical{flex-direction:column;flex-grow:0;gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical, 8px) 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTabNav, decorators: [{
+            type: Component,
+            args: [{ selector: '[kbq-tab-nav-bar]', exportAs: 'kbqTabNavBar, kbqTabNav', template: '<ng-content />', host: {
+                        class: 'kbq-tab-nav-bar',
+                        '[class.kbq-tab-nav-bar_filled]': '!transparent',
+                        '[class.kbq-tab-nav-bar_transparent]': 'transparent',
+                        '[class.kbq-tab-nav-bar_on-background]': '!onSurface',
+                        '[class.kbq-tab-nav-bar_on-surface]': 'onSurface'
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kbq-tab-link{vertical-align:top;text-decoration:none;-webkit-tap-highlight-color:transparent;position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical, 6px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal, 12px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width, 2px);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius, 8px);outline:none}.kbq-tab-link.kbq-selected{cursor:default}.kbq-tab-link.cdk-keyboard-focused{z-index:1}.kbq-tab-link.kbq-disabled{pointer-events:none}.kbq-tab-link .kbq-tab-label__content{display:flex;align-items:center;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal, 4px)}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-link .kbq-tab-group_stretch-labels .kbq-tab-link{flex-basis:0;flex-grow:1}.kbq-tab-nav-bar{display:flex;flex-grow:1;position:relative}.kbq-tab-nav-bar .kbq-tab-group_align-labels-center{justify-content:center}.kbq-tab-nav-bar .kbq-tab-group_align-labels-end{justify-content:flex-end}.kbq-tab-nav-bar.kbq-tab-group_vertical{flex-direction:column;flex-grow:0;gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical, 8px) 0}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['vertical']
+                }] }], propDecorators: { transparent: [{
+                type: Input
+            }], onSurface: [{
+                type: Input
+            }], links: [{
+                type: ContentChildren,
+                args: [forwardRef(() => KbqTabLink)]
+            }] } });
 /**
  * Link inside of a `kbq-tab-nav-bar`.
  */
 class KbqTabLink extends KbqTabLinkMixinBase {
+    get vertical() {
+        return this.tabNav.vertical;
+    }
     /** Whether the link is active. */
     get active() {
         return this.isActive;
@@ -1373,12 +1398,12 @@ class KbqTabLink extends KbqTabLinkMixinBase {
             this.isActive = value;
         }
     }
-    constructor(elementRef, focusMonitor, renderer) {
+    constructor(elementRef, focusMonitor, renderer, tabNav) {
         super();
         this.elementRef = elementRef;
         this.focusMonitor = focusMonitor;
         this.renderer = renderer;
-        this.vertical = false;
+        this.tabNav = tabNav;
         /** Whether the tab link is active or not. */
         this.isActive = false;
         this.focusMonitor.monitor(this.elementRef.nativeElement);
@@ -1406,15 +1431,15 @@ class KbqTabLink extends KbqTabLinkMixinBase {
             this.renderer.addClass(secondIconElement, 'kbq-icon_right');
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTabLink, deps: [{ token: i0.ElementRef }, { token: i1$2.FocusMonitor }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqTabLink, selector: "a[kbq-tab-link], a[kbqTabLink]", inputs: { disabled: "disabled", tabIndex: "tabIndex", active: "active" }, host: { properties: { "class.kbq-selected": "active", "class.kbq-tab-label_vertical": "vertical", "class.kbq-tab-label_horizontal": "!vertical", "class.kbq-disabled": "disabled", "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" }, classAttribute: "kbq-tab-link" }, exportAs: ["kbqTabLink"], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTabLink, deps: [{ token: i0.ElementRef }, { token: i1$2.FocusMonitor }, { token: i0.Renderer2 }, { token: KbqTabNav }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqTabLink, selector: "a[kbq-tab-link], a[kbqTabLink]", inputs: { disabled: "disabled", tabIndex: "tabIndex", active: "active" }, host: { properties: { "class.kbq-selected": "active", "class.kbq-tab-label_vertical": "vertical", "class.kbq-tab-label_horizontal": "!vertical", "class.kbq-disabled": "disabled", "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" }, classAttribute: "kbq-tab-link" }, exportAs: ["kbqTabLink"], usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTabLink, decorators: [{
             type: Component,
             args: [{
                     selector: 'a[kbq-tab-link], a[kbqTabLink]',
                     exportAs: 'kbqTabLink',
-                    template: '<ng-content></ng-content>',
+                    template: '<ng-content />',
                     inputs: ['disabled', 'tabIndex'],
                     host: {
                         class: 'kbq-tab-link',
@@ -1424,50 +1449,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                         '[class.kbq-disabled]': 'disabled',
                         '[attr.tabindex]': 'tabIndex',
                         '[attr.disabled]': 'disabled || null'
-                    }
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.FocusMonitor }, { type: i0.Renderer2 }], propDecorators: { active: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.FocusMonitor }, { type: i0.Renderer2 }, { type: KbqTabNav }], propDecorators: { active: [{
                 type: Input
             }] } });
-/**
- * Navigation component matching the styles of the tab group header.
- */
-class KbqTabNav {
-    constructor(vertical) {
-        this.vertical = false;
-        this.transparent = false;
-        this.onSurface = false;
-        this.vertical = coerceBooleanProperty(vertical);
-    }
-    ngAfterContentInit() {
-        this.links.changes
-            .pipe(delay(0))
-            .subscribe((links) => links.forEach((link) => link.vertical = this.vertical));
-        this.links.notifyOnChanges();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTabNav, deps: [{ token: 'vertical', attribute: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqTabNav, selector: "[kbq-tab-nav-bar]", inputs: { transparent: "transparent", onSurface: "onSurface" }, host: { properties: { "class.kbq-tab-nav-bar_filled": "!transparent", "class.kbq-tab-nav-bar_transparent": "transparent", "class.kbq-tab-nav-bar_on-background": "!onSurface", "class.kbq-tab-nav-bar_on-surface": "onSurface" }, classAttribute: "kbq-tab-nav-bar" }, queries: [{ propertyName: "links", predicate: KbqTabLink }], exportAs: ["kbqTabNavBar", "kbqTabNav"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".kbq-tab-link{vertical-align:top;text-decoration:none;-webkit-tap-highlight-color:transparent;position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical, 6px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal, 12px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width, 2px);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius, 8px);outline:none}.kbq-tab-link.kbq-selected{cursor:default}.kbq-tab-link.cdk-keyboard-focused{z-index:1}.kbq-tab-link.kbq-disabled{pointer-events:none}.kbq-tab-link .kbq-tab-label__content{display:flex;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal, 4px)}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-link .kbq-tab-group_stretch-labels .kbq-tab-link{flex-basis:0;flex-grow:1}.kbq-tab-nav-bar{display:flex;flex-grow:1;position:relative}.kbq-tab-nav-bar .kbq-tab-group_align-labels-center{justify-content:center}.kbq-tab-nav-bar .kbq-tab-group_align-labels-end{justify-content:flex-end}.kbq-tab-nav-bar.kbq-tab-group_vertical{flex-direction:column;flex-grow:0;gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical, 8px) 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTabNav, decorators: [{
-            type: Component,
-            args: [{ selector: '[kbq-tab-nav-bar]', exportAs: 'kbqTabNavBar, kbqTabNav', template: '<ng-content></ng-content>', host: {
-                        class: 'kbq-tab-nav-bar',
-                        '[class.kbq-tab-nav-bar_filled]': '!transparent',
-                        '[class.kbq-tab-nav-bar_transparent]': 'transparent',
-                        '[class.kbq-tab-nav-bar_on-background]': '!onSurface',
-                        '[class.kbq-tab-nav-bar_on-surface]': 'onSurface'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kbq-tab-link{vertical-align:top;text-decoration:none;-webkit-tap-highlight-color:transparent;position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical, 6px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal, 12px) - var(--kbq-tabs-size-tab-item-focus-outline-width, 2px));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width, 2px);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius, 8px);outline:none}.kbq-tab-link.kbq-selected{cursor:default}.kbq-tab-link.cdk-keyboard-focused{z-index:1}.kbq-tab-link.kbq-disabled{pointer-events:none}.kbq-tab-link .kbq-tab-label__content{display:flex;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal, 4px)}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-link .kbq-tab-group_stretch-labels .kbq-tab-link{flex-basis:0;flex-grow:1}.kbq-tab-nav-bar{display:flex;flex-grow:1;position:relative}.kbq-tab-nav-bar .kbq-tab-group_align-labels-center{justify-content:center}.kbq-tab-nav-bar .kbq-tab-group_align-labels-end{justify-content:flex-end}.kbq-tab-nav-bar.kbq-tab-group_vertical{flex-direction:column;flex-grow:0;gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical, 8px) 0}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['vertical']
-                }] }], propDecorators: { transparent: [{
-                type: Input
-            }], onSurface: [{
-                type: Input
-            }], links: [{
-                type: ContentChildren,
-                args: [KbqTabLink]
-            }] } });
 
 class KbqTabsModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }