@koobiq/components 19.8.1 → 20.0.0

package/fesm2022/koobiq-components-tabs.mjs

@@ -1,23 +1,21 @@
-import * as i1 from '@angular/cdk/bidi';
 import { Directionality } from '@angular/cdk/bidi';
 import { CdkPortalOutlet, CdkPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import { CdkScrollable, ViewportRuler, CdkScrollableModule } from '@angular/cdk/scrolling';
 import * as i0 from '@angular/core';
-import { EventEmitter, Input, ViewChild, Output, Optional, ChangeDetectionStrategy, ViewEncapsulation, forwardRef, Component, Inject, Directive, inject, DestroyRef, ElementRef, ChangeDetectorRef, NgZone, booleanAttribute, numberAttribute, InjectionToken, TemplateRef, ContentChild, ContentChildren, Renderer2, NgModule } from '@angular/core';
+import { inject, ElementRef, output, EventEmitter, viewChild, input, ChangeDetectorRef, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, forwardRef, Component, ComponentFactoryResolver, ViewContainerRef, Directive, TemplateRef, DestroyRef, NgZone, booleanAttribute, numberAttribute, InjectionToken, contentChild, ContentChild, Renderer2, ViewChild, ContentChildren, NgModule } from '@angular/core';
 import { Subscription, Subject, fromEvent, of, merge, timer } from 'rxjs';
 import { startWith, takeUntil, debounceTime } from 'rxjs/operators';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { FocusKeyManager, CdkMonitorFocus, FocusMonitor, A11yModule } from '@angular/cdk/a11y';
-import { KBQ_WINDOW, PopUpPlacements, KBQ_SELECT_SCROLL_STRATEGY, KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER, KBQ_PARENT_ANIMATION_COMPONENT } from '@koobiq/components/core';
+import { KBQ_WINDOW, HOME, END, UP_ARROW, DOWN_ARROW, RIGHT_ARROW, LEFT_ARROW, PopUpPlacements, KBQ_SELECT_SCROLL_STRATEGY, KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER, KBQ_PARENT_ANIMATION_COMPONENT } from '@koobiq/components/core';
 import { KbqTooltipTrigger, KbqToolTipModule } from '@koobiq/components/tooltip';
 import { CdkObserveContent } from '@angular/cdk/observers';
-import * as i1$1 from '@koobiq/components/icon';
+import * as i1 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 import { hasModifierKey, ENTER, SPACE } from '@angular/cdk/keycodes';
 import { normalizePassiveListenerOptions, Platform } from '@angular/cdk/platform';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { HOME, END, UP_ARROW, DOWN_ARROW, RIGHT_ARROW, LEFT_ARROW } from '@koobiq/cdk/keycodes';
 import { KBQ_DROPDOWN_SCROLL_STRATEGY } from '@koobiq/components/dropdown';
 
 const kbqTabsAnimations = {
@@ -49,27 +47,34 @@ const kbqTabsAnimations = {
  */
 class KbqTabBody {
     /** The shifted index position of the tab body, where zero represents the active center tab. */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     set position(position) {
         this.positionIndex = position;
         this.computePositionAnimationState();
     }
-    constructor(elementRef, dir, changeDetectorRef) {
-        this.elementRef = elementRef;
-        this.dir = dir;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.dir = inject(Directionality, { optional: true });
         /** Event emitted when the tab begins to animate towards the center as the active tab. */
-        this.onCentering = new EventEmitter();
+        this.onCentering = output();
         /** Event emitted before the centering of the tab begins. */
         this.beforeCentering = new EventEmitter();
         /** Event emitted before the centering of the tab begins. */
         this.afterLeavingCenter = new EventEmitter();
         /** Event emitted when the tab completes its animation towards the center. */
-        this.onCentered = new EventEmitter(true);
+        this.onCentered = output();
+        /** The portal host inside of this container into which the tab body content will be loaded. */
+        this.portalHost = viewChild.required(CdkPortalOutlet);
+        /** The tab body content to display. */
+        this.content = input(undefined, ...(ngDevMode ? [{ debugName: "content" }] : []));
         // Note that the default value will always be overwritten by `KbqTabBody`, but we need one
         // anyway to prevent the animations module from throwing an error if the body is used on its own.
         /** Duration for the tab's animation. */
-        this.animationDuration = '0ms';
+        this.animationDuration = input('0ms', ...(ngDevMode ? [{ debugName: "animationDuration" }] : []));
         /** Subscription to the directionality change observable. */
         this.dirChangeSubscription = Subscription.EMPTY;
+        const changeDetectorRef = inject(ChangeDetectorRef);
         if (this.dir && changeDetectorRef) {
             this.dirChangeSubscription = this.dir.change.subscribe((direction) => {
                 this.computePositionAnimationState(direction);
@@ -99,6 +104,7 @@ class KbqTabBody {
     onTranslateTabComplete(e) {
         // If the transition to the center is complete, emit an event.
         if (this.isCenterPosition(e.toState) && this.isCenterPosition(this.bodyPosition)) {
+            // TODO: The 'emit' function requires a mandatory void argument
             this.onCentered.emit();
         }
         if (this.isCenterPosition(e.fromState) && !this.isCenterPosition(this.bodyPosition)) {
@@ -136,44 +142,33 @@ class KbqTabBody {
         }
         return 'right-origin-center';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTabBody, deps: [{ token: i0.ElementRef }, { token: i1.Directionality, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqTabBody, isStandalone: true, 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    cdkScrollable\n    class=\"kbq-tab-body__content kbq-scrollbar kbq-hide-nested-popup\"\n    [@translateTab]=\"{\n        value: bodyPosition,\n        params: { animationDuration: animationDuration }\n    }\"\n    (@translateTab.done)=\"onTranslateTabComplete($event)\"\n    (@translateTab.start)=\"onTranslateTabStarted($event)\"\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(() => 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.25", type: KbqTabBody, isStandalone: true, selector: "kbq-tab-body", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: false, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCentering: "onCentering", beforeCentering: "beforeCentering", afterLeavingCenter: "afterLeavingCenter", onCentered: "onCentered" }, host: { classAttribute: "kbq-tab-body" }, viewQueries: [{ propertyName: "portalHost", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    #content\n    cdkScrollable\n    class=\"kbq-tab-body__content kbq-scrollbar kbq-hide-nested-popup\"\n    [@translateTab]=\"{\n        value: bodyPosition,\n        params: { animationDuration: animationDuration() }\n    }\"\n    (@translateTab.done)=\"onTranslateTabComplete($event)\"\n    (@translateTab.start)=\"onTranslateTabStarted($event)\"\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(() => 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: "19.2.21", ngImport: i0, type: KbqTabBody, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabBody, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-tab-body', imports: [CdkScrollable, forwardRef((() => KbqTabBodyPortal))], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [kbqTabsAnimations.translateTab], host: {
+            args: [{ selector: 'kbq-tab-body', imports: [CdkScrollable, forwardRef((() => KbqTabBodyPortal))], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-tab-body'
-                    }, template: "<div\n    #content\n    cdkScrollable\n    class=\"kbq-tab-body__content kbq-scrollbar kbq-hide-nested-popup\"\n    [@translateTab]=\"{\n        value: bodyPosition,\n        params: { animationDuration: animationDuration }\n    }\"\n    (@translateTab.done)=\"onTranslateTabComplete($event)\"\n    (@translateTab.start)=\"onTranslateTabStarted($event)\"\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: i1.Directionality, decorators: [{
-                    type: Optional
-                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { position: [{
+                    }, animations: [kbqTabsAnimations.translateTab], template: "<div\n    #content\n    cdkScrollable\n    class=\"kbq-tab-body__content kbq-scrollbar kbq-hide-nested-popup\"\n    [@translateTab]=\"{\n        value: bodyPosition,\n        params: { animationDuration: animationDuration() }\n    }\"\n    (@translateTab.done)=\"onTranslateTabComplete($event)\"\n    (@translateTab.start)=\"onTranslateTabStarted($event)\"\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: () => [], propDecorators: { position: [{
                 type: Input
-            }], onCentering: [{
-                type: Output
-            }], beforeCentering: [{
+            }], onCentering: [{ type: i0.Output, args: ["onCentering"] }], beforeCentering: [{
                 type: Output
             }], afterLeavingCenter: [{
                 type: Output
-            }], onCentered: [{
-                type: Output
-            }], portalHost: [{
-                type: ViewChild,
-                args: [CdkPortalOutlet, { static: false }]
-            }], content: [{
-                type: Input
-            }], origin: [{
-                type: Input
-            }], animationDuration: [{
+            }], onCentered: [{ type: i0.Output, args: ["onCentered"] }], portalHost: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], origin: [{
                 type: Input
-            }] } });
+            }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }] } });
 /**
  * The portal host directive for the contents of the tab.
  * @docs-private
  */
 class KbqTabBodyPortal extends CdkPortalOutlet {
-    constructor(componentFactoryResolver, viewContainerRef, host) {
+    constructor() {
+        const componentFactoryResolver = inject(ComponentFactoryResolver);
+        const viewContainerRef = inject(ViewContainerRef);
         super(componentFactoryResolver, viewContainerRef);
-        this.host = host;
+        this.host = inject(KbqTabBody);
         /** Subscription to events for when the tab body begins centering. */
         this.centeringSub = Subscription.EMPTY;
         /** Subscription to events for when the tab body finishes leaving from center position. */
@@ -186,7 +181,7 @@ class KbqTabBodyPortal extends CdkPortalOutlet {
             .pipe(startWith(this.host.isCenterPosition(this.host.bodyPosition)))
             .subscribe((isCentering) => {
             if (isCentering && !this.hasAttached()) {
-                this.attach(this.host.content);
+                this.attach(this.host.content());
             }
         });
         this.leavingSub = this.host.afterLeavingCenter.subscribe(() => {
@@ -199,33 +194,30 @@ class KbqTabBodyPortal extends CdkPortalOutlet {
         this.centeringSub.unsubscribe();
         this.leavingSub.unsubscribe();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTabBodyPortal, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: forwardRef(() => KbqTabBody) }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqTabBodyPortal, isStandalone: true, selector: "[kbqTabBodyHost]", usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabBodyPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqTabBodyPortal, isStandalone: true, selector: "[kbqTabBodyHost]", usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTabBodyPortal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabBodyPortal, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTabBodyHost]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: KbqTabBody, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => KbqTabBody)]
-                }] }] });
+        }], ctorParameters: () => [] });
 
 /** Decorates the `ng-template` tags and reads out the template from it. */
 class KbqTabContent {
-    constructor(template) {
-        this.template = template;
+    constructor() {
+        this.template = inject(TemplateRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTabContent, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqTabContent, isStandalone: true, selector: "[kbqTabContent]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqTabContent, isStandalone: true, selector: "[kbqTabContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTabContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabContent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTabContent]'
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+        }] });
 
 /** Config used to bind passive event listeners */
 const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: true });
