@koobiq/components 21.0.0 → 21.1.0

package/fesm2022/koobiq-components-tabs.mjs

@@ -143,6 +143,10 @@ class KbqPaginatedTabHeader {
         this.disableScrollAfter = true;
         /** Whether the tab list can be scrolled more towards the beginning of the tab label list. */
         this.disableScrollBefore = true;
+        /** @docs-private */
+        this.overflowBefore = false;
+        /** @docs-private */
+        this.overflowAfter = false;
         this._disablePagination = false;
         this._vertical = false;
         /** `disablePagination` as of the last content check — see `ngAfterContentChecked`. */
@@ -256,11 +260,16 @@ class KbqPaginatedTabHeader {
             fromEvent(container, 'scroll', passiveEventListenerOptions)
                 .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe(() => {
-                // A `vertical`/`disablePagination` header still fires native `scroll` events
-                // (e.g. `kbq-tab-group_vertical`'s own `overflow-y: auto`); without this guard
-                // every one of them would still throttle-trigger a whole-app change-detection
-                // tick for four booleans that `updateScrollState` has already pinned to a
-                // constant and can never change.
+                if (this.vertical) {
+                    const { overflowBefore, overflowAfter } = this;
+                    this.updateScrollState();
+                    if (overflowBefore !== this.overflowBefore || overflowAfter !== this.overflowAfter) {
+                        this.scrollProgress.next();
+                    }
+                    return;
+                }
+                // Without this guard every native `scroll` of a `disablePagination` header would
+                // throttle-trigger a whole-app change-detection tick for pinned booleans.
                 if (this.disablePagination)
                     return;
                 this.updateScrollState();
@@ -713,11 +722,19 @@ class KbqPaginatedTabHeader {
      * should be called sparingly.
      */
     updateScrollState() {
+        const container = this.tabListContainer.nativeElement;
         if (this.disablePagination) {
             this.disableScrollAfter = this.disableScrollBefore = true;
+            if (this.vertical) {
+                const maxScrollTop = container.scrollHeight - container.clientHeight;
+                this.overflowBefore = container.scrollTop > 0;
+                this.overflowAfter = container.scrollTop < maxScrollTop - kbqGetScrollOverflowTolerance(container);
+            }
+            else {
+                this.overflowBefore = this.overflowAfter = false;
+            }
             return;
         }
-        const container = this.tabListContainer.nativeElement;
         const position = this.logicalScrollPosition;
         const maxScrollPosition = container.scrollWidth - container.clientWidth;
         // The start of the range is exactly `0` in both directions — `logicalScrollPosition` negates
@@ -727,6 +744,8 @@ class KbqPaginatedTabHeader {
         // leaves the arrow and its edge mask enabled with nowhere left to scroll.
         this.disableScrollBefore = position <= 0;
         this.disableScrollAfter = position >= maxScrollPosition - kbqGetScrollOverflowTolerance(container);
+        this.overflowBefore = !this.disableScrollBefore;
+        this.overflowAfter = !this.disableScrollAfter;
     }
     handlePointerDown(event) {
         if (!this.platform.isBrowser || this.disablePagination || !this.showPaginationControls)
@@ -1335,7 +1354,7 @@ class KbqTabHeader extends KbqPaginatedTabHeader {
         event.preventDefault();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabHeader, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.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: "itemsQuery", predicate: KbqTabLabelWrapper, isSignal: true }], viewQueries: [{ propertyName: "tabListContainerQuery", first: true, predicate: ["tabListContainer"], descendants: true, isSignal: true }, { propertyName: "scrollbarViewportQuery", first: true, predicate: ["tabListContainer"], descendants: true, read: KbqScrollbarViewport, isSignal: true }, { propertyName: "tabListQuery", first: true, predicate: ["tabList"], descendants: true, isSignal: true }, { propertyName: "nextPaginatorQuery", first: true, predicate: ["nextPaginator"], descendants: true, isSignal: true }, { propertyName: "previousPaginatorQuery", first: true, predicate: ["previousPaginator"], descendants: true, isSignal: 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=\"contrast\"></i>\n</div>\n\n<div\n    #tabListContainer\n    kbqScrollbarViewport\n    class=\"kbq-tab-header__container kbq-tab-header__scroll-container\"\n    [kbqScrollbarMode]=\"scrollbarMode\"\n    [class.kbq-tab-header__scroll-container_overflow-before]=\"!disableScrollBefore\"\n    [class.kbq-tab-header__scroll-container_overflow-after]=\"!disableScrollAfter\"\n    (keydown)=\"handleKeydown($event)\"\n>\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\" role=\"tablist\" [attr.aria-orientation]=\"vertical ? 'vertical' : null\">\n            <ng-content />\n            <div\n                aria-hidden=\"true\"\n                class=\"kbq-tab-list__active-tab-underline\"\n                [class.kbq-animations-disabled]=\"animationsDisabled\"\n                [class.kbq-disabled]=\"activeTabDisabled\"\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=\"contrast\"></i>\n</div>\n", styles: ["@charset \"UTF-8\";.kbq-tab-header__pagination{-webkit-user-select:none;user-select:none;position:absolute;inset-block:0;display:none;justify-content:center;align-items:center;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:manipulation;padding:0 var(--kbq-size-m);opacity:1;visibility:visible}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header__pagination.kbq-disabled{opacity:0;visibility:hidden;pointer-events:none}.kbq-tab-header__pagination_before{inset-inline-start:0}.kbq-tab-header__pagination_after{inset-inline-end:0}.kbq-tab-header__scroll-container{-webkit-user-select:none;user-select:none;--mask-size: calc(var(--kbq-size-m) * 2 + 16px);overflow-x:auto;overflow-y:hidden}.kbq-tab-group_vertical .kbq-tab-header__scroll-container{overflow-x:hidden;overflow-y:auto}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__scroll-container{cursor:grab}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_dragging{cursor:grabbing}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:var(--kbq-size-s) 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label:first-child:not(.kbq-tab-label_icon-only),.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-link:first-child{margin-inline-start:calc(-1 * var(--kbq-tabs-size-tab-item-padding-horizontal))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label_icon-only:first-child{margin-inline-start: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:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-disabled{background:var(--kbq-states-icon-disabled)}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{animation:none;transition:none}}.kbq-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0;border-radius:var(--kbq-tabs-size-tab-stack-horizontal-border-radius)}@supports (corner-shape: squircle){.kbq-tab-header{corner-shape:squircle;border-radius:clamp(var(--kbq-tabs-size-tab-stack-horizontal-border-radius) * 1.85,var(--kbq-tabs-size-tab-stack-horizontal-border-radius) * 2.3 - 3.6px,var(--kbq-tabs-size-tab-stack-horizontal-border-radius) * 2)}}.kbq-tab-group:not(.kbq-tab-group_on-surface) .kbq-tab-header.kbq-tab-header_underlined{border-radius:0}.kbq-tab-header.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled){overflow:visible}.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}.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) .kbq-tab-header__container{overflow:visible}.kbq-tab-list{position:relative;width:100%}.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)}@supports (corner-shape: squircle){.kbq-tab-label{corner-shape:squircle;border-radius:clamp(var(--kbq-tabs-size-tab-item-border-radius) * 1.85,var(--kbq-tabs-size-tab-item-border-radius) * 2.3 - 3.6px,var(--kbq-tabs-size-tab-item-border-radius) * 2)}}.kbq-tab-label{outline:none}.kbq-tab-label.kbq-selected{cursor:default}.kbq-tab-label.cdk-keyboard-focused{z-index:1}.kbq-tab-label.kbq-disabled{pointer-events:none}.kbq-tab-label .kbq-tab-label__content{display:flex;align-items:center;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:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width))) calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):not(.kbq-tab-label_icon-only):after{content:\"\";position:absolute;left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:transparent;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-label.kbq-tab-label_icon-only{width:var(--kbq-size-3xl);height:var(--kbq-size-3xl);padding:0;margin-inline:var(--kbq-size-xxs);box-sizing:content-box}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){width:var(--kbq-tabs-size-tab-item-underlined-icon-only-size);height:var(--kbq-tabs-size-tab-item-underlined-icon-only-size)}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)))}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):after{top:auto;bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;left:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;transition:background .2s ease-in-out;pointer-events:none}.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-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + 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;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: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "directive", type: KbqScrollbarViewport, selector: "[kbqScrollbarViewport]", inputs: ["kbqScrollbarMode", "kbqScrollbarHideDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.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: "itemsQuery", predicate: KbqTabLabelWrapper, isSignal: true }], viewQueries: [{ propertyName: "tabListContainerQuery", first: true, predicate: ["tabListContainer"], descendants: true, isSignal: true }, { propertyName: "scrollbarViewportQuery", first: true, predicate: ["tabListContainer"], descendants: true, read: KbqScrollbarViewport, isSignal: true }, { propertyName: "tabListQuery", first: true, predicate: ["tabList"], descendants: true, isSignal: true }, { propertyName: "nextPaginatorQuery", first: true, predicate: ["nextPaginator"], descendants: true, isSignal: true }, { propertyName: "previousPaginatorQuery", first: true, predicate: ["previousPaginator"], descendants: true, isSignal: 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=\"contrast\"></i>\n</div>\n\n<div\n    #tabListContainer\n    kbqScrollbarViewport\n    class=\"kbq-tab-header__container kbq-tab-header__scroll-container\"\n    [kbqScrollbarMode]=\"scrollbarMode\"\n    [class.kbq-tab-header__scroll-container_overflow-before]=\"overflowBefore\"\n    [class.kbq-tab-header__scroll-container_overflow-after]=\"overflowAfter\"\n    (keydown)=\"handleKeydown($event)\"\n>\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\" role=\"tablist\" [attr.aria-orientation]=\"vertical ? 'vertical' : null\">\n            <ng-content />\n            <div\n                aria-hidden=\"true\"\n                class=\"kbq-tab-list__active-tab-underline\"\n                [class.kbq-animations-disabled]=\"animationsDisabled\"\n                [class.kbq-disabled]=\"activeTabDisabled\"\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=\"contrast\"></i>\n</div>\n", styles: ["@charset \"UTF-8\";.kbq-tab-header__pagination{-webkit-user-select:none;user-select:none;position:absolute;inset-block:0;display:none;justify-content:center;align-items:center;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:manipulation;padding:0 var(--kbq-size-m);opacity:1;visibility:visible}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header__pagination.kbq-disabled{opacity:0;visibility:hidden;pointer-events:none}.kbq-tab-header__pagination_before{inset-inline-start:0}.kbq-tab-header__pagination_after{inset-inline-end:0}.kbq-tab-header__scroll-container{-webkit-user-select:none;user-select:none;--mask-size: calc(var(--kbq-size-m) * 2 + 16px);overflow-x:auto;overflow-y:hidden}.kbq-tab-group_vertical .kbq-tab-header__scroll-container{overflow-x:hidden;overflow-y:auto}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__scroll-container{cursor:grab}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_dragging{cursor:grabbing}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-group_vertical .kbq-tab-header__scroll-container{--mask-size: var(--kbq-size-3xl)}.kbq-tab-group_vertical .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--mask-size));mask-image:linear-gradient(to bottom,transparent,#000 var(--mask-size))}.kbq-tab-group_vertical .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--mask-size)),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - var(--mask-size)),transparent)}.kbq-tab-group_vertical .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--mask-size),#000 calc(100% - var(--mask-size)),transparent);mask-image:linear-gradient(to bottom,transparent,#000 var(--mask-size),#000 calc(100% - var(--mask-size)),transparent)}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:var(--kbq-size-s) 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label:first-child:not(.kbq-tab-label_icon-only),.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-link:first-child{margin-inline-start:calc(-1 * var(--kbq-tabs-size-tab-item-padding-horizontal))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label_icon-only:first-child{margin-inline-start: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:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-disabled{background:var(--kbq-states-icon-disabled)}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{animation:none;transition:none}}.kbq-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0;border-radius:var(--kbq-tabs-size-tab-stack-horizontal-border-radius)}@supports (corner-shape: squircle){.kbq-tab-header{corner-shape:squircle;border-radius:clamp(var(--kbq-tabs-size-tab-stack-horizontal-border-radius) * 1.85,var(--kbq-tabs-size-tab-stack-horizontal-border-radius) * 2.3 - 3.6px,var(--kbq-tabs-size-tab-stack-horizontal-border-radius) * 2)}}.kbq-tab-group:not(.kbq-tab-group_on-surface) .kbq-tab-header.kbq-tab-header_underlined{border-radius:0}.kbq-tab-header.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled){overflow:visible}.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}.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) .kbq-tab-header__container{overflow:visible}.kbq-tab-list{position:relative;width:100%}.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)}@supports (corner-shape: squircle){.kbq-tab-label{corner-shape:squircle;border-radius:clamp(var(--kbq-tabs-size-tab-item-border-radius) * 1.85,var(--kbq-tabs-size-tab-item-border-radius) * 2.3 - 3.6px,var(--kbq-tabs-size-tab-item-border-radius) * 2)}}.kbq-tab-label{outline:none}.kbq-tab-label.kbq-selected{cursor:default}.kbq-tab-label.cdk-keyboard-focused{z-index:1}.kbq-tab-label.kbq-disabled{pointer-events:none}.kbq-tab-label .kbq-tab-label__content{display:flex;align-items:center;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:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width))) calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):not(.kbq-tab-label_icon-only):after{content:\"\";position:absolute;left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:transparent;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-label.kbq-tab-label_icon-only{width:var(--kbq-size-3xl);height:var(--kbq-size-3xl);padding:0;margin-inline:var(--kbq-size-xxs);box-sizing:content-box}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){width:var(--kbq-tabs-size-tab-item-underlined-icon-only-size);height:var(--kbq-tabs-size-tab-item-underlined-icon-only-size)}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)))}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):after{top:auto;bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;left:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;transition:background .2s ease-in-out;pointer-events:none}.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-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + 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;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: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "directive", type: KbqScrollbarViewport, selector: "[kbqScrollbarViewport]", inputs: ["kbqScrollbarMode", "kbqScrollbarHideDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabHeader, decorators: [{
             type: Component,
@@ -1345,7 +1364,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                         '[class.kbq-tab-header_underlined]': 'underlined()',
                         '[class.kbq-tab-header__pagination-controls_enabled]': 'showPaginationControls',
                         '[class.kbq-tab-header_rtl]': "getLayoutDirection() == 'rtl'"
-                    }, 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=\"contrast\"></i>\n</div>\n\n<div\n    #tabListContainer\n    kbqScrollbarViewport\n    class=\"kbq-tab-header__container kbq-tab-header__scroll-container\"\n    [kbqScrollbarMode]=\"scrollbarMode\"\n    [class.kbq-tab-header__scroll-container_overflow-before]=\"!disableScrollBefore\"\n    [class.kbq-tab-header__scroll-container_overflow-after]=\"!disableScrollAfter\"\n    (keydown)=\"handleKeydown($event)\"\n>\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\" role=\"tablist\" [attr.aria-orientation]=\"vertical ? 'vertical' : null\">\n            <ng-content />\n            <div\n                aria-hidden=\"true\"\n                class=\"kbq-tab-list__active-tab-underline\"\n                [class.kbq-animations-disabled]=\"animationsDisabled\"\n                [class.kbq-disabled]=\"activeTabDisabled\"\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=\"contrast\"></i>\n</div>\n", styles: ["@charset \"UTF-8\";.kbq-tab-header__pagination{-webkit-user-select:none;user-select:none;position:absolute;inset-block:0;display:none;justify-content:center;align-items:center;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:manipulation;padding:0 var(--kbq-size-m);opacity:1;visibility:visible}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header__pagination.kbq-disabled{opacity:0;visibility:hidden;pointer-events:none}.kbq-tab-header__pagination_before{inset-inline-start:0}.kbq-tab-header__pagination_after{inset-inline-end:0}.kbq-tab-header__scroll-container{-webkit-user-select:none;user-select:none;--mask-size: calc(var(--kbq-size-m) * 2 + 16px);overflow-x:auto;overflow-y:hidden}.kbq-tab-group_vertical .kbq-tab-header__scroll-container{overflow-x:hidden;overflow-y:auto}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__scroll-container{cursor:grab}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_dragging{cursor:grabbing}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:var(--kbq-size-s) 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label:first-child:not(.kbq-tab-label_icon-only),.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-link:first-child{margin-inline-start:calc(-1 * var(--kbq-tabs-size-tab-item-padding-horizontal))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label_icon-only:first-child{margin-inline-start: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:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-disabled{background:var(--kbq-states-icon-disabled)}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{animation:none;transition:none}}.kbq-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0;border-radius:var(--kbq-tabs-size-tab-stack-horizontal-border-radius)}@supports (corner-shape: squircle){.kbq-tab-header{corner-shape:squircle;border-radius:clamp(var(--kbq-tabs-size-tab-stack-horizontal-border-radius) * 1.85,var(--kbq-tabs-size-tab-stack-horizontal-border-radius) * 2.3 - 3.6px,var(--kbq-tabs-size-tab-stack-horizontal-border-radius) * 2)}}.kbq-tab-group:not(.kbq-tab-group_on-surface) .kbq-tab-header.kbq-tab-header_underlined{border-radius:0}.kbq-tab-header.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled){overflow:visible}.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}.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) .kbq-tab-header__container{overflow:visible}.kbq-tab-list{position:relative;width:100%}.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)}@supports (corner-shape: squircle){.kbq-tab-label{corner-shape:squircle;border-radius:clamp(var(--kbq-tabs-size-tab-item-border-radius) * 1.85,var(--kbq-tabs-size-tab-item-border-radius) * 2.3 - 3.6px,var(--kbq-tabs-size-tab-item-border-radius) * 2)}}.kbq-tab-label{outline:none}.kbq-tab-label.kbq-selected{cursor:default}.kbq-tab-label.cdk-keyboard-focused{z-index:1}.kbq-tab-label.kbq-disabled{pointer-events:none}.kbq-tab-label .kbq-tab-label__content{display:flex;align-items:center;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:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width))) calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):not(.kbq-tab-label_icon-only):after{content:\"\";position:absolute;left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:transparent;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-label.kbq-tab-label_icon-only{width:var(--kbq-size-3xl);height:var(--kbq-size-3xl);padding:0;margin-inline:var(--kbq-size-xxs);box-sizing:content-box}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){width:var(--kbq-tabs-size-tab-item-underlined-icon-only-size);height:var(--kbq-tabs-size-tab-item-underlined-icon-only-size)}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)))}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):after{top:auto;bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;left:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;transition:background .2s ease-in-out;pointer-events:none}.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-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + 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;user-select:none}.kbq-tab-group_stretch-labels .kbq-tab-label{flex-basis:0;flex-grow:1}\n"] }]
+                    }, 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=\"contrast\"></i>\n</div>\n\n<div\n    #tabListContainer\n    kbqScrollbarViewport\n    class=\"kbq-tab-header__container kbq-tab-header__scroll-container\"\n    [kbqScrollbarMode]=\"scrollbarMode\"\n    [class.kbq-tab-header__scroll-container_overflow-before]=\"overflowBefore\"\n    [class.kbq-tab-header__scroll-container_overflow-after]=\"overflowAfter\"\n    (keydown)=\"handleKeydown($event)\"\n>\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\" role=\"tablist\" [attr.aria-orientation]=\"vertical ? 'vertical' : null\">\n            <ng-content />\n            <div\n                aria-hidden=\"true\"\n                class=\"kbq-tab-list__active-tab-underline\"\n                [class.kbq-animations-disabled]=\"animationsDisabled\"\n                [class.kbq-disabled]=\"activeTabDisabled\"\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=\"contrast\"></i>\n</div>\n", styles: ["@charset \"UTF-8\";.kbq-tab-header__pagination{-webkit-user-select:none;user-select:none;position:absolute;inset-block:0;display:none;justify-content:center;align-items:center;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:manipulation;padding:0 var(--kbq-size-m);opacity:1;visibility:visible}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header__pagination.kbq-disabled{opacity:0;visibility:hidden;pointer-events:none}.kbq-tab-header__pagination_before{inset-inline-start:0}.kbq-tab-header__pagination_after{inset-inline-end:0}.kbq-tab-header__scroll-container{-webkit-user-select:none;user-select:none;--mask-size: calc(var(--kbq-size-m) * 2 + 16px);overflow-x:auto;overflow-y:hidden}.kbq-tab-group_vertical .kbq-tab-header__scroll-container{overflow-x:hidden;overflow-y:auto}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__scroll-container{cursor:grab}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_dragging{cursor:grabbing}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-group_vertical .kbq-tab-header__scroll-container{--mask-size: var(--kbq-size-3xl)}.kbq-tab-group_vertical .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--mask-size));mask-image:linear-gradient(to bottom,transparent,#000 var(--mask-size))}.kbq-tab-group_vertical .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--mask-size)),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - var(--mask-size)),transparent)}.kbq-tab-group_vertical .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--mask-size),#000 calc(100% - var(--mask-size)),transparent);mask-image:linear-gradient(to bottom,transparent,#000 var(--mask-size),#000 calc(100% - var(--mask-size)),transparent)}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:var(--kbq-size-s) 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label:first-child:not(.kbq-tab-label_icon-only),.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-link:first-child{margin-inline-start:calc(-1 * var(--kbq-tabs-size-tab-item-padding-horizontal))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label_icon-only:first-child{margin-inline-start: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:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-disabled{background:var(--kbq-states-icon-disabled)}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{animation:none;transition:none}}.kbq-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0;border-radius:var(--kbq-tabs-size-tab-stack-horizontal-border-radius)}@supports (corner-shape: squircle){.kbq-tab-header{corner-shape:squircle;border-radius:clamp(var(--kbq-tabs-size-tab-stack-horizontal-border-radius) * 1.85,var(--kbq-tabs-size-tab-stack-horizontal-border-radius) * 2.3 - 3.6px,var(--kbq-tabs-size-tab-stack-horizontal-border-radius) * 2)}}.kbq-tab-group:not(.kbq-tab-group_on-surface) .kbq-tab-header.kbq-tab-header_underlined{border-radius:0}.kbq-tab-header.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled){overflow:visible}.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}.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) .kbq-tab-header__container{overflow:visible}.kbq-tab-list{position:relative;width:100%}.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)}@supports (corner-shape: squircle){.kbq-tab-label{corner-shape:squircle;border-radius:clamp(var(--kbq-tabs-size-tab-item-border-radius) * 1.85,var(--kbq-tabs-size-tab-item-border-radius) * 2.3 - 3.6px,var(--kbq-tabs-size-tab-item-border-radius) * 2)}}.kbq-tab-label{outline:none}.kbq-tab-label.kbq-selected{cursor:default}.kbq-tab-label.cdk-keyboard-focused{z-index:1}.kbq-tab-label.kbq-disabled{pointer-events:none}.kbq-tab-label .kbq-tab-label__content{display:flex;align-items:center;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:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width))) calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-label.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):not(.kbq-tab-label_icon-only):after{content:\"\";position:absolute;left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:transparent;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-label.kbq-tab-label_icon-only{width:var(--kbq-size-3xl);height:var(--kbq-size-3xl);padding:0;margin-inline:var(--kbq-size-xxs);box-sizing:content-box}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){width:var(--kbq-tabs-size-tab-item-underlined-icon-only-size);height:var(--kbq-tabs-size-tab-item-underlined-icon-only-size)}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)))}.kbq-tab-label.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):after{top:auto;bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;left:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;transition:background .2s ease-in-out;pointer-events:none}.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-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + 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;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 }] }], itemsQuery: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqTabLabelWrapper), { ...{ descendants: false }, isSignal: true }] }], tabListContainerQuery: [{ type: i0.ViewChild, args: ['tabListContainer', { isSignal: true }] }], scrollbarViewportQuery: [{ type: i0.ViewChild, args: ['tabListContainer', { ...{ read: KbqScrollbarViewport }, isSignal: true }] }], tabListQuery: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }], nextPaginatorQuery: [{ type: i0.ViewChild, args: ['nextPaginator', { isSignal: true }] }], previousPaginatorQuery: [{ type: i0.ViewChild, args: ['previousPaginator', { isSignal: true }] }] } });
 
 const KBQ_TAB_LABEL = new InjectionToken('KbqTabLabel');
@@ -2009,7 +2028,7 @@ class KbqTabGroup {
         return this.tabs ? this.tabs.toArray().indexOf(currentSelectedTab) : 0;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.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 }, selectedIndexInput: { classPropertyName: "selectedIndexInput", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, activeTabInput: { classPropertyName: "activeTabInput", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, headerPositionInput: { classPropertyName: "headerPositionInput", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, animationDurationInput: { classPropertyName: "animationDurationInput", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndexChange: "selectedIndexChange", activeTabChange: "activeTabChange", focusChange: "focusChange", animationDone: "animationDone", selectedTabChange: "selectedTabChange" }, host: { 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_vertical": "vertical()", "class.kbq-tab-group_inverted-header": "headerPosition === \"below\"" }, classAttribute: "kbq-tab-group" }, providers: [{ provide: KBQ_PARENT_ANIMATION_COMPONENT, useExisting: forwardRef((() => KbqTabGroup)) }], queries: [{ propertyName: "tabsQuery", predicate: KbqTab, isSignal: true }], viewQueries: [{ propertyName: "tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true, isSignal: true }, { propertyName: "tabHeader", first: true, predicate: ["tabHeader"], descendants: true, isSignal: true }], exportAs: ["kbqTabGroup"], usesOnChanges: true, hostDirectives: [{ directive: i1$1.KbqStateSaving, inputs: ["useStateSaving", "useStateSaving", "stateSavingKey", "stateSavingKey"] }], 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            role=\"tab\"\n            [attr.aria-controls]=\"getTabContentId($index)\"\n            [attr.aria-selected]=\"selectedIndex === $index\"\n            [attr.tabindex]=\"getTabIndex(tab, tabHeader, $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            role=\"tabpanel\"\n            [animationDuration]=\"animationDuration\"\n            [attr.aria-labelledby]=\"getTabLabelId($index)\"\n            [attr.tabindex]=\"selectedIndex === $index ? 0 : null\"\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-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-border-radius);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-size-tab-item-underlined-icon-only-size: calc(var(--kbq-size-3xl) - var(--kbq-size-xxs));--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: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "kbqTrigger", "hideWithTimeout", "kbqEnterDelay", "kbqLeaveDelay", "kbqRelativeToPointer", "kbqRelativeToCaret", "kbqRelativeToCaretVertical", "kbqTooltip", "kbqTooltipHeader", "kbqTooltipModifier", "kbqTooltipContext", "kbqTooltipClass", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipDisabled", "kbqPlacementPriority", "kbqPlacement", "kbqVisible"], 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", "origin", "content", "animationDuration"], outputs: ["onCentering", "beforeCentering", "afterLeavingCenter", "onCentered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.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 }, selectedIndexInput: { classPropertyName: "selectedIndexInput", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, activeTabInput: { classPropertyName: "activeTabInput", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, headerPositionInput: { classPropertyName: "headerPositionInput", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, animationDurationInput: { classPropertyName: "animationDurationInput", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndexChange: "selectedIndexChange", activeTabChange: "activeTabChange", focusChange: "focusChange", animationDone: "animationDone", selectedTabChange: "selectedTabChange" }, host: { 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_vertical": "vertical()", "class.kbq-tab-group_inverted-header": "headerPosition === \"below\"" }, classAttribute: "kbq-tab-group" }, providers: [{ provide: KBQ_PARENT_ANIMATION_COMPONENT, useExisting: forwardRef((() => KbqTabGroup)) }], queries: [{ propertyName: "tabsQuery", predicate: KbqTab, isSignal: true }], viewQueries: [{ propertyName: "tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true, isSignal: true }, { propertyName: "tabHeader", first: true, predicate: ["tabHeader"], descendants: true, isSignal: true }], exportAs: ["kbqTabGroup"], usesOnChanges: true, hostDirectives: [{ directive: i1$1.KbqStateSaving, inputs: ["useStateSaving", "useStateSaving", "stateSavingKey", "stateSavingKey"] }], 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            role=\"tab\"\n            [attr.aria-controls]=\"getTabContentId($index)\"\n            [attr.aria-selected]=\"selectedIndex === $index\"\n            [attr.tabindex]=\"getTabIndex(tab, tabHeader, $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            role=\"tabpanel\"\n            [animationDuration]=\"animationDuration\"\n            [attr.aria-labelledby]=\"getTabLabelId($index)\"\n            [attr.tabindex]=\"selectedIndex === $index ? 0 : null\"\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-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-border-radius);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-size-tab-item-underlined-icon-only-size: calc(var(--kbq-size-3xl) - var(--kbq-size-xxs));--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: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "kbqTrigger", "hideWithTimeout", "kbqEnterDelay", "kbqLeaveDelay", "kbqRelativeToPointer", "kbqRelativeToCaret", "kbqRelativeToCaretVertical", "kbqTooltip", "kbqTooltipHeader", "kbqTooltipModifier", "kbqTooltipContext", "kbqTooltipClass", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipArrowCentered", "kbqTooltipOffset", "kbqTooltipDisabled", "kbqPlacementPriority", "kbqPlacement", "kbqVisible"], 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", "origin", "content", "animationDuration"], outputs: ["onCentering", "beforeCentering", "afterLeavingCenter", "onCentered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabGroup, decorators: [{
             type: Component,
@@ -2148,7 +2167,7 @@ class KbqTabNavBar extends KbqPaginatedTabHeader {
         this.selectedIndex = -1;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabNavBar, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.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-group_vertical": "vertical", "class.kbq-tab-header__pagination-controls_enabled": "showPaginationControls", "class.kbq-tab-header_rtl": "getLayoutDirection() == 'rtl'", "attr.role": "role", "attr.aria-orientation": "ariaOrientation" }, classAttribute: "kbq-tab-nav-bar" }, queries: [{ propertyName: "itemsQuery", predicate: i0.forwardRef(() => KbqTabLink), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tabListContainerQuery", first: true, predicate: ["tabListContainer"], descendants: true, isSignal: true }, { propertyName: "scrollbarViewportQuery", first: true, predicate: ["tabListContainer"], descendants: true, read: KbqScrollbarViewport, isSignal: true }, { propertyName: "tabListQuery", first: true, predicate: ["tabList"], descendants: true, isSignal: true }, { propertyName: "nextPaginatorQuery", first: true, predicate: ["nextPaginator"], descendants: true, isSignal: true }, { propertyName: "previousPaginatorQuery", first: true, predicate: ["previousPaginator"], descendants: true, isSignal: 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=\"contrast\"></i>\n</div>\n\n<div\n    #tabListContainer\n    kbqScrollbarViewport\n    class=\"kbq-tab-link__container kbq-tab-header__scroll-container\"\n    [kbqScrollbarMode]=\"scrollbarMode\"\n    [class.kbq-tab-header__scroll-container_overflow-before]=\"!disableScrollBefore\"\n    [class.kbq-tab-header__scroll-container_overflow-after]=\"!disableScrollAfter\"\n    (keydown)=\"handleKeydown($event)\"\n>\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                aria-hidden=\"true\"\n                class=\"kbq-tab-list__active-tab-underline\"\n                [class.kbq-animations-disabled]=\"animationsDisabled\"\n                [class.kbq-disabled]=\"activeTabDisabled\"\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=\"contrast\"></i>\n</div>\n", styles: ["@charset \"UTF-8\";.kbq-tab-header__pagination{-webkit-user-select:none;user-select:none;position:absolute;inset-block:0;display:none;justify-content:center;align-items:center;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:manipulation;padding:0 var(--kbq-size-m);opacity:1;visibility:visible}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header__pagination.kbq-disabled{opacity:0;visibility:hidden;pointer-events:none}.kbq-tab-header__pagination_before{inset-inline-start:0}.kbq-tab-header__pagination_after{inset-inline-end:0}.kbq-tab-header__scroll-container{-webkit-user-select:none;user-select:none;--mask-size: calc(var(--kbq-size-m) * 2 + 16px);overflow-x:auto;overflow-y:hidden}.kbq-tab-group_vertical .kbq-tab-header__scroll-container{overflow-x:hidden;overflow-y:auto}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__scroll-container{cursor:grab}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_dragging{cursor:grabbing}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:var(--kbq-size-s) 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label:first-child:not(.kbq-tab-label_icon-only),.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-link:first-child{margin-inline-start:calc(-1 * var(--kbq-tabs-size-tab-item-padding-horizontal))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label_icon-only:first-child{margin-inline-start: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:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-disabled{background:var(--kbq-states-icon-disabled)}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{animation:none;transition:none}}.kbq-tab-nav-bar{display:flex;position:relative}.kbq-tab-nav-bar .kbq-tab-link__container{display:flex;flex-grow:1;z-index:1}.kbq-tab-nav-bar.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) .kbq-tab-link__container{overflow:visible}.kbq-tab-nav-bar .kbq-tab-list{position:relative;width:100%}.kbq-tab-nav-bar .kbq-tab-list__content{display:flex}.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-border-radius);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-size-tab-item-underlined-icon-only-size: calc(var(--kbq-size-3xl) - var(--kbq-size-xxs));--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", "@charset \"UTF-8\";.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)}@supports (corner-shape: squircle){.kbq-tab-link{corner-shape:squircle;border-radius:clamp(var(--kbq-tabs-size-tab-item-border-radius) * 1.85,var(--kbq-tabs-size-tab-item-border-radius) * 2.3 - 3.6px,var(--kbq-tabs-size-tab-item-border-radius) * 2)}}.kbq-tab-link{outline:none}.kbq-tab-link.kbq-selected{cursor:default}.kbq-tab-link.cdk-keyboard-focused{z-index:1}.kbq-tab-link.kbq-disabled{pointer-events:none}.kbq-tab-link .kbq-tab-label__content{display:flex;align-items:center;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:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width))) calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):not(.kbq-tab-label_icon-only):after{content:\"\";position:absolute;left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:transparent;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-link.kbq-tab-label_icon-only{width:var(--kbq-size-3xl);height:var(--kbq-size-3xl);padding:0;margin-inline:var(--kbq-size-xxs);box-sizing:content-box}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){width:var(--kbq-tabs-size-tab-item-underlined-icon-only-size);height:var(--kbq-tabs-size-tab-item-underlined-icon-only-size)}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)))}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):after{top:auto;bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;left:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;transition:background .2s ease-in-out;pointer-events:none}.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-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + 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: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "directive", type: KbqScrollbarViewport, selector: "[kbqScrollbarViewport]", inputs: ["kbqScrollbarMode", "kbqScrollbarHideDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.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-group_vertical": "vertical", "class.kbq-tab-header__pagination-controls_enabled": "showPaginationControls", "class.kbq-tab-header_rtl": "getLayoutDirection() == 'rtl'", "attr.role": "role", "attr.aria-orientation": "ariaOrientation" }, classAttribute: "kbq-tab-nav-bar" }, queries: [{ propertyName: "itemsQuery", predicate: i0.forwardRef(() => KbqTabLink), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tabListContainerQuery", first: true, predicate: ["tabListContainer"], descendants: true, isSignal: true }, { propertyName: "scrollbarViewportQuery", first: true, predicate: ["tabListContainer"], descendants: true, read: KbqScrollbarViewport, isSignal: true }, { propertyName: "tabListQuery", first: true, predicate: ["tabList"], descendants: true, isSignal: true }, { propertyName: "nextPaginatorQuery", first: true, predicate: ["nextPaginator"], descendants: true, isSignal: true }, { propertyName: "previousPaginatorQuery", first: true, predicate: ["previousPaginator"], descendants: true, isSignal: 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=\"contrast\"></i>\n</div>\n\n<div\n    #tabListContainer\n    kbqScrollbarViewport\n    class=\"kbq-tab-link__container kbq-tab-header__scroll-container\"\n    [kbqScrollbarMode]=\"scrollbarMode\"\n    [class.kbq-tab-header__scroll-container_overflow-before]=\"overflowBefore\"\n    [class.kbq-tab-header__scroll-container_overflow-after]=\"overflowAfter\"\n    (keydown)=\"handleKeydown($event)\"\n>\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                aria-hidden=\"true\"\n                class=\"kbq-tab-list__active-tab-underline\"\n                [class.kbq-animations-disabled]=\"animationsDisabled\"\n                [class.kbq-disabled]=\"activeTabDisabled\"\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=\"contrast\"></i>\n</div>\n", styles: ["@charset \"UTF-8\";.kbq-tab-header__pagination{-webkit-user-select:none;user-select:none;position:absolute;inset-block:0;display:none;justify-content:center;align-items:center;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:manipulation;padding:0 var(--kbq-size-m);opacity:1;visibility:visible}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header__pagination.kbq-disabled{opacity:0;visibility:hidden;pointer-events:none}.kbq-tab-header__pagination_before{inset-inline-start:0}.kbq-tab-header__pagination_after{inset-inline-end:0}.kbq-tab-header__scroll-container{-webkit-user-select:none;user-select:none;--mask-size: calc(var(--kbq-size-m) * 2 + 16px);overflow-x:auto;overflow-y:hidden}.kbq-tab-group_vertical .kbq-tab-header__scroll-container{overflow-x:hidden;overflow-y:auto}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__scroll-container{cursor:grab}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_dragging{cursor:grabbing}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-group_vertical .kbq-tab-header__scroll-container{--mask-size: var(--kbq-size-3xl)}.kbq-tab-group_vertical .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--mask-size));mask-image:linear-gradient(to bottom,transparent,#000 var(--mask-size))}.kbq-tab-group_vertical .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--mask-size)),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - var(--mask-size)),transparent)}.kbq-tab-group_vertical .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--mask-size),#000 calc(100% - var(--mask-size)),transparent);mask-image:linear-gradient(to bottom,transparent,#000 var(--mask-size),#000 calc(100% - var(--mask-size)),transparent)}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:var(--kbq-size-s) 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label:first-child:not(.kbq-tab-label_icon-only),.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-link:first-child{margin-inline-start:calc(-1 * var(--kbq-tabs-size-tab-item-padding-horizontal))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label_icon-only:first-child{margin-inline-start: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:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-disabled{background:var(--kbq-states-icon-disabled)}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{animation:none;transition:none}}.kbq-tab-nav-bar{display:flex;position:relative}.kbq-tab-nav-bar .kbq-tab-link__container{display:flex;flex-grow:1;z-index:1}.kbq-tab-nav-bar.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) .kbq-tab-link__container{overflow:visible}.kbq-tab-nav-bar .kbq-tab-list{position:relative;width:100%}.kbq-tab-nav-bar .kbq-tab-list__content{display:flex}.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-border-radius);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-size-tab-item-underlined-icon-only-size: calc(var(--kbq-size-3xl) - var(--kbq-size-xxs));--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", "@charset \"UTF-8\";.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)}@supports (corner-shape: squircle){.kbq-tab-link{corner-shape:squircle;border-radius:clamp(var(--kbq-tabs-size-tab-item-border-radius) * 1.85,var(--kbq-tabs-size-tab-item-border-radius) * 2.3 - 3.6px,var(--kbq-tabs-size-tab-item-border-radius) * 2)}}.kbq-tab-link{outline:none}.kbq-tab-link.kbq-selected{cursor:default}.kbq-tab-link.cdk-keyboard-focused{z-index:1}.kbq-tab-link.kbq-disabled{pointer-events:none}.kbq-tab-link .kbq-tab-label__content{display:flex;align-items:center;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:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width))) calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):not(.kbq-tab-label_icon-only):after{content:\"\";position:absolute;left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:transparent;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-link.kbq-tab-label_icon-only{width:var(--kbq-size-3xl);height:var(--kbq-size-3xl);padding:0;margin-inline:var(--kbq-size-xxs);box-sizing:content-box}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){width:var(--kbq-tabs-size-tab-item-underlined-icon-only-size);height:var(--kbq-tabs-size-tab-item-underlined-icon-only-size)}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)))}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):after{top:auto;bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;left:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;transition:background .2s ease-in-out;pointer-events:none}.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-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + 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: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "directive", type: KbqScrollbarViewport, selector: "[kbqScrollbarViewport]", inputs: ["kbqScrollbarMode", "kbqScrollbarHideDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTabNavBar, decorators: [{
             type: Component,
@@ -2168,7 +2187,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                         '[class.kbq-tab-header_rtl]': "getLayoutDirection() == 'rtl'",
                         '[attr.role]': 'role',
                         '[attr.aria-orientation]': 'ariaOrientation'
-                    }, 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=\"contrast\"></i>\n</div>\n\n<div\n    #tabListContainer\n    kbqScrollbarViewport\n    class=\"kbq-tab-link__container kbq-tab-header__scroll-container\"\n    [kbqScrollbarMode]=\"scrollbarMode\"\n    [class.kbq-tab-header__scroll-container_overflow-before]=\"!disableScrollBefore\"\n    [class.kbq-tab-header__scroll-container_overflow-after]=\"!disableScrollAfter\"\n    (keydown)=\"handleKeydown($event)\"\n>\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                aria-hidden=\"true\"\n                class=\"kbq-tab-list__active-tab-underline\"\n                [class.kbq-animations-disabled]=\"animationsDisabled\"\n                [class.kbq-disabled]=\"activeTabDisabled\"\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=\"contrast\"></i>\n</div>\n", styles: ["@charset \"UTF-8\";.kbq-tab-header__pagination{-webkit-user-select:none;user-select:none;position:absolute;inset-block:0;display:none;justify-content:center;align-items:center;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:manipulation;padding:0 var(--kbq-size-m);opacity:1;visibility:visible}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header__pagination.kbq-disabled{opacity:0;visibility:hidden;pointer-events:none}.kbq-tab-header__pagination_before{inset-inline-start:0}.kbq-tab-header__pagination_after{inset-inline-end:0}.kbq-tab-header__scroll-container{-webkit-user-select:none;user-select:none;--mask-size: calc(var(--kbq-size-m) * 2 + 16px);overflow-x:auto;overflow-y:hidden}.kbq-tab-group_vertical .kbq-tab-header__scroll-container{overflow-x:hidden;overflow-y:auto}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__scroll-container{cursor:grab}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_dragging{cursor:grabbing}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:var(--kbq-size-s) 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label:first-child:not(.kbq-tab-label_icon-only),.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-link:first-child{margin-inline-start:calc(-1 * var(--kbq-tabs-size-tab-item-padding-horizontal))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label_icon-only:first-child{margin-inline-start: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:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-disabled{background:var(--kbq-states-icon-disabled)}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{animation:none;transition:none}}.kbq-tab-nav-bar{display:flex;position:relative}.kbq-tab-nav-bar .kbq-tab-link__container{display:flex;flex-grow:1;z-index:1}.kbq-tab-nav-bar.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) .kbq-tab-link__container{overflow:visible}.kbq-tab-nav-bar .kbq-tab-list{position:relative;width:100%}.kbq-tab-nav-bar .kbq-tab-list__content{display:flex}.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-border-radius);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-size-tab-item-underlined-icon-only-size: calc(var(--kbq-size-3xl) - var(--kbq-size-xxs));--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", "@charset \"UTF-8\";.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)}@supports (corner-shape: squircle){.kbq-tab-link{corner-shape:squircle;border-radius:clamp(var(--kbq-tabs-size-tab-item-border-radius) * 1.85,var(--kbq-tabs-size-tab-item-border-radius) * 2.3 - 3.6px,var(--kbq-tabs-size-tab-item-border-radius) * 2)}}.kbq-tab-link{outline:none}.kbq-tab-link.kbq-selected{cursor:default}.kbq-tab-link.cdk-keyboard-focused{z-index:1}.kbq-tab-link.kbq-disabled{pointer-events:none}.kbq-tab-link .kbq-tab-label__content{display:flex;align-items:center;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:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width))) calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):not(.kbq-tab-label_icon-only):after{content:\"\";position:absolute;left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:transparent;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-link.kbq-tab-label_icon-only{width:var(--kbq-size-3xl);height:var(--kbq-size-3xl);padding:0;margin-inline:var(--kbq-size-xxs);box-sizing:content-box}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){width:var(--kbq-tabs-size-tab-item-underlined-icon-only-size);height:var(--kbq-tabs-size-tab-item-underlined-icon-only-size)}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)))}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):after{top:auto;bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;left:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;transition:background .2s ease-in-out;pointer-events:none}.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-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + 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"] }]
+                    }, 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=\"contrast\"></i>\n</div>\n\n<div\n    #tabListContainer\n    kbqScrollbarViewport\n    class=\"kbq-tab-link__container kbq-tab-header__scroll-container\"\n    [kbqScrollbarMode]=\"scrollbarMode\"\n    [class.kbq-tab-header__scroll-container_overflow-before]=\"overflowBefore\"\n    [class.kbq-tab-header__scroll-container_overflow-after]=\"overflowAfter\"\n    (keydown)=\"handleKeydown($event)\"\n>\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                aria-hidden=\"true\"\n                class=\"kbq-tab-list__active-tab-underline\"\n                [class.kbq-animations-disabled]=\"animationsDisabled\"\n                [class.kbq-disabled]=\"activeTabDisabled\"\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=\"contrast\"></i>\n</div>\n", styles: ["@charset \"UTF-8\";.kbq-tab-header__pagination{-webkit-user-select:none;user-select:none;position:absolute;inset-block:0;display:none;justify-content:center;align-items:center;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:manipulation;padding:0 var(--kbq-size-m);opacity:1;visibility:visible}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header__pagination:not(.kbq-disabled){cursor:pointer}.kbq-tab-header__pagination.kbq-disabled{opacity:0;visibility:hidden;pointer-events:none}.kbq-tab-header__pagination_before{inset-inline-start:0}.kbq-tab-header__pagination_after{inset-inline-end:0}.kbq-tab-header__scroll-container{-webkit-user-select:none;user-select:none;--mask-size: calc(var(--kbq-size-m) * 2 + 16px);overflow-x:auto;overflow-y:hidden}.kbq-tab-group_vertical .kbq-tab-header__scroll-container{overflow-x:hidden;overflow-y:auto}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__scroll-container{cursor:grab}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_dragging{cursor:grabbing}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to right,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-header_rtl .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)));mask-image:linear-gradient(to left,transparent var(--mask-size),#000 calc(var(--mask-size) * 1.5),#000 calc(100% - var(--mask-size) * 1.5),transparent calc(100% - var(--mask-size)))}.kbq-tab-group_vertical .kbq-tab-header__scroll-container{--mask-size: var(--kbq-size-3xl)}.kbq-tab-group_vertical .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--mask-size));mask-image:linear-gradient(to bottom,transparent,#000 var(--mask-size))}.kbq-tab-group_vertical .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--mask-size)),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - var(--mask-size)),transparent)}.kbq-tab-group_vertical .kbq-tab-header__scroll-container.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--mask-size),#000 calc(100% - var(--mask-size)),transparent);mask-image:linear-gradient(to bottom,transparent,#000 var(--mask-size),#000 calc(100% - var(--mask-size)),transparent)}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:var(--kbq-size-s) 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label:first-child:not(.kbq-tab-label_icon-only),.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-link:first-child{margin-inline-start:calc(-1 * var(--kbq-tabs-size-tab-item-padding-horizontal))}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content>.kbq-tab-label_icon-only:first-child{margin-inline-start: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:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-disabled{background:var(--kbq-states-icon-disabled)}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{animation:none;transition:none}}.kbq-tab-nav-bar{display:flex;position:relative}.kbq-tab-nav-bar .kbq-tab-link__container{display:flex;flex-grow:1;z-index:1}.kbq-tab-nav-bar.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) .kbq-tab-link__container{overflow:visible}.kbq-tab-nav-bar .kbq-tab-list{position:relative;width:100%}.kbq-tab-nav-bar .kbq-tab-list__content{display:flex}.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-border-radius);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-size-tab-item-underlined-icon-only-size: calc(var(--kbq-size-3xl) - var(--kbq-size-xxs));--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", "@charset \"UTF-8\";.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)}@supports (corner-shape: squircle){.kbq-tab-link{corner-shape:squircle;border-radius:clamp(var(--kbq-tabs-size-tab-item-border-radius) * 1.85,var(--kbq-tabs-size-tab-item-border-radius) * 2.3 - 3.6px,var(--kbq-tabs-size-tab-item-border-radius) * 2)}}.kbq-tab-link{outline:none}.kbq-tab-link.kbq-selected{cursor:default}.kbq-tab-link.cdk-keyboard-focused{z-index:1}.kbq-tab-link.kbq-disabled{pointer-events:none}.kbq-tab-link .kbq-tab-label__content{display:flex;align-items:center;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:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width))) calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):not(.kbq-tab-label_icon-only):after{content:\"\";position:absolute;left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;background:transparent;transition:background .2s ease-in-out;pointer-events:none}.kbq-tab-link.kbq-tab-label_icon-only{width:var(--kbq-size-3xl);height:var(--kbq-size-3xl);padding:0;margin-inline:var(--kbq-size-xxs);box-sizing:content-box}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){width:var(--kbq-tabs-size-tab-item-underlined-icon-only-size);height:var(--kbq-tabs-size-tab-item-underlined-icon-only-size)}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{left:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)))}.kbq-tab-link.kbq-tab-label_icon-only.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):after{top:auto;bottom:calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));height:3px;left:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));right:calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));border-radius:var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;transition:background .2s ease-in-out;pointer-events:none}.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-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));right:calc(-1 * (var(--kbq-size-xxs) + 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: { tabListContainerQuery: [{ type: i0.ViewChild, args: ['tabListContainer', { isSignal: true }] }], scrollbarViewportQuery: [{ type: i0.ViewChild, args: ['tabListContainer', { ...{ read: KbqScrollbarViewport }, isSignal: true }] }], tabListQuery: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }], nextPaginatorQuery: [{ type: i0.ViewChild, args: ['nextPaginator', { isSignal: true }] }], previousPaginatorQuery: [{ type: i0.ViewChild, args: ['previousPaginator', { isSignal: true }] }], itemsQuery: [{ type: i0.ContentChildren, args: [forwardRef(() => KbqTabLink), { ...{ descendants: true }, 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 }] }], tabNavPanel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabNavPanel", required: false }] }] } });
 /**
  * Link inside of a KbqTabNavBar.