import { FocusMonitor } from '@angular/cdk/a11y';
import { ENTER, SPACE } from '@angular/cdk/keycodes';
import { CdkObserveContent } from '@angular/cdk/observers';
import { booleanAttribute, ChangeDetectionStrategy, Component, ContentChildren, Directive, ElementRef, forwardRef, inject, Input, numberAttribute, QueryList, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { KbqIconModule } from '@koobiq/components/icon';
import { startWith } from 'rxjs/operators';
import { KbqPaginatedTabHeader } from './paginated-tab-header';
import * as i0 from "@angular/core";
import * as i1 from "@koobiq/components/icon";
// Increasing integer for generating unique ids for tab nav components.
let nextUniqueId = 0;
/**
 * Navigation component matching the styles of the tab group header.
 */
export class KbqTabNavBar extends KbqPaginatedTabHeader {
    constructor() {
        super(...arguments);
        /** Whether the nav bar background should be transparent. */
        this.transparent = false;
        this.onSurface = false;
        /** Whether the nav bar should be underlined. */
        this.underlined = false;
    }
    get role() {
        return this.tabNavPanel ? 'tablist' : this.elementRef.nativeElement.getAttribute('role');
    }
    get activeTabOffsetWidth() {
        return this.items.get(this.selectedIndex)?.elementRef?.nativeElement?.offsetWidth;
    }
    get activeTabOffsetLeft() {
        return this.items.get(this.selectedIndex)?.elementRef?.nativeElement?.offsetLeft;
    }
    ngAfterContentInit() {
        // We need this to run before the `changes` subscription in parent to ensure that the `selectedIndex` is
        // up-to-date by the time the `KbqPaginatedTabHeader` starts looking for it.
        this.items.changes.pipe(startWith(null), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
            this.updateActiveLink();
        });
        super.ngAfterContentInit();
    }
    itemSelected() { }
    /** Notifies the component that the active link has been changed. */
    updateActiveLink() {
        if (!this.items) {
            return;
        }
        const items = this.items.toArray();
        for (let i = 0; i < items.length; i++) {
            if (items[i].active) {
                this.selectedIndex = i;
                this.changeDetectorRef.markForCheck();
                if (this.tabNavPanel) {
                    this.tabNavPanel.activeTabId = items[i].id;
                }
                return;
            }
        }
        // The ink bar should hide itself if no items are active.
        this.selectedIndex = -1;
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTabNavBar, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.14", type: KbqTabNavBar, isStandalone: true, selector: "[kbqTabNavBar], [kbq-tab-nav-bar]", inputs: { transparent: ["transparent", "transparent", booleanAttribute], onSurface: ["onSurface", "onSurface", booleanAttribute], underlined: ["underlined", "underlined", booleanAttribute], tabNavPanel: "tabNavPanel" }, host: { properties: { "class.kbq-tab-nav-bar_filled": "!transparent", "class.kbq-tab-nav-bar_transparent": "transparent", "class.kbq-tab-nav-bar_on-background": "!onSurface", "class.kbq-tab-nav-bar_on-surface": "onSurface", "class.kbq-tab-header_underlined": "underlined", "class.kbq-tab-header__pagination-controls_enabled": "showPaginationControls", "attr.role": "role" }, classAttribute: "kbq-tab-nav-bar" }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => KbqTabLink), descendants: true }], viewQueries: [{ propertyName: "tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, static: true }, { propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true, static: true }, { propertyName: "nextPaginator", first: true, predicate: ["nextPaginator"], descendants: true }, { propertyName: "previousPaginator", first: true, predicate: ["previousPaginator"], descendants: true }], exportAs: ["kbqTabNavBar"], usesInheritance: true, ngImport: i0, template: "<div\n    #previousPaginator\n    class=\"kbq-tab-header__pagination kbq-tab-header__pagination_before\"\n    [class.kbq-disabled]=\"disableScrollBefore\"\n    (click)=\"handlePaginatorClick('before')\"\n    (mousedown)=\"handlePaginatorPress('before', $event)\"\n    (touchend)=\"stopInterval()\"\n>\n    <i kbq-icon=\"kbq-chevron-left_16\"></i>\n</div>\n\n<div #tabListContainer class=\"kbq-tab-link__container\" (keydown)=\"handleKeydown($event)\">\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                class=\"kbq-tab-list__active-tab-underline\"\n                [style.left.px]=\"activeTabOffsetLeft\"\n                [style.width.px]=\"activeTabOffsetWidth\"\n            ></div>\n        </div>\n    </div>\n</div>\n\n<div\n    #nextPaginator\n    class=\"kbq-tab-header__pagination kbq-tab-header__pagination_after\"\n    [class.kbq-disabled]=\"disableScrollAfter\"\n    (click)=\"handlePaginatorClick('after')\"\n    (mousedown)=\"handlePaginatorPress('after', $event)\"\n    (touchend)=\"stopInterval()\"\n>\n    <i kbq-icon=\"kbq-chevron-right_16\"></i>\n</div>\n", styles: [".kbq-tab-header__pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding:0 var(--kbq-size-m)}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:8px 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after{content:\"\";position:absolute;left:0;bottom:0;right:0;height:1px;background:var(--kbq-line-contrast-less)}.kbq-tab-list__active-tab-underline{display:none}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{display:block;position:absolute;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-nav-bar{display:flex;position:relative}.kbq-tab-nav-bar .kbq-tab-link__container{display:flex;flex-grow:1;z-index:1;overflow:hidden}.kbq-tab-nav-bar .kbq-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-nav-bar .kbq-tab-list__content{display:flex}.kbq-tab-nav-bar.kbq-tab-group_vertical .kbq-tab-link__container{overflow-y:scroll}.kbq-tab-nav-bar.kbq-tab-group_vertical .kbq-tab-list__content{flex-direction:column;gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical)}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}\n", ".kbq-tab-link{vertical-align:top;text-decoration:none;-webkit-tap-highlight-color:transparent;position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical) - var(--kbq-tabs-size-tab-item-focus-outline-width)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius);outline:none}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){padding-left:14px;padding-right:14px}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left{padding-left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right{padding-right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-selected{cursor:default}.kbq-tab-link.cdk-keyboard-focused{z-index:1}.kbq-tab-link.kbq-disabled{pointer-events:none}.kbq-tab-link .kbq-tab-label__content{display:flex;align-items:center;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal)}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{content:\"\";position:absolute;inset:-10px 0}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-link .kbq-tab-group_stretch-labels .kbq-tab-link{flex-basis:0;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTabNavBar, decorators: [{
            type: Component,
            args: [{ standalone: true, imports: [
                        KbqIconModule,
                        CdkObserveContent
                    ], selector: '[kbqTabNavBar], [kbq-tab-nav-bar]', exportAs: 'kbqTabNavBar', host: {
                        class: 'kbq-tab-nav-bar',
                        '[class.kbq-tab-nav-bar_filled]': '!transparent',
                        '[class.kbq-tab-nav-bar_transparent]': 'transparent',
                        '[class.kbq-tab-nav-bar_on-background]': '!onSurface',
                        '[class.kbq-tab-nav-bar_on-surface]': 'onSurface',
                        '[class.kbq-tab-header_underlined]': 'underlined',
                        '[class.kbq-tab-header__pagination-controls_enabled]': 'showPaginationControls',
                        '[attr.role]': 'role'
                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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\"></i>\n</div>\n\n<div #tabListContainer class=\"kbq-tab-link__container\" (keydown)=\"handleKeydown($event)\">\n    <div #tabList class=\"kbq-tab-list\" (cdkObserveContent)=\"onContentChanges()\">\n        <div class=\"kbq-tab-list__content\">\n            <ng-content />\n            <div\n                class=\"kbq-tab-list__active-tab-underline\"\n                [style.left.px]=\"activeTabOffsetLeft\"\n                [style.width.px]=\"activeTabOffsetWidth\"\n            ></div>\n        </div>\n    </div>\n</div>\n\n<div\n    #nextPaginator\n    class=\"kbq-tab-header__pagination kbq-tab-header__pagination_after\"\n    [class.kbq-disabled]=\"disableScrollAfter\"\n    (click)=\"handlePaginatorClick('after')\"\n    (mousedown)=\"handlePaginatorPress('after', $event)\"\n    (touchend)=\"stopInterval()\"\n>\n    <i kbq-icon=\"kbq-chevron-right_16\"></i>\n</div>\n", styles: [".kbq-tab-header__pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;padding:0 var(--kbq-size-m)}.kbq-tab-header__pagination-controls_enabled .kbq-tab-header__pagination{display:flex}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content{padding:8px 0}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after{content:\"\";position:absolute;left:0;bottom:0;right:0;height:1px;background:var(--kbq-line-contrast-less)}.kbq-tab-list__active-tab-underline{display:none}.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline{display:block;position:absolute;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--kbq-line-contrast);transition:all .2s ease-in-out}.kbq-tab-nav-bar{display:flex;position:relative}.kbq-tab-nav-bar .kbq-tab-link__container{display:flex;flex-grow:1;z-index:1;overflow:hidden}.kbq-tab-nav-bar .kbq-tab-list{position:relative;width:100%;transition:transform .5s cubic-bezier(.35,0,.25,1)}.kbq-tab-nav-bar .kbq-tab-list__content{display:flex}.kbq-tab-nav-bar.kbq-tab-group_vertical .kbq-tab-link__container{overflow-y:scroll}.kbq-tab-nav-bar.kbq-tab-group_vertical .kbq-tab-list__content{flex-direction:column;gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical)}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}\n", ".kbq-tab-link{vertical-align:top;text-decoration:none;-webkit-tap-highlight-color:transparent;position:relative;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap;cursor:pointer;padding:calc(var(--kbq-tabs-size-tab-item-padding-vertical) - var(--kbq-tabs-size-tab-item-focus-outline-width)) calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width));border-width:var(--kbq-tabs-size-tab-item-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tabs-size-tab-item-border-radius);outline:none}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical){padding-left:14px;padding-right:14px}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left{padding-left:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right{padding-right:calc(var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width))}.kbq-tab-link.kbq-selected{cursor:default}.kbq-tab-link.cdk-keyboard-focused{z-index:1}.kbq-tab-link.kbq-disabled{pointer-events:none}.kbq-tab-link .kbq-tab-label__content{display:flex;align-items:center;gap:var(--kbq-tabs-size-tab-item-content-gap-horizontal)}.kbq-tab-link.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before{content:\"\";position:absolute;inset:-10px 0}.kbq-tab-link.kbq-tab-label_vertical{justify-content:flex-start}.kbq-tab-link.kbq-tab-label_vertical .kbq-tab-label__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-tab-link .kbq-tab-group_stretch-labels .kbq-tab-link{flex-basis:0;flex-grow:1}\n"] }]
        }], propDecorators: { tabListContainer: [{
                type: ViewChild,
                args: ['tabListContainer', { static: true }]
            }], tabList: [{
                type: ViewChild,
                args: ['tabList', { static: true }]
            }], nextPaginator: [{
                type: ViewChild,
                args: ['nextPaginator']
            }], previousPaginator: [{
                type: ViewChild,
                args: ['previousPaginator']
            }], items: [{
                type: ContentChildren,
                args: [forwardRef(() => KbqTabLink), { descendants: true }]
            }], transparent: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], onSurface: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], underlined: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], tabNavPanel: [{
                type: Input
            }] } });