@@ -252,6 +244,8 @@ const SCROLL_DISTANCE = 0.8;
  */
 class KbqPaginatedTabHeader {
     /** The index of the active tab. */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get selectedIndex() {
         return this._selectedIndex;
     }
@@ -284,6 +278,8 @@ class KbqPaginatedTabHeader {
         this.checkScrollingControls();
     }
     /** Whether the tabs should be displayed vertically. */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     set vertical(value) {
         this._vertical = value;
         if (this._vertical) {
@@ -311,6 +307,8 @@ class KbqPaginatedTabHeader {
          * Whether pagination should be disabled. This can be used to avoid unnecessary
          * layout recalculations if it's known that pagination won't be required.
          */
+        // TODO: Skipped for migration because:
+        //  Your application code writes to the input. This prevents migration.
         this.disablePagination = false;
         this._vertical = false;
         /** Stream that will stop the automated scrolling. */
@@ -352,9 +350,12 @@ class KbqPaginatedTabHeader {
         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 this.window.requestAnimationFrame !== 'undefined'
-            ? this.window.requestAnimationFrame(realign)
-            : realign();
+        if (typeof this.window.requestAnimationFrame !== 'undefined') {
+            this.window.requestAnimationFrame(realign);
+        }
+        else {
+            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)
@@ -688,10 +689,10 @@ class KbqPaginatedTabHeader {
             this.scrollTo(maxScrollDistance);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPaginatedTabHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", type: KbqPaginatedTabHeader, isStandalone: true, inputs: { selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute], disablePagination: ["disablePagination", "disablePagination", booleanAttribute], vertical: ["vertical", "vertical", booleanAttribute] }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPaginatedTabHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.25", type: KbqPaginatedTabHeader, isStandalone: true, inputs: { selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute], disablePagination: ["disablePagination", "disablePagination", booleanAttribute], vertical: ["vertical", "vertical", booleanAttribute] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPaginatedTabHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPaginatedTabHeader, decorators: [{
             type: Directive
         }], ctorParameters: () => [], propDecorators: { selectedIndex: [{
                 type: Input,
@@ -707,18 +708,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 const KBQ_TAB_LABEL = new InjectionToken('KbqTabLabel');
 /** Used to flag tab labels for use with the portal directive */
 class KbqTabLabel extends CdkPortal {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTabLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqTabLabel, isStandalone: true, selector: "[kbq-tab-label], [kbqTabLabel]", providers: [{ provide: KBQ_TAB_LABEL, useExisting: KbqTabLabel }], usesInheritance: true, ngImport: i0 }); }
+    constructor() {
+        super(...arguments);
+        /** Whether the tab contains only an icon without a label. */
+        this.iconOnly = input(false, ...(ngDevMode ? [{ debugName: "iconOnly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqTabLabel, isStandalone: true, selector: "[kbq-tab-label], [kbqTabLabel]", inputs: { iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: KBQ_TAB_LABEL, useExisting: KbqTabLabel }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTabLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-tab-label], [kbqTabLabel]',
                     providers: [{ provide: KBQ_TAB_LABEL, useExisting: KbqTabLabel }]
                 }]
-        }] });
+        }], propDecorators: { iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }] } });
 
 class KbqTab {
+    constructor() {
+        this.viewContainerRef = inject(ViewContainerRef);
+        /**
+         * Template provided in the tab content that will be used if present, used to enable lazy-loading
+         */
+        this.explicitContent = contentChild(KbqTabContent, ...(ngDevMode ? [{ debugName: "explicitContent", read: TemplateRef }] : [{ read: TemplateRef }]));
+        /** Template inside the KbqTab view that contains an `<ng-content>`. */
+        this.implicitContent = viewChild.required(TemplateRef);
+        this._tooltipTitle = '';
+        this._disabled = false;
+        this.tooltipPlacement = input(PopUpPlacements.Right, ...(ngDevMode ? [{ debugName: "tooltipPlacement" }] : []));
+        /** Plain text label for the tab, used when there is no template label. */
+        this.textLabel = input('', ...(ngDevMode ? [{ debugName: "textLabel", alias: 'label' }] : [{ alias: 'label' }]));
+        this.empty = input(false, ...(ngDevMode ? [{ debugName: "empty", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.tabId = input(undefined, ...(ngDevMode ? [{ debugName: "tabId" }] : []));
+        /** Emits whenever the internal state of the tab changes. */
+        this.stateChanges = new Subject();
+        /**
+         * The relatively indexed position where 0 represents the center, negative is left, and positive
+         * represents the right.
+         */
+        this.position = null;
+        /**
+         * The initial relatively index origin of the tab if it was created and selected after there
+         * was already a selected tab. Provides context of what position the tab should originate from.
+         */
+        this.origin = null;
+        /**
+         * Whether the tab is currently active.
+         */
+        this.isActive = false;
+        this._overflowTooltipTitle = '';
+        /** Portal that will be the hosted content of the tab */
+        this.contentPortal = null;
+    }
     /** @docs-private */
     get content() {
         return this.contentPortal;
@@ -729,12 +770,16 @@ class KbqTab {
     set templateLabel(value) {
         this.setTemplateLabelInput(value);
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get tooltipTitle() {
         return this.overflowTooltipTitle + this._tooltipTitle;
     }
     set tooltipTitle(value) {
         this._tooltipTitle = value;
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get disabled() {
         return this._disabled;
     }
@@ -743,6 +788,10 @@ class KbqTab {
             this._disabled = value;
         }
     }
+    /** Whether the tab label contains only an icon (no text). */
+    get iconOnlyLabel() {
+        return this.templateLabel?.iconOnly() ?? false;
+    }
     get isOverflown() {
         return !!this._overflowTooltipTitle;
     }
@@ -755,41 +804,13 @@ class KbqTab {
     set overflowTooltipTitle(value) {
         this._overflowTooltipTitle = value;
     }
-    constructor(viewContainerRef) {
-        this.viewContainerRef = viewContainerRef;
-        this._tooltipTitle = '';
-        this._disabled = false;
-        this.tooltipPlacement = PopUpPlacements.Right;
-        /** Plain text label for the tab, used when there is no template label. */
-        this.textLabel = '';
-        this.empty = false;
-        /** Emits whenever the internal state of the tab changes. */
-        this.stateChanges = new Subject();
-        /**
-         * The relatively indexed position where 0 represents the center, negative is left, and positive
-         * represents the right.
-         */
-        this.position = null;
-        /**
-         * The initial relatively index origin of the tab if it was created and selected after there
-         * was already a selected tab. Provides context of what position the tab should originate from.
-         */
-        this.origin = null;
-        /**
-         * Whether the tab is currently active.
-         */
-        this.isActive = false;
-        this._overflowTooltipTitle = '';
-        /** Portal that will be the hosted content of the tab */
-        this.contentPortal = null;
-    }
     ngOnChanges(changes) {
         if (changes.hasOwnProperty('textLabel') || changes.hasOwnProperty('disabled')) {
             this.stateChanges.next();
         }
     }
     ngOnInit() {
-        this.contentPortal = new TemplatePortal(this.explicitContent || this.implicitContent, this.viewContainerRef);
+        this.contentPortal = new TemplatePortal(this.explicitContent() || this.implicitContent(), this.viewContainerRef);
     }
     ngOnDestroy() {
         this.stateChanges.complete();
@@ -809,12 +830,12 @@ class KbqTab {
             this._templateLabel = value;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTab, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: KbqTab, isStandalone: true, selector: "kbq-tab", inputs: { tooltipTitle: "tooltipTitle", disabled: ["disabled", "disabled", booleanAttribute], tooltipPlacement: "tooltipPlacement", textLabel: ["label", "textLabel"], empty: ["empty", "empty", booleanAttribute], tabId: "tabId" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.25", type: KbqTab, isStandalone: true, selector: "kbq-tab", inputs: { tooltipTitle: { classPropertyName: "tooltipTitle", publicName: "tooltipTitle", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tooltipPlacement: { classPropertyName: "tooltipPlacement", publicName: "tooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, textLabel: { classPropertyName: "textLabel", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             ...[KBQ_SELECT_SCROLL_STRATEGY, KBQ_DROPDOWN_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"], usesOnChanges: true, ngImport: i0, template: '<ng-template><ng-content /></ng-template>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "explicitContent", first: true, predicate: KbqTabContent, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "templateLabel", first: true, predicate: KBQ_TAB_LABEL, descendants: true }], viewQueries: [{ propertyName: "implicitContent", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["kbqTab"], 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: "19.2.21", ngImport: i0, type: KbqTab, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTab, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-tab',
@@ -822,44 +843,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                     // 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-template>',
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    exportAs: 'kbqTab',
                     providers: [
                         ...[KBQ_SELECT_SCROLL_STRATEGY, KBQ_DROPDOWN_SCROLL_STRATEGY].map(((token) => KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER(token, ((overlay) => (() => overlay.scrollStrategies.close())))))
-                    ]
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    exportAs: 'kbqTab'
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { templateLabel: [{
+        }], propDecorators: { templateLabel: [{
                 type: ContentChild,
                 args: [KBQ_TAB_LABEL]
-            }], explicitContent: [{
-                type: ContentChild,
-                args: [KbqTabContent, { read: TemplateRef, static: true }]
-            }], implicitContent: [{
-                type: ViewChild,
-                args: [TemplateRef, { static: true }]
-            }], tooltipTitle: [{
+            }], explicitContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTabContent), { ...{ read: TemplateRef }, isSignal: true }] }], implicitContent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], tooltipTitle: [{
                 type: Input
             }], disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], tooltipPlacement: [{
-                type: Input
-            }], textLabel: [{
-                type: Input,
-                args: ['label']
-            }], empty: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], tabId: [{
-                type: Input
-            }] } });
+            }], tooltipPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPlacement", required: false }] }], textLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], tabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabId", required: false }] }] } });
 
 /**
  * Used in the `kbq-tab-group` view to display tab labels.
  * @docs-private
  */
 class KbqTabLabelWrapper {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this._disabled = false;
+    }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get disabled() {
         return this._disabled;
     }
@@ -868,11 +880,6 @@ class KbqTabLabelWrapper {
             this._disabled = value;
         }
     }
-    constructor(elementRef, renderer) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this._disabled = false;
-    }
     ngAfterViewInit() {
         this.addClassModifierForIcons(Array.from(this.elementRef.nativeElement.querySelectorAll('.kbq-icon')));
     }
@@ -916,10 +923,10 @@ class KbqTabLabelWrapper {
             this.renderer.addClass(this.elementRef.nativeElement, 'kbq-tab-label_with-icon-right');
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTabLabelWrapper, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", type: KbqTabLabelWrapper, isStandalone: true, selector: "[kbqTabLabelWrapper]", inputs: { tab: "tab", disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "class.kbq-disabled": "disabled", "attr.disabled": "disabled || null" } }, queries: [{ propertyName: "labelContent", first: true, predicate: ["labelContent"], descendants: true }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabLabelWrapper, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.25", type: KbqTabLabelWrapper, isStandalone: true, selector: "[kbqTabLabelWrapper]", inputs: { tab: "tab", disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "class.kbq-disabled": "disabled", "attr.disabled": "disabled || null" } }, queries: [{ propertyName: "labelContent", first: true, predicate: ["labelContent"], descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTabLabelWrapper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabLabelWrapper, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTabLabelWrapper]',
@@ -928,7 +935,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '[attr.disabled]': 'disabled || null'
                     }
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { labelContent: [{
+        }], propDecorators: { labelContent: [{
                 type: ContentChild,
                 args: ['labelContent']
             }], tab: [{
@@ -938,6 +945,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [{ transform: booleanAttribute }]
             }] } });
 
+/** Corresponds to `margin-inline: var(--kbq-size-xs)` on `.kbq-tab-label_icon-only`. */
+const ICON_ONLY_TAB_MARGIN_INLINE = 6;
 /**
  * The header of the tab group which displays a list of all the tabs in the tab group.
  * When the tabs list's width exceeds the width of the header container,
@@ -949,33 +958,40 @@ class KbqTabHeader extends KbqPaginatedTabHeader {
     constructor() {
         super(...arguments);
         /** Whether the tabs are underlined. */