/**
 * Link inside of a KbqTabNavBar.
 */
export class KbqTabLink {
    constructor() {
        /** Unique id for the link. */
        this.id = `kbq-tab-link-${nextUniqueId++}`;
        /** Whether the tab link is active or not. */
        this._active = false;
        /** Whether the tab link is disabled. */
        this.disabled = false;
        this._tabIndex = 0;
        this.elementRef = inject(ElementRef);
        this.focusMonitor = inject(FocusMonitor);
        this.renderer = inject(Renderer2);
        this.tabNavBar = inject(KbqTabNavBar);
    }
    /** Whether the link is active. */
    get active() {
        return this._active;
    }
    set active(value) {
        if (value !== this._active) {
            this._active = value;
            this.tabNavBar.updateActiveLink();
        }
    }
    get vertical() {
        return this.tabNavBar.vertical;
    }
    get underlined() {
        return this.tabNavBar.underlined;
    }
    /** Link tab index. */
    get tabIndex() {
        if (this.tabNavBar.tabNavPanel) {
            return this.active && !this.disabled ? this._tabIndex : -1;
        }
        else {
            return this.disabled ? -1 : this._tabIndex;
        }
    }
    set tabIndex(value) {
        this._tabIndex = value;
    }
    /** Link aria-selected attribute value. */
    get ariaSelected() {
        if (this.tabNavBar.tabNavPanel) {
            return this.active ? 'true' : 'false';
        }
        else {
            return this.elementRef.nativeElement.getAttribute('aria-selected');
        }
    }
    /** Link role attribute value. */
    get role() {
        return this.tabNavBar.tabNavPanel ? 'tab' : this.elementRef.nativeElement.getAttribute('role');
    }
    /** Link aria-controls attribute value. */
    get ariaControls() {
        return this.tabNavBar.tabNavPanel
            ? this.tabNavBar.tabNavPanel?.id
            : this.elementRef.nativeElement.getAttribute('aria-controls');
    }
    /** Link aria-current attribute value. */
    get ariaCurrent() {
        return this.active && !this.tabNavBar.tabNavPanel ? 'page' : null;
    }
    ngAfterViewInit() {
        this.focusMonitor.monitor(this.elementRef.nativeElement);
        this.addClassModifierForIcons(Array.from(this.elementRef.nativeElement.querySelectorAll('.kbq-icon')));
    }
    ngOnDestroy() {
        this.focusMonitor.stopMonitoring(this.elementRef.nativeElement);
    }
    addClassModifierForIcons(icons) {
        const twoIcons = 2;
        const [firstIconElement, secondIconElement] = icons;
        if (icons.length === 1) {
            const COMMENT_NODE = 8;
            if (firstIconElement.nextSibling && firstIconElement.nextSibling.nodeType !== COMMENT_NODE) {
                this.renderer.addClass(firstIconElement, 'kbq-icon_left');
            }
            if (firstIconElement.previousSibling && firstIconElement.previousSibling.nodeType !== COMMENT_NODE) {
                this.renderer.addClass(firstIconElement, 'kbq-icon_right');
            }
        }
        else if (icons.length === twoIcons) {
            this.renderer.addClass(firstIconElement, 'kbq-icon_left');
            this.renderer.addClass(secondIconElement, 'kbq-icon_right');
        }
    }
    /** Focuses the tab link. */
    focus() {
        this.elementRef.nativeElement.focus();
    }
    /** Handles the focus event. */
    handleFocus() {
        // Since we allow navigation through tabbing in the nav bar, we have to update the focused index whenever the
        // link receives focus.
        this.tabNavBar.focusIndex = this.tabNavBar.items.toArray().indexOf(this);
    }
    /** Handles the keydown event. */
    handleKeydown(event) {
        if (event.keyCode === SPACE || event.keyCode === ENTER) {
            if (this.disabled) {
                event.preventDefault();
            }
            else if (this.tabNavBar.tabNavPanel) {
                // Only prevent the default action on space since it can scroll the page.
                // Don't prevent enter since it can break link navigation.
                if (event.keyCode === SPACE) {
                    event.preventDefault();
                }
                this.elementRef.nativeElement.click();
            }
        }
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTabLink, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.14", type: KbqTabLink, isStandalone: true, selector: "[kbqTabLink], [kbq-tab-link]", inputs: { id: "id", active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], tabIndex: ["tabIndex", "tabIndex", numberAttribute] }, host: { listeners: { "focus": "handleFocus()", "keydown": "handleKeydown($event)" }, properties: { "class.kbq-selected": "active", "class.kbq-tab-label_vertical": "vertical", "class.kbq-tab-label_horizontal": "!vertical", "class.kbq-tab-label_underlined": "underlined", "class.kbq-disabled": "disabled", "attr.id": "id", "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null", "attr.aria-disabled": "disabled", "attr.aria-selected": "ariaSelected", "attr.role": "role", "attr.aria-controls": "ariaControls", "attr.aria-current": "ariaCurrent" }, classAttribute: "kbq-tab-link" }, exportAs: ["kbqTabLink"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTabLink, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: '[kbqTabLink], [kbq-tab-link]',
                    exportAs: 'kbqTabLink',
                    host: {
                        class: 'kbq-tab-link',
                        '[class.kbq-selected]': 'active',
                        '[class.kbq-tab-label_vertical]': 'vertical',
                        '[class.kbq-tab-label_horizontal]': '!vertical',
                        '[class.kbq-tab-label_underlined]': 'underlined',
                        '[class.kbq-disabled]': 'disabled',
                        '[attr.id]': 'id',
                        '[attr.tabindex]': 'tabIndex',
                        '[attr.disabled]': 'disabled || null',
                        '[attr.aria-disabled]': 'disabled',
                        '[attr.aria-selected]': 'ariaSelected',
                        '[attr.role]': 'role',
                        '[attr.aria-controls]': 'ariaControls',
                        '[attr.aria-current]': 'ariaCurrent',
                        '(focus)': 'handleFocus()',
                        '(keydown)': 'handleKeydown($event)'
                    }
                }]
        }], propDecorators: { id: [{
                type: Input
            }], active: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], disabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], tabIndex: [{
                type: Input,
                args: [{ transform: numberAttribute }]
            }] } });
/**
 * Tab panel component associated with KbqTabNav.
 */
export class KbqTabNavPanel {
    constructor() {
        /** Unique id for the tab panel. */
        this.id = `kbq-tab-nav-panel-${nextUniqueId++}`;
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTabNavPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqTabNavPanel, isStandalone: true, selector: "[kbqTabNavPanel]", inputs: { id: "id" }, host: { attributes: { "role": "tabpanel" }, properties: { "attr.id": "id", "attr.aria-labelledby": "activeTabId" }, classAttribute: "kbq-tab-nav-panel" }, exportAs: ["kbqTabNavPanel"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTabNavPanel, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: '[kbqTabNavPanel]',
                    exportAs: 'kbqTabNavPanel',
                    host: {
                        class: 'kbq-tab-nav-panel',
                        '[attr.id]': 'id',
                        '[attr.aria-labelledby]': 'activeTabId',
                        role: 'tabpanel'
                    }
                }]
        }], propDecorators: { id: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 