-        this.underlined = false;
+        this.underlined = input(false, ...(ngDevMode ? [{ debugName: "underlined", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     }
+    /** Width of the active tab, adjusted for icon-only tab margins. */
     get activeTabOffsetWidth() {
-        return this.items.get(this.selectedIndex)?.elementRef?.nativeElement?.offsetWidth;
+        const item = this.items.get(this.selectedIndex);
+        const width = item?.elementRef?.nativeElement?.offsetWidth;
+        if (!width)
+            return width;
+        return item.tab?.iconOnlyLabel ? width + ICON_ONLY_TAB_MARGIN_INLINE * 2 : width;
     }
+    /** Left offset of the active tab, adjusted for icon-only tab margins. */
     get activeTabOffsetLeft() {
-        return this.items.get(this.selectedIndex)?.elementRef?.nativeElement?.offsetLeft;
+        const item = this.items.get(this.selectedIndex);
+        const left = item?.elementRef?.nativeElement?.offsetLeft;
+        if (!left)
+            return left;
+        return item.tab?.iconOnlyLabel ? left - ICON_ONLY_TAB_MARGIN_INLINE : left;
     }
     itemSelected(event) {
         event.preventDefault();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTabHeader, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: KbqTabHeader, isStandalone: true, selector: "kbq-tab-header", inputs: { underlined: ["underlined", "underlined", booleanAttribute] }, outputs: { selectFocusedIndex: "selectFocusedIndex", indexFocused: "indexFocused" }, host: { properties: { "class.kbq-tab-header_vertical": "vertical", "class.kbq-tab-header_underlined": "underlined", "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=\"kbq-chevron-left_16\" [color]=\"disableScrollBefore ? 'contrast-fade' : 'contrast'\"></i>\n</div>\n\n<div #tabListContainer class=\"kbq-tab-header__container\" (keydown)=\"handleKeydown($event)\">\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                class=\"kbq-tab-list__active-tab-underline\"\n                [style.left.px]=\"activeTabOffsetLeft\"\n                [style.width.px]=\"activeTabOffsetWidth\"\n            ></div>\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=\"kbq-chevron-right_16\" [color]=\"disableScrollAfter ? 'contrast-fade' : 'contrast'\"></i>\n</div>\n", styles: [".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;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding:0 var(--kbq-size-m)}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:8px 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after{content:\"\";position:absolute;left:0;bottom:0;right:0;height:1px;background:var(--kbq-line-contrast-less)}.kbq-tab-list__active-tab-underline{display:none}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{display:block;position:absolute;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.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__container{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) - var(--kbq-tabs-size-tab-item-focus-outline-width)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius);outline:none}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){padding-left:14px;padding-right:14px}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left{padding-left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right{padding-right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.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;overflow:hidden;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal)}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{content:\"\";position:absolute;inset:-10px 0}.kbq-tab-label.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-label.kbq-tab-label_vertical .kbq-tab-label__content:not(.kbq-tab-label__template){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-tab-group_stretch-labels .kbq-tab-label{flex-basis:0;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1$1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabHeader, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: KbqTabHeader, isStandalone: true, selector: "kbq-tab-header", inputs: { underlined: { classPropertyName: "underlined", publicName: "underlined", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectFocusedIndex: "selectFocusedIndex", indexFocused: "indexFocused" }, host: { properties: { "class.kbq-tab-header_vertical": "vertical", "class.kbq-tab-header_underlined": "underlined()", "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=\"kbq-chevron-left_16\" [color]=\"disableScrollBefore ? 'contrast-fade' : 'contrast'\"></i>\n</div>\n\n<div #tabListContainer class=\"kbq-tab-header__container\" (keydown)=\"handleKeydown($event)\">\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                class=\"kbq-tab-list__active-tab-underline\"\n                [style.left.px]=\"activeTabOffsetLeft\"\n                [style.width.px]=\"activeTabOffsetWidth\"\n            ></div>\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=\"kbq-chevron-right_16\" [color]=\"disableScrollAfter ? 'contrast-fade' : 'contrast'\"></i>\n</div>\n", styles: [".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;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding:0 var(--kbq-size-m)}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:8px 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after{content:\"\";position:absolute;left:0;bottom:0;right:0;height:1px;background:var(--kbq-line-contrast-less)}.kbq-tab-list__active-tab-underline{display:none}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{display:block;position:absolute;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.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__container{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) - var(--kbq-tabs-size-tab-item-focus-outline-width)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius);outline:none}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){padding-left:14px;padding-right:14px}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left{padding-left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right{padding-right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.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;overflow:hidden;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal)}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{content:\"\";position:absolute;inset:-10px 0}.kbq-tab-label.kbq-tab-label_icon-only{width:var(--kbq-size-3xl);height:var(--kbq-size-3xl);padding:0!important;margin-inline:var(--kbq-size-xs);box-sizing:content-box}.kbq-tab-label.kbq-tab-label_icon-only:not(.kbq-tab-label_vertical):after{content:\"\";display:block;position:absolute;top:0;bottom:0;left:calc(-1 * (var(--kbq-size-xs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));background:transparent}.kbq-tab-label.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-label.kbq-tab-label_vertical .kbq-tab-label__content:not(.kbq-tab-label__template){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-label.kbq-tab-label_vertical.kbq-tab-label_icon-only{margin-inline:0;justify-content:center}.kbq-tab-label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-tab-group_stretch-labels .kbq-tab-label{flex-basis:0;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTabHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabHeader, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-tab-header', imports: [KbqIconModule, CdkObserveContent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, outputs: ['selectFocusedIndex', 'indexFocused'], host: {
+            args: [{ selector: 'kbq-tab-header', imports: [KbqIconModule, CdkObserveContent], changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-tab-header',
                         '[class.kbq-tab-header_vertical]': 'vertical',
-                        '[class.kbq-tab-header_underlined]': 'underlined',
+                        '[class.kbq-tab-header_underlined]': 'underlined()',
                         '[class.kbq-tab-header__pagination-controls_enabled]': 'showPaginationControls',
                         '[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=\"kbq-chevron-left_16\" [color]=\"disableScrollBefore ? 'contrast-fade' : 'contrast'\"></i>\n</div>\n\n<div #tabListContainer class=\"kbq-tab-header__container\" (keydown)=\"handleKeydown($event)\">\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                class=\"kbq-tab-list__active-tab-underline\"\n                [style.left.px]=\"activeTabOffsetLeft\"\n                [style.width.px]=\"activeTabOffsetWidth\"\n            ></div>\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=\"kbq-chevron-right_16\" [color]=\"disableScrollAfter ? 'contrast-fade' : 'contrast'\"></i>\n</div>\n", styles: [".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;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding:0 var(--kbq-size-m)}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:8px 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after{content:\"\";position:absolute;left:0;bottom:0;right:0;height:1px;background:var(--kbq-line-contrast-less)}.kbq-tab-list__active-tab-underline{display:none}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{display:block;position:absolute;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.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__container{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) - var(--kbq-tabs-size-tab-item-focus-outline-width)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius);outline:none}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){padding-left:14px;padding-right:14px}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left{padding-left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right{padding-right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.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;overflow:hidden;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal)}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{content:\"\";position:absolute;inset:-10px 0}.kbq-tab-label.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-label.kbq-tab-label_vertical .kbq-tab-label__content:not(.kbq-tab-label__template){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-tab-group_stretch-labels .kbq-tab-label{flex-basis:0;flex-grow:1}\n"] }]
-        }], propDecorators: { underlined: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], items: [{
+                    }, outputs: ['selectFocusedIndex', 'indexFocused'], 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=\"kbq-chevron-left_16\" [color]=\"disableScrollBefore ? 'contrast-fade' : 'contrast'\"></i>\n</div>\n\n<div #tabListContainer class=\"kbq-tab-header__container\" (keydown)=\"handleKeydown($event)\">\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                class=\"kbq-tab-list__active-tab-underline\"\n                [style.left.px]=\"activeTabOffsetLeft\"\n                [style.width.px]=\"activeTabOffsetWidth\"\n            ></div>\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=\"kbq-chevron-right_16\" [color]=\"disableScrollAfter ? 'contrast-fade' : 'contrast'\"></i>\n</div>\n", styles: [".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;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding:0 var(--kbq-size-m)}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:8px 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after{content:\"\";position:absolute;left:0;bottom:0;right:0;height:1px;background:var(--kbq-line-contrast-less)}.kbq-tab-list__active-tab-underline{display:none}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{display:block;position:absolute;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.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__container{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) - var(--kbq-tabs-size-tab-item-focus-outline-width)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius);outline:none}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){padding-left:14px;padding-right:14px}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left{padding-left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right{padding-right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.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;overflow:hidden;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal)}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{content:\"\";position:absolute;inset:-10px 0}.kbq-tab-label.kbq-tab-label_icon-only{width:var(--kbq-size-3xl);height:var(--kbq-size-3xl);padding:0!important;margin-inline:var(--kbq-size-xs);box-sizing:content-box}.kbq-tab-label.kbq-tab-label_icon-only:not(.kbq-tab-label_vertical):after{content:\"\";display:block;position:absolute;top:0;bottom:0;left:calc(-1 * (var(--kbq-size-xs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));background:transparent}.kbq-tab-label.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-label.kbq-tab-label_vertical .kbq-tab-label__content:not(.kbq-tab-label__template){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-label.kbq-tab-label_vertical.kbq-tab-label_icon-only{margin-inline:0;justify-content:center}.kbq-tab-label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-tab-group_stretch-labels .kbq-tab-label{flex-basis:0;flex-grow:1}\n"] }]
+        }], propDecorators: { underlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "underlined", required: false }] }], items: [{
                 type: ContentChildren,
                 args: [KbqTabLabelWrapper, { descendants: false }]
             }], tabListContainer: [{
@@ -993,10 +1009,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             }] } });
 
 class KbqAlignTabsCenterCssStyler {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAlignTabsCenterCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqAlignTabsCenterCssStyler, isStandalone: true, selector: "kbq-tab-group[kbq-align-tabs-center], [kbq-tab-nav-bar][kbq-align-tabs-center], [kbqTabNavBar][kbq-align-tabs-center]", host: { classAttribute: "kbq-tab-group_align-labels-center" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAlignTabsCenterCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqAlignTabsCenterCssStyler, isStandalone: true, selector: "kbq-tab-group[kbq-align-tabs-center], [kbq-tab-nav-bar][kbq-align-tabs-center], [kbqTabNavBar][kbq-align-tabs-center]", host: { classAttribute: "kbq-tab-group_align-labels-center" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAlignTabsCenterCssStyler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAlignTabsCenterCssStyler, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-tab-group[kbq-align-tabs-center], [kbq-tab-nav-bar][kbq-align-tabs-center], [kbqTabNavBar][kbq-align-tabs-center]',
@@ -1004,10 +1020,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 class KbqAlignTabsEndCssStyler {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAlignTabsEndCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqAlignTabsEndCssStyler, isStandalone: true, selector: "kbq-tab-group[kbq-align-tabs-end], [kbq-tab-nav-bar][kbq-align-tabs-end], [kbqTabNavBar][kbq-align-tabs-end]", host: { classAttribute: "kbq-tab-group_align-labels-end" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAlignTabsEndCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqAlignTabsEndCssStyler, isStandalone: true, selector: "kbq-tab-group[kbq-align-tabs-end], [kbq-tab-nav-bar][kbq-align-tabs-end], [kbqTabNavBar][kbq-align-tabs-end]", host: { classAttribute: "kbq-tab-group_align-labels-end" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAlignTabsEndCssStyler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAlignTabsEndCssStyler, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-tab-group[kbq-align-tabs-end], [kbq-tab-nav-bar][kbq-align-tabs-end], [kbqTabNavBar][kbq-align-tabs-end]',
@@ -1015,10 +1031,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 class KbqStretchTabsCssStyler {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqStretchTabsCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqStretchTabsCssStyler, isStandalone: true, selector: "kbq-tab-group[kbq-stretch-tabs], [kbq-tab-nav-bar][kbq-stretch-tabs], [kbqTabNavBar][kbq-stretch-tabs]", host: { classAttribute: "kbq-tab-group_stretch-labels" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqStretchTabsCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqStretchTabsCssStyler, isStandalone: true, selector: "kbq-tab-group[kbq-stretch-tabs], [kbq-tab-nav-bar][kbq-stretch-tabs], [kbqTabNavBar][kbq-stretch-tabs]", host: { classAttribute: "kbq-tab-group_stretch-labels" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqStretchTabsCssStyler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqStretchTabsCssStyler, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-tab-group[kbq-stretch-tabs], [kbq-tab-nav-bar][kbq-stretch-tabs], [kbqTabNavBar][kbq-stretch-tabs]',
@@ -1026,10 +1042,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 class KbqVerticalTabsCssStyler {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqVerticalTabsCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqVerticalTabsCssStyler, isStandalone: true, selector: "kbq-tab-group[vertical], [kbq-tab-nav-bar][vertical], [kbqTabNavBar][vertical]", host: { classAttribute: "kbq-tab-group_vertical" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqVerticalTabsCssStyler, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqVerticalTabsCssStyler, isStandalone: true, selector: "kbq-tab-group[vertical], [kbq-tab-nav-bar][vertical], [kbqTabNavBar][vertical]", host: { classAttribute: "kbq-tab-group_vertical" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqVerticalTabsCssStyler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqVerticalTabsCssStyler, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-tab-group[vertical], [kbq-tab-nav-bar][vertical], [kbqTabNavBar][vertical]',
@@ -1048,18 +1064,25 @@ const KBQ_TABS_CONFIG = new InjectionToken('KBQ_TABS_CONFIG');
  */
 class KbqTabGroup {
     /** The index of the active tab. */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get selectedIndex() {
         return this._selectedIndex;
     }
     set selectedIndex(value) {
         this.activeTab = value;
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get activeTab() {
         switch (typeof this.attributeToSelectBy) {
             case 'number':
                 return this.tabs.get(this.clampTabIndex(this.attributeToSelectBy)) || null;
             case 'string':
-                return (this.tabs.toArray().find(({ tabId }) => tabId === this.attributeToSelectBy) ||
+                return (this.tabs.toArray().find(({ tabId: tabIdInput }) => {
+                    const tabId = tabIdInput();
+                    return tabId === this.attributeToSelectBy;
+                }) ||
                     this.tabs.get(0) ||
                     null);
             case 'function':
@@ -1071,6 +1094,8 @@ class KbqTabGroup {
     set activeTab(value) {
         this.attributeToSelectBy = value;
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get disabled() {
         return this._disabled;
     }
@@ -1079,28 +1104,32 @@ class KbqTabGroup {
             this._disabled = value;
         }
     }
-    constructor(changeDetectorRef, defaultConfig) {
-        this.changeDetectorRef = changeDetectorRef;
+    constructor() {
+        this.changeDetectorRef = inject(ChangeDetectorRef);
         this.resizeStream = new Subject();
-        this.transparent = false;
-        this.onSurface = false;
-        this.underlined = false;
-        this.vertical = false;
+        this.tabBodyWrapper = viewChild.required('tabBodyWrapper');
+        this.tabHeader = viewChild.required('tabHeader');
+        this.transparent = input(false, ...(ngDevMode ? [{ debugName: "transparent", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.onSurface = input(false, ...(ngDevMode ? [{ debugName: "onSurface", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.underlined = input(false, ...(ngDevMode ? [{ debugName: "underlined", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.vertical = input(false, ...(ngDevMode ? [{ debugName: "vertical", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /** Whether the tab group should grow to the size of the active tab. */
-        this.dynamicHeight = false;
+        this.dynamicHeight = input(false, ...(ngDevMode ? [{ debugName: "dynamicHeight", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /** Position of the tab header. */
+        // TODO: Skipped for migration because:
+        //  Your application code writes to the input. This prevents migration.
         this.headerPosition = 'above';
         this._disabled = false;
         /** Output to enable support for two-way binding on `[(selectedIndex)]` */
-        this.selectedIndexChange = new EventEmitter();
+        this.selectedIndexChange = output();
         /** Event emitted when the tab selection has changed. */
-        this.activeTabChange = new EventEmitter();
+        this.activeTabChange = output();
         /** Event emitted when focus has changed within a tab group. */
-        this.focusChange = new EventEmitter();
+        this.focusChange = output();
         /** Event emitted when the body animation has completed */
-        this.animationDone = new EventEmitter();
+        this.animationDone = output();
         /** Event emitted when the tab selection has changed. */
-        this.selectedTabChange = new EventEmitter(true);
+        this.selectedTabChange = output();
         this.attributeToSelectBy = null;
         /** Snapshot of the height of the tab body wrapper before another tab is activated. */
         this.tabBodyWrapperHeight = 0;
@@ -1111,8 +1140,9 @@ class KbqTabGroup {
         this.resizeSubscription = Subscription.EMPTY;
         this.resizeDebounceInterval = 100;
         this.checkOverflow = () => {
-            this.tabHeader.items.forEach((headerTab) => headerTab.checkOverflow());
+            this.tabHeader().items.forEach((headerTab) => headerTab.checkOverflow());
         };
+        const defaultConfig = inject(KBQ_TABS_CONFIG, { optional: true });
         this.groupId = nextId++;
         this.animationDuration = defaultConfig?.animationDuration || '0ms';
         this.subscribeToResize();
@@ -1211,21 +1241,22 @@ class KbqTabGroup {
      * height property is true.
      */
     setTabBodyWrapperHeight(tabHeight) {
-        if (!this.dynamicHeight || !this.tabBodyWrapperHeight) {
+        if (!this.dynamicHeight() || !this.tabBodyWrapperHeight) {
             return;
         }
-        const wrapper = this.tabBodyWrapper.nativeElement;
+        const wrapper = this.tabBodyWrapper().nativeElement;
         wrapper.style.height = `${this.tabBodyWrapperHeight}px`;
         // This conditional forces the browser to paint the height so that
         // the animation to the new height can have an origin.
-        if (this.tabBodyWrapper.nativeElement.offsetHeight) {
+        if (this.tabBodyWrapper().nativeElement.offsetHeight) {
             wrapper.style.height = `${tabHeight}px`;
         }
     }
     /** Removes the height of the tab body wrapper. */
     removeTabBodyWrapperHeight() {
-        this.tabBodyWrapperHeight = this.tabBodyWrapper.nativeElement.clientHeight;
-        this.tabBodyWrapper.nativeElement.style.height = '';
+        this.tabBodyWrapperHeight = this.tabBodyWrapper().nativeElement.clientHeight;
+        this.tabBodyWrapper().nativeElement.style.height = '';
+        // TODO: The 'emit' function requires a mandatory void argument
         this.animationDone.emit();
     }
     /** Handle click events, setting new selected index if appropriate. */
@@ -1245,7 +1276,7 @@ class KbqTabGroup {
     }
     onSelectFocusedIndex($event) {
         if (typeof this.attributeToSelectBy === 'string') {
-            this.activeTab = this.tabs.get($event)?.tabId || null;
+            this.activeTab = this.tabs.get($event)?.tabId() || null;
             return;
         }
         this.activeTab = $event;
@@ -1271,7 +1302,7 @@ class KbqTabGroup {
         this.tabLabelSubscription = merge(...this.tabs.map((tab) => tab.stateChanges)).subscribe(() => this.changeDetectorRef.markForCheck());
     }
     subscribeToResize() {
-        if (!this.vertical) {
+        if (!this.vertical()) {
             return;
         }
         if (this.resizeSubscription) {
@@ -1295,51 +1326,25 @@ class KbqTabGroup {
         }
         return this.tabs?.toArray().indexOf(currentSelectedTab);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTabGroup, deps: [{ token: i0.ChangeDetectorRef }, { token: KBQ_TABS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqTabGroup, isStandalone: true, selector: "kbq-tab-group", inputs: { transparent: ["transparent", "transparent", booleanAttribute], onSurface: ["onSurface", "onSurface", booleanAttribute], underlined: ["underlined", "underlined", booleanAttribute], vertical: ["vertical", "vertical", booleanAttribute], dynamicHeight: ["dynamicHeight", "dynamicHeight", booleanAttribute], selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute], activeTab: "activeTab", headerPosition: "headerPosition", animationDuration: "animationDuration", disabled: ["disabled", "disabled", booleanAttribute] }, 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"], ngImport: i0, template: "<kbq-tab-header\n    #tabHeader\n    [selectedIndex]=\"selectedIndex\"\n    [underlined]=\"underlined\"\n    [vertical]=\"vertical\"\n    (indexFocused)=\"focusChanged($event)\"\n    (selectFocusedIndex)=\"onSelectFocusedIndex($event)\"\n>\n    @for (tab of tabs; track tab) {\n        <div\n            cdkMonitorElementFocus\n            kbqTabLabelWrapper\n            class=\"kbq-tab-label\"\n            [attr.tabindex]=\"getTabIndex(tab, $index)\"\n            [class.kbq-selected]=\"selectedIndex === $index\"\n            [class.kbq-tab-label_empty]=\"tab.empty\"\n            [class.kbq-tab-label_horizontal]=\"!vertical\"\n            [class.kbq-tab-label_underlined]=\"underlined\"\n            [class.kbq-tab-label_vertical]=\"vertical\"\n            [disabled]=\"tab.disabled\"\n            [id]=\"getTabLabelId($index)\"\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, $index)\"\n        >\n            <div #labelContent class=\"kbq-tab-label__content\" [class.kbq-tab-label__template]=\"tab.templateLabel\">\n                <!-- If there is a label template, use it. -->\n                @if (tab.templateLabel) {\n                    <ng-template [cdkPortalOutlet]=\"tab.templateLabel\" />\n                }\n                <!-- If there is not a label template, fall back to the text label. -->\n                @if (!tab.templateLabel) {\n                    {{ tab.textLabel }}\n                }\n            </div>\n        </div>\n    }\n</kbq-tab-header>\n\n<div #tabBodyWrapper class=\"kbq-tab-body__wrapper\">\n    @for (tab of tabs; track tab) {\n        <kbq-tab-body\n            [animationDuration]=\"animationDuration\"\n            [class.kbq-tab-body__active]=\"selectedIndex === $index\"\n            [content]=\"tab.content!\"\n            [id]=\"getTabContentId($index)\"\n            [origin]=\"tab.origin!\"\n            [position]=\"tab.position!\"\n            (onCentered)=\"removeTabBodyWrapperHeight()\"\n            (onCentering)=\"setTabBodyWrapperHeight($event)\"\n        />\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.kbq-tab-group_vertical{flex-direction:row}.kbq-tab-group.kbq-tab-group_vertical .kbq-tab-list__content{gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0}.kbq-tab-group.kbq-tab-group_vertical .kbq-tab-header__container{overflow-y:auto}.kbq-tab-group .kbq-tab-body__wrapper{display:flex;overflow:hidden;position:relative}.kbq-tab-group .kbq-tab-body{inset:0;position:absolute;display:block;overflow:hidden}.kbq-tab-group .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-group .kbq-tab-body.kbq-tab-body__active{overflow-y:hidden}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}\n"], dependencies: [{ kind: "component", type: KbqTabHeader, selector: "kbq-tab-header", inputs: ["underlined"], outputs: ["selectFocusedIndex", "indexFocused"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: KbqTabLabelWrapper, selector: "[kbqTabLabelWrapper]", inputs: ["tab", "disabled"] }, { kind: "directive", type: KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["forDisabledComponent", "ignoreTooltipPointerEvents", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: KbqTabBody, selector: "kbq-tab-body", inputs: ["position", "content", "origin", "animationDuration"], outputs: ["onCentering", "beforeCentering", "afterLeavingCenter", "onCentered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqTabGroup, isStandalone: true, selector: "kbq-tab-group", inputs: { transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, onSurface: { classPropertyName: "onSurface", publicName: "onSurface", isSignal: true, isRequired: false, transformFunction: null }, underlined: { classPropertyName: "underlined", publicName: "underlined", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, dynamicHeight: { classPropertyName: "dynamicHeight", publicName: "dynamicHeight", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: false, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: false, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, 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, isSignal: true }, { propertyName: "tabHeader", first: true, predicate: ["tabHeader"], descendants: true, isSignal: true }], exportAs: ["kbqTabGroup"], ngImport: i0, template: "<kbq-tab-header\n    #tabHeader\n    [selectedIndex]=\"selectedIndex\"\n    [underlined]=\"underlined()\"\n    [vertical]=\"vertical()\"\n    (indexFocused)=\"focusChanged($event)\"\n    (selectFocusedIndex)=\"onSelectFocusedIndex($event)\"\n>\n    @for (tab of tabs; track tab) {\n        <div\n            cdkMonitorElementFocus\n            kbqTabLabelWrapper\n            class=\"kbq-tab-label\"\n            [attr.tabindex]=\"getTabIndex(tab, $index)\"\n            [class.kbq-selected]=\"selectedIndex === $index\"\n            [class.kbq-tab-label_empty]=\"tab.empty()\"\n            [class.kbq-tab-label_horizontal]=\"!vertical()\"\n            [class.kbq-tab-label_underlined]=\"underlined()\"\n            [class.kbq-tab-label_vertical]=\"vertical()\"\n            [class.kbq-tab-label_icon-only]=\"tab.iconOnlyLabel\"\n            [disabled]=\"tab.disabled\"\n            [id]=\"getTabLabelId($index)\"\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, $index)\"\n        >\n            <div #labelContent class=\"kbq-tab-label__content\" [class.kbq-tab-label__template]=\"tab.templateLabel\">\n                <!-- If there is a label template, use it. -->\n                @if (tab.templateLabel) {\n                    <ng-template [cdkPortalOutlet]=\"tab.templateLabel\" />\n                }\n                <!-- If there is not a label template, fall back to the text label. -->\n                @else {\n                    {{ tab.textLabel() }}\n                }\n            </div>\n        </div>\n    }\n</kbq-tab-header>\n\n<div #tabBodyWrapper class=\"kbq-tab-body__wrapper\">\n    @for (tab of tabs; track tab) {\n        <kbq-tab-body\n            [animationDuration]=\"animationDuration\"\n            [class.kbq-tab-body__active]=\"selectedIndex === $index\"\n            [content]=\"tab.content!\"\n            [id]=\"getTabContentId($index)\"\n            [origin]=\"tab.origin!\"\n            [position]=\"tab.position!\"\n            (onCentered)=\"removeTabBodyWrapperHeight()\"\n            (onCentering)=\"setTabBodyWrapperHeight($event)\"\n        />\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.kbq-tab-group_vertical{flex-direction:row}.kbq-tab-group.kbq-tab-group_vertical .kbq-tab-list__content{gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0}.kbq-tab-group.kbq-tab-group_vertical .kbq-tab-header__container{overflow-y:auto}.kbq-tab-group .kbq-tab-body__wrapper{display:flex;overflow:hidden;position:relative}.kbq-tab-group .kbq-tab-body{inset:0;position:absolute;display:block;overflow:hidden}.kbq-tab-group .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-group .kbq-tab-body.kbq-tab-body__active{overflow-y:hidden}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}\n"], dependencies: [{ kind: "component", type: KbqTabHeader, selector: "kbq-tab-header", inputs: ["underlined"], outputs: ["selectFocusedIndex", "indexFocused"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: KbqTabLabelWrapper, selector: "[kbqTabLabelWrapper]", inputs: ["tab", "disabled"] }, { kind: "directive", type: KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["forDisabledComponent", "ignoreTooltipPointerEvents", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipModifier", "kbqTooltipHeader"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: KbqTabBody, selector: "kbq-tab-body", inputs: ["position", "content", "origin", "animationDuration"], outputs: ["onCentering", "beforeCentering", "afterLeavingCenter", "onCentered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTabGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabGroup, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-tab-group', imports: [KbqTabHeader, CdkMonitorFocus, KbqTabLabelWrapper, KbqTooltipTrigger, CdkPortalOutlet, KbqTabBody], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqTabGroup', host: {
+            args: [{ selector: 'kbq-tab-group', imports: [KbqTabHeader, CdkMonitorFocus, KbqTabLabelWrapper, KbqTooltipTrigger, CdkPortalOutlet, KbqTabBody], providers: [{ provide: KBQ_PARENT_ANIMATION_COMPONENT, useExisting: forwardRef((() => this)) }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-tab-group',
-                        '[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_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"',
                         '(window:resize)': 'resizeStream.next($event)'
-                    }, providers: [{ provide: KBQ_PARENT_ANIMATION_COMPONENT, useExisting: forwardRef((() => this)) }], template: "<kbq-tab-header\n    #tabHeader\n    [selectedIndex]=\"selectedIndex\"\n    [underlined]=\"underlined\"\n    [vertical]=\"vertical\"\n    (indexFocused)=\"focusChanged($event)\"\n    (selectFocusedIndex)=\"onSelectFocusedIndex($event)\"\n>\n    @for (tab of tabs; track tab) {\n        <div\n            cdkMonitorElementFocus\n            kbqTabLabelWrapper\n            class=\"kbq-tab-label\"\n            [attr.tabindex]=\"getTabIndex(tab, $index)\"\n            [class.kbq-selected]=\"selectedIndex === $index\"\n            [class.kbq-tab-label_empty]=\"tab.empty\"\n            [class.kbq-tab-label_horizontal]=\"!vertical\"\n            [class.kbq-tab-label_underlined]=\"underlined\"\n            [class.kbq-tab-label_vertical]=\"vertical\"\n            [disabled]=\"tab.disabled\"\n            [id]=\"getTabLabelId($index)\"\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, $index)\"\n        >\n            <div #labelContent class=\"kbq-tab-label__content\" [class.kbq-tab-label__template]=\"tab.templateLabel\">\n                <!-- If there is a label template, use it. -->\n                @if (tab.templateLabel) {\n                    <ng-template [cdkPortalOutlet]=\"tab.templateLabel\" />\n                }\n                <!-- If there is not a label template, fall back to the text label. -->\n                @if (!tab.templateLabel) {\n                    {{ tab.textLabel }}\n                }\n            </div>\n        </div>\n    }\n</kbq-tab-header>\n\n<div #tabBodyWrapper class=\"kbq-tab-body__wrapper\">\n    @for (tab of tabs; track tab) {\n        <kbq-tab-body\n            [animationDuration]=\"animationDuration\"\n            [class.kbq-tab-body__active]=\"selectedIndex === $index\"\n            [content]=\"tab.content!\"\n            [id]=\"getTabContentId($index)\"\n            [origin]=\"tab.origin!\"\n            [position]=\"tab.position!\"\n            (onCentered)=\"removeTabBodyWrapperHeight()\"\n            (onCentering)=\"setTabBodyWrapperHeight($event)\"\n        />\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.kbq-tab-group_vertical{flex-direction:row}.kbq-tab-group.kbq-tab-group_vertical .kbq-tab-list__content{gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0}.kbq-tab-group.kbq-tab-group_vertical .kbq-tab-header__container{overflow-y:auto}.kbq-tab-group .kbq-tab-body__wrapper{display:flex;overflow:hidden;position:relative}.kbq-tab-group .kbq-tab-body{inset:0;position:absolute;display:block;overflow:hidden}.kbq-tab-group .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-group .kbq-tab-body.kbq-tab-body__active{overflow-y:hidden}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [KBQ_TABS_CONFIG]
-                }, {
-                    type: Optional
-                }] }], propDecorators: { tabs: [{
+                    }, exportAs: 'kbqTabGroup', template: "<kbq-tab-header\n    #tabHeader\n    [selectedIndex]=\"selectedIndex\"\n    [underlined]=\"underlined()\"\n    [vertical]=\"vertical()\"\n    (indexFocused)=\"focusChanged($event)\"\n    (selectFocusedIndex)=\"onSelectFocusedIndex($event)\"\n>\n    @for (tab of tabs; track tab) {\n        <div\n            cdkMonitorElementFocus\n            kbqTabLabelWrapper\n            class=\"kbq-tab-label\"\n            [attr.tabindex]=\"getTabIndex(tab, $index)\"\n            [class.kbq-selected]=\"selectedIndex === $index\"\n            [class.kbq-tab-label_empty]=\"tab.empty()\"\n            [class.kbq-tab-label_horizontal]=\"!vertical()\"\n            [class.kbq-tab-label_underlined]=\"underlined()\"\n            [class.kbq-tab-label_vertical]=\"vertical()\"\n            [class.kbq-tab-label_icon-only]=\"tab.iconOnlyLabel\"\n            [disabled]=\"tab.disabled\"\n            [id]=\"getTabLabelId($index)\"\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, $index)\"\n        >\n            <div #labelContent class=\"kbq-tab-label__content\" [class.kbq-tab-label__template]=\"tab.templateLabel\">\n                <!-- If there is a label template, use it. -->\n                @if (tab.templateLabel) {\n                    <ng-template [cdkPortalOutlet]=\"tab.templateLabel\" />\n                }\n                <!-- If there is not a label template, fall back to the text label. -->\n                @else {\n                    {{ tab.textLabel() }}\n                }\n            </div>\n        </div>\n    }\n</kbq-tab-header>\n\n<div #tabBodyWrapper class=\"kbq-tab-body__wrapper\">\n    @for (tab of tabs; track tab) {\n        <kbq-tab-body\n            [animationDuration]=\"animationDuration\"\n            [class.kbq-tab-body__active]=\"selectedIndex === $index\"\n            [content]=\"tab.content!\"\n            [id]=\"getTabContentId($index)\"\n            [origin]=\"tab.origin!\"\n            [position]=\"tab.position!\"\n            (onCentered)=\"removeTabBodyWrapperHeight()\"\n            (onCentering)=\"setTabBodyWrapperHeight($event)\"\n        />\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.kbq-tab-group_vertical{flex-direction:row}.kbq-tab-group.kbq-tab-group_vertical .kbq-tab-list__content{gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0}.kbq-tab-group.kbq-tab-group_vertical .kbq-tab-header__container{overflow-y:auto}.kbq-tab-group .kbq-tab-body__wrapper{display:flex;overflow:hidden;position:relative}.kbq-tab-group .kbq-tab-body{inset:0;position:absolute;display:block;overflow:hidden}.kbq-tab-group .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-group .kbq-tab-body.kbq-tab-body__active{overflow-y:hidden}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tabs: [{
                 type: ContentChildren,
                 args: [KbqTab]
-            }], tabBodyWrapper: [{
-                type: ViewChild,
-                args: ['tabBodyWrapper', { static: false }]
-            }], tabHeader: [{
-                type: ViewChild,
-                args: ['tabHeader', { static: false }]
-            }], transparent: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], onSurface: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], underlined: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], vertical: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], dynamicHeight: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], selectedIndex: [{
+            }], tabBodyWrapper: [{ type: i0.ViewChild, args: ['tabBodyWrapper', { isSignal: true }] }], tabHeader: [{ type: i0.ViewChild, args: ['tabHeader', { isSignal: true }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], onSurface: [{ type: i0.Input, args: [{ isSignal: true, alias: "onSurface", required: false }] }], underlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "underlined", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], dynamicHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicHeight", required: false }] }], selectedIndex: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
             }], activeTab: [{
@@ -1351,17 +1356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             }], disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], selectedIndexChange: [{
-                type: Output
-            }], activeTabChange: [{
-                type: Output
-            }], focusChange: [{
-                type: Output
-            }], animationDone: [{
-                type: Output
-            }], selectedTabChange: [{
-                type: Output
-            }] } });
+            }], selectedIndexChange: [{ type: i0.Output, args: ["selectedIndexChange"] }], activeTabChange: [{ type: i0.Output, args: ["activeTabChange"] }], focusChange: [{ type: i0.Output, args: ["focusChange"] }], animationDone: [{ type: i0.Output, args: ["animationDone"] }], selectedTabChange: [{ type: i0.Output, args: ["selectedTabChange"] }] } });
 
 // Increasing integer for generating unique ids for tab nav components.
 let nextUniqueId = 0;
@@ -1372,13 +1367,17 @@ class KbqTabNavBar extends KbqPaginatedTabHeader {
     constructor() {
         super(...arguments);
         /** Whether the nav bar background should be transparent. */
-        this.transparent = false;
-        this.onSurface = false;
+        this.transparent = input(false, ...(ngDevMode ? [{ debugName: "transparent", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.onSurface = input(false, ...(ngDevMode ? [{ debugName: "onSurface", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /** Whether the nav bar should be underlined. */
-        this.underlined = false;
+        this.underlined = input(false, ...(ngDevMode ? [{ debugName: "underlined", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Associated tab panel controlled by the nav bar.
+         */
+        this.tabNavPanel = input(...(ngDevMode ? [undefined, { debugName: "tabNavPanel" }] : []));
     }
     get role() {
-        return this.tabNavPanel ? 'tablist' : this.elementRef.nativeElement.getAttribute('role');
+        return this.tabNavPanel() ? 'tablist' : this.elementRef.nativeElement.getAttribute('role');
     }
     get activeTabOffsetWidth() {
         return this.items.get(this.selectedIndex)?.elementRef?.nativeElement?.offsetWidth;
@@ -1405,8 +1404,9 @@ class KbqTabNavBar extends KbqPaginatedTabHeader {
             if (items[i].active) {
                 this.selectedIndex = i;
                 this.changeDetectorRef.markForCheck();
-                if (this.tabNavPanel) {
-                    this.tabNavPanel.activeTabId = items[i].id;
+                const tabNavPanel = this.tabNavPanel();
+                if (tabNavPanel) {
+                    tabNavPanel.activeTabId = items[i].id;
                 }
                 return;
             }
@@ -1414,24 +1414,24 @@ class KbqTabNavBar extends KbqPaginatedTabHeader {
         // The ink bar should hide itself if no items are active.
         this.selectedIndex = -1;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTabNavBar, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: KbqTabNavBar, isStandalone: true, selector: "[kbqTabNavBar], [kbq-tab-nav-bar]", inputs: { transparent: ["transparent", "transparent", booleanAttribute], onSurface: ["onSurface", "onSurface", booleanAttribute], underlined: ["underlined", "underlined", booleanAttribute], tabNavPanel: "tabNavPanel" }, 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", "class.kbq-tab-header_underlined": "underlined", "class.kbq-tab-header__pagination-controls_enabled": "showPaginationControls", "attr.role": "role" }, classAttribute: "kbq-tab-nav-bar" }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => KbqTabLink), descendants: true }], 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 }], exportAs: ["kbqTabNavBar"], 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=\"kbq-chevron-left_16\" [color]=\"disableScrollBefore ? 'contrast-fade' : 'contrast'\"></i>\n</div>\n\n<div #tabListContainer class=\"kbq-tab-link__container\" (keydown)=\"handleKeydown($event)\">\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                class=\"kbq-tab-list__active-tab-underline\"\n                [style.left.px]=\"activeTabOffsetLeft\"\n                [style.width.px]=\"activeTabOffsetWidth\"\n            ></div>\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=\"kbq-chevron-right_16\" [color]=\"disableScrollAfter ? 'contrast-fade' : 'contrast'\"></i>\n</div>\n", styles: [".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;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding:0 var(--kbq-size-m)}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:8px 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after{content:\"\";position:absolute;left:0;bottom:0;right:0;height:1px;background:var(--kbq-line-contrast-less)}.kbq-tab-list__active-tab-underline{display:none}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{display:block;position:absolute;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-nav-bar{display:flex;position:relative}.kbq-tab-nav-bar .kbq-tab-link__container{display:flex;flex-grow:1;z-index:1;overflow:hidden}.kbq-tab-nav-bar .kbq-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-nav-bar .kbq-tab-list__content{display:flex}.kbq-tab-nav-bar.kbq-tab-group_vertical .kbq-tab-link__container{overflow-y:scroll}.kbq-tab-nav-bar.kbq-tab-group_vertical .kbq-tab-list__content{flex-direction:column;gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical)}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}\n", ".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) - var(--kbq-tabs-size-tab-item-focus-outline-width)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius);outline:none}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){padding-left:14px;padding-right:14px}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left{padding-left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right{padding-right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.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;overflow:hidden;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal)}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{content:\"\";position:absolute;inset:-10px 0}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content:not(.kbq-tab-label__template){display:block;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}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1$1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabNavBar, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: KbqTabNavBar, isStandalone: true, selector: "[kbqTabNavBar], [kbq-tab-nav-bar]", inputs: { transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, onSurface: { classPropertyName: "onSurface", publicName: "onSurface", isSignal: true, isRequired: false, transformFunction: null }, underlined: { classPropertyName: "underlined", publicName: "underlined", isSignal: true, isRequired: false, transformFunction: null }, tabNavPanel: { classPropertyName: "tabNavPanel", publicName: "tabNavPanel", isSignal: true, isRequired: false, transformFunction: null } }, 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()", "class.kbq-tab-header_underlined": "underlined()", "class.kbq-tab-header__pagination-controls_enabled": "showPaginationControls", "attr.role": "role" }, classAttribute: "kbq-tab-nav-bar" }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => KbqTabLink), descendants: true }], 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 }], exportAs: ["kbqTabNavBar"], 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=\"kbq-chevron-left_16\" [color]=\"disableScrollBefore ? 'contrast-fade' : 'contrast'\"></i>\n</div>\n\n<div #tabListContainer class=\"kbq-tab-link__container\" (keydown)=\"handleKeydown($event)\">\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                class=\"kbq-tab-list__active-tab-underline\"\n                [style.left.px]=\"activeTabOffsetLeft\"\n                [style.width.px]=\"activeTabOffsetWidth\"\n            ></div>\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=\"kbq-chevron-right_16\" [color]=\"disableScrollAfter ? 'contrast-fade' : 'contrast'\"></i>\n</div>\n", styles: [".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;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding:0 var(--kbq-size-m)}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:8px 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after{content:\"\";position:absolute;left:0;bottom:0;right:0;height:1px;background:var(--kbq-line-contrast-less)}.kbq-tab-list__active-tab-underline{display:none}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{display:block;position:absolute;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-nav-bar{display:flex;position:relative}.kbq-tab-nav-bar .kbq-tab-link__container{display:flex;flex-grow:1;z-index:1;overflow:hidden}.kbq-tab-nav-bar .kbq-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-nav-bar .kbq-tab-list__content{display:flex}.kbq-tab-nav-bar.kbq-tab-group_vertical .kbq-tab-link__container{overflow-y:scroll}.kbq-tab-nav-bar.kbq-tab-group_vertical .kbq-tab-list__content{flex-direction:column;gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical)}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}\n", ".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) - var(--kbq-tabs-size-tab-item-focus-outline-width)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius);outline:none}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){padding-left:14px;padding-right:14px}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left{padding-left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right{padding-right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.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;overflow:hidden;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal)}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{content:\"\";position:absolute;inset:-10px 0}.kbq-tab-link.kbq-tab-label_icon-only{width:var(--kbq-size-3xl);height:var(--kbq-size-3xl);padding:0!important;margin-inline:var(--kbq-size-xs);box-sizing:content-box}.kbq-tab-link.kbq-tab-label_icon-only:not(.kbq-tab-label_vertical):after{content:\"\";display:block;position:absolute;top:0;bottom:0;left:calc(-1 * (var(--kbq-size-xs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));background:transparent}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content:not(.kbq-tab-label__template){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-link.kbq-tab-label_vertical.kbq-tab-label_icon-only{margin-inline:0;justify-content:center}.kbq-tab-link .kbq-tab-group_stretch-labels .kbq-tab-link{flex-basis:0;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTabNavBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabNavBar, decorators: [{
             type: Component,
             args: [{ selector: '[kbqTabNavBar], [kbq-tab-nav-bar]', imports: [
                         KbqIconModule,
                         CdkObserveContent
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqTabNavBar', host: {
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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',
-                        '[class.kbq-tab-header_underlined]': 'underlined',
+                        '[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()',
+                        '[class.kbq-tab-header_underlined]': 'underlined()',
                         '[class.kbq-tab-header__pagination-controls_enabled]': 'showPaginationControls',
                         '[attr.role]': 'role'
-                    }, 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=\"kbq-chevron-left_16\" [color]=\"disableScrollBefore ? 'contrast-fade' : 'contrast'\"></i>\n</div>\n\n<div #tabListContainer class=\"kbq-tab-link__container\" (keydown)=\"handleKeydown($event)\">\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                class=\"kbq-tab-list__active-tab-underline\"\n                [style.left.px]=\"activeTabOffsetLeft\"\n                [style.width.px]=\"activeTabOffsetWidth\"\n            ></div>\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=\"kbq-chevron-right_16\" [color]=\"disableScrollAfter ? 'contrast-fade' : 'contrast'\"></i>\n</div>\n", styles: [".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;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding:0 var(--kbq-size-m)}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:8px 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after{content:\"\";position:absolute;left:0;bottom:0;right:0;height:1px;background:var(--kbq-line-contrast-less)}.kbq-tab-list__active-tab-underline{display:none}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{display:block;position:absolute;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-nav-bar{display:flex;position:relative}.kbq-tab-nav-bar .kbq-tab-link__container{display:flex;flex-grow:1;z-index:1;overflow:hidden}.kbq-tab-nav-bar .kbq-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-nav-bar .kbq-tab-list__content{display:flex}.kbq-tab-nav-bar.kbq-tab-group_vertical .kbq-tab-link__container{overflow-y:scroll}.kbq-tab-nav-bar.kbq-tab-group_vertical .kbq-tab-list__content{flex-direction:column;gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical)}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}\n", ".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) - var(--kbq-tabs-size-tab-item-focus-outline-width)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius);outline:none}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){padding-left:14px;padding-right:14px}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left{padding-left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right{padding-right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.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;overflow:hidden;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal)}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{content:\"\";position:absolute;inset:-10px 0}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content:not(.kbq-tab-label__template){display:block;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}\n"] }]
+                    }, exportAs: 'kbqTabNavBar', 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=\"kbq-chevron-left_16\" [color]=\"disableScrollBefore ? 'contrast-fade' : 'contrast'\"></i>\n</div>\n\n<div #tabListContainer class=\"kbq-tab-link__container\" (keydown)=\"handleKeydown($event)\">\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                class=\"kbq-tab-list__active-tab-underline\"\n                [style.left.px]=\"activeTabOffsetLeft\"\n                [style.width.px]=\"activeTabOffsetWidth\"\n            ></div>\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=\"kbq-chevron-right_16\" [color]=\"disableScrollAfter ? 'contrast-fade' : 'contrast'\"></i>\n</div>\n", styles: [".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;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding:0 var(--kbq-size-m)}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:8px 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after{content:\"\";position:absolute;left:0;bottom:0;right:0;height:1px;background:var(--kbq-line-contrast-less)}.kbq-tab-list__active-tab-underline{display:none}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{display:block;position:absolute;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-nav-bar{display:flex;position:relative}.kbq-tab-nav-bar .kbq-tab-link__container{display:flex;flex-grow:1;z-index:1;overflow:hidden}.kbq-tab-nav-bar .kbq-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-nav-bar .kbq-tab-list__content{display:flex}.kbq-tab-nav-bar.kbq-tab-group_vertical .kbq-tab-link__container{overflow-y:scroll}.kbq-tab-nav-bar.kbq-tab-group_vertical .kbq-tab-list__content{flex-direction:column;gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical)}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}\n", ".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) - var(--kbq-tabs-size-tab-item-focus-outline-width)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius);outline:none}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){padding-left:14px;padding-right:14px}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left{padding-left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right{padding-right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.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;overflow:hidden;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal)}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{content:\"\";position:absolute;inset:-10px 0}.kbq-tab-link.kbq-tab-label_icon-only{width:var(--kbq-size-3xl);height:var(--kbq-size-3xl);padding:0!important;margin-inline:var(--kbq-size-xs);box-sizing:content-box}.kbq-tab-link.kbq-tab-label_icon-only:not(.kbq-tab-label_vertical):after{content:\"\";display:block;position:absolute;top:0;bottom:0;left:calc(-1 * (var(--kbq-size-xs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));background:transparent}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content:not(.kbq-tab-label__template){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-link.kbq-tab-label_vertical.kbq-tab-label_icon-only{margin-inline:0;justify-content:center}.kbq-tab-link .kbq-tab-group_stretch-labels .kbq-tab-link{flex-basis:0;flex-grow:1}\n"] }]
         }], propDecorators: { tabListContainer: [{
                 type: ViewChild,
                 args: ['tabListContainer', { static: true }]
@@ -1447,28 +1447,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             }], items: [{
                 type: ContentChildren,
                 args: [forwardRef(() => KbqTabLink), { descendants: true }]
-            }], transparent: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], onSurface: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], underlined: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], tabNavPanel: [{
-                type: Input
-            }] } });
+            }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], onSurface: [{ type: i0.Input, args: [{ isSignal: true, alias: "onSurface", required: false }] }], underlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "underlined", required: false }] }], tabNavPanel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabNavPanel", required: false }] }] } });
 /**
  * Link inside of a KbqTabNavBar.
  */
 class KbqTabLink {
     constructor() {
         /** Unique id for the link. */
+        // TODO: Skipped for migration because:
+        //  Class of this input is referenced in the signature of another class.
         this.id = `kbq-tab-link-${nextUniqueId++}`;
         /** Whether the tab link is active or not. */
         this._active = false;
         /** Whether the tab link is disabled. */
+        // TODO: Skipped for migration because:
+        //  Class of this input is referenced in the signature of another class.
         this.disabled = false;
         this._tabIndex = 0;
         this.elementRef = inject(ElementRef);
@@ -1477,6 +1470,8 @@ class KbqTabLink {
         this.tabNavBar = inject(KbqTabNavBar);
     }
     /** Whether the link is active. */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get active() {
         return this._active;
     }
@@ -1490,11 +1485,13 @@ class KbqTabLink {
         return this.tabNavBar.vertical;
     }
     get underlined() {
-        return this.tabNavBar.underlined;
+        return this.tabNavBar.underlined();
     }
     /** Link tab index. */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get tabIndex() {
-        if (this.tabNavBar.tabNavPanel) {
+        if (this.tabNavBar.tabNavPanel()) {
             return this.active && !this.disabled ? this._tabIndex : -1;
         }
         else {
@@ -1506,7 +1503,7 @@ class KbqTabLink {
     }
     /** Link aria-selected attribute value. */
     get ariaSelected() {
-        if (this.tabNavBar.tabNavPanel) {
+        if (this.tabNavBar.tabNavPanel()) {
             return this.active ? 'true' : 'false';
         }
         else {
@@ -1515,17 +1512,16 @@ class KbqTabLink {
     }
     /** Link role attribute value. */
     get role() {
-        return this.tabNavBar.tabNavPanel ? 'tab' : this.elementRef.nativeElement.getAttribute('role');
+        return this.tabNavBar.tabNavPanel() ? 'tab' : this.elementRef.nativeElement.getAttribute('role');
     }
     /** Link aria-controls attribute value. */
     get ariaControls() {
-        return this.tabNavBar.tabNavPanel
-            ? this.tabNavBar.tabNavPanel?.id
-            : this.elementRef.nativeElement.getAttribute('aria-controls');
+        const tabNavPanel = this.tabNavBar.tabNavPanel();
+        return tabNavPanel ? tabNavPanel?.id() : this.elementRef.nativeElement.getAttribute('aria-controls');
     }
     /** Link aria-current attribute value. */
     get ariaCurrent() {
-        return this.active && !this.tabNavBar.tabNavPanel ? 'page' : null;
+        return this.active && !this.tabNavBar.tabNavPanel() ? 'page' : null;
     }
     ngAfterViewInit() {
         this.focusMonitor.monitor(this.elementRef.nativeElement);
@@ -1567,7 +1563,7 @@ class KbqTabLink {
             if (this.disabled) {
                 event.preventDefault();
             }
-            else if (this.tabNavBar.tabNavPanel) {
+            else if (this.tabNavBar.tabNavPanel()) {
                 // Only prevent the default action on space since it can scroll the page.
                 // Don't prevent enter since it can break link navigation.
                 if (event.keyCode === SPACE) {
@@ -1577,14 +1573,13 @@ class KbqTabLink {
             }
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTabLink, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", type: KbqTabLink, isStandalone: true, selector: "[kbqTabLink], [kbq-tab-link]", inputs: { id: "id", active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], tabIndex: ["tabIndex", "tabIndex", numberAttribute] }, host: { listeners: { "focus": "handleFocus()", "keydown": "handleKeydown($event)" }, properties: { "class.kbq-selected": "active", "class.kbq-tab-label_vertical": "vertical", "class.kbq-tab-label_horizontal": "!vertical", "class.kbq-tab-label_underlined": "underlined", "class.kbq-disabled": "disabled", "attr.id": "id", "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null", "attr.aria-disabled": "disabled", "attr.aria-selected": "ariaSelected", "attr.role": "role", "attr.aria-controls": "ariaControls", "attr.aria-current": "ariaCurrent" }, classAttribute: "kbq-tab-link" }, exportAs: ["kbqTabLink"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabLink, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.25", type: KbqTabLink, isStandalone: true, selector: "[kbqTabLink], [kbq-tab-link]", inputs: { id: "id", active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], tabIndex: ["tabIndex", "tabIndex", numberAttribute] }, host: { listeners: { "focus": "handleFocus()", "keydown": "handleKeydown($event)" }, properties: { "class.kbq-selected": "active", "class.kbq-tab-label_vertical": "vertical", "class.kbq-tab-label_horizontal": "!vertical", "class.kbq-tab-label_underlined": "underlined", "class.kbq-disabled": "disabled", "attr.id": "id", "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null", "attr.aria-disabled": "disabled", "attr.aria-selected": "ariaSelected", "attr.role": "role", "attr.aria-controls": "ariaControls", "attr.aria-current": "ariaCurrent" }, classAttribute: "kbq-tab-link" }, exportAs: ["kbqTabLink"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTabLink, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabLink, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTabLink], [kbq-tab-link]',
-                    exportAs: 'kbqTabLink',
                     host: {
                         class: 'kbq-tab-link',
                         '[class.kbq-selected]': 'active',
@@ -1602,7 +1597,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '[attr.aria-current]': 'ariaCurrent',
                         '(focus)': 'handleFocus()',
                         '(keydown)': 'handleKeydown($event)'
-                    }
+                    },
+                    exportAs: 'kbqTabLink'
                 }]
         }], propDecorators: { id: [{
                 type: Input
@@ -1622,26 +1618,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 class KbqTabNavPanel {
     constructor() {
         /** Unique id for the tab panel. */
-        this.id = `kbq-tab-nav-panel-${nextUniqueId++}`;
+        this.id = input(`kbq-tab-nav-panel-${nextUniqueId++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTabNavPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqTabNavPanel, isStandalone: true, selector: "[kbqTabNavPanel]", inputs: { id: "id" }, host: { attributes: { "role": "tabpanel" }, properties: { "attr.id": "id", "attr.aria-labelledby": "activeTabId" }, classAttribute: "kbq-tab-nav-panel" }, exportAs: ["kbqTabNavPanel"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabNavPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqTabNavPanel, isStandalone: true, selector: "[kbqTabNavPanel]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tabpanel" }, properties: { "attr.id": "id()", "attr.aria-labelledby": "activeTabId" }, classAttribute: "kbq-tab-nav-panel" }, exportAs: ["kbqTabNavPanel"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTabNavPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabNavPanel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTabNavPanel]',
-                    exportAs: 'kbqTabNavPanel',
                     host: {
                         class: 'kbq-tab-nav-panel',
-                        '[attr.id]': 'id',
+                        '[attr.id]': 'id()',
                         '[attr.aria-labelledby]': 'activeTabId',
                         role: 'tabpanel'
-                    }
+                    },
+                    exportAs: 'kbqTabNavPanel'
                 }]
-        }], propDecorators: { id: [{
-                type: Input
-            }] } });
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 const STANDALONE_COMPONENTS = [
     KbqTabNavBar,
@@ -1663,8 +1657,8 @@ const COMPONENTS = [
     KbqVerticalTabsCssStyler
 ];
 class KbqTabsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqTabsModule, imports: [PortalModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqTabsModule, imports: [PortalModule,
             A11yModule,
             CdkScrollableModule,
             KbqIconModule,
@@ -1696,14 +1690,14 @@ class KbqTabsModule {
             KbqVerticalTabsCssStyler, KbqTabNavBar,
             KbqTabLink,
             KbqTabNavPanel] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTabsModule, imports: [PortalModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabsModule, imports: [PortalModule,
             A11yModule,
             CdkScrollableModule,
             KbqIconModule,
             KbqToolTipModule, KbqTabNavBar, KbqTabGroup,
             KbqTabHeader] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTabsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTabsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [