@koobiq/components 16.0.0-beta.1

package/tabs/tab-body.component.d.ts

@@ -0,0 +1,95 @@
+import { AnimationEvent } from '@angular/animations';
+import { Directionality, Direction } from '@angular/cdk/bidi';
+import { TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
+import { ChangeDetectorRef, EventEmitter, OnDestroy, OnInit, ElementRef, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * These position states are used internally as animation states for the tab body. Setting the
+ * position state to left, right, or center will transition the tab body from its current
+ * position to its respective state. If there is not current position (void, in the case of a new
+ * tab body), then there will be no transition animation to its state.
+ *
+ * In the case of a new tab body that should immediately be centered with an animating transition,
+ * then left-origin-center or right-origin-center can be used, which will use left or right as its
+ * psuedo-prior state.
+ */
+export type KbqTabBodyPositionState = 'left' | 'center' | 'right' | 'left-origin-center' | 'right-origin-center';
+/**
+ * The origin state is an internally used state that is set on a new tab body indicating if it
+ * began to the left or right of the prior selected index. For example, if the selected index was
+ * set to 1, and a new tab is created and selected at index 2, then the tab body would have an
+ * origin of right because its index was greater than the prior selected index.
+ */
+export type KbqTabBodyOriginState = 'left' | 'right';
+/**
+ * Wrapper for the contents of a tab.
+ * @docs-private
+ */
+export declare class KbqTabBody implements OnInit, OnDestroy {
+    private readonly elementRef;
+    private readonly dir;
+    /** The shifted index position of the tab body, where zero represents the active center tab. */
+    set position(position: number);
+    /** Tab body position state. Used by the animation trigger for the current state. */
+    bodyPosition: KbqTabBodyPositionState;
+    /** Event emitted when the tab begins to animate towards the center as the active tab. */
+    readonly onCentering: EventEmitter<number>;
+    /** Event emitted before the centering of the tab begins. */
+    readonly beforeCentering: EventEmitter<boolean>;
+    /** Event emitted before the centering of the tab begins. */
+    readonly afterLeavingCenter: EventEmitter<boolean>;
+    /** Event emitted when the tab completes its animation towards the center. */
+    readonly onCentered: EventEmitter<void>;
+    /** The portal host inside of this container into which the tab body content will be loaded. */
+    portalHost: CdkPortalOutlet;
+    /** The tab body content to display. */
+    content: TemplatePortal;
+    /** Position that will be used when the tab is immediately becoming visible after creation. */
+    origin: number;
+    /** Duration for the tab's animation. */
+    animationDuration: string;
+    /** Current position of the tab-body in the tab-group. Zero means that the tab is visible. */
+    private positionIndex;
+    /** Subscription to the directionality change observable. */
+    private readonly dirChangeSubscription;
+    constructor(elementRef: ElementRef<HTMLElement>, dir: Directionality, changeDetectorRef: ChangeDetectorRef);
+    /**
+     * After initialized, check if the content is centered and has an origin. If so, set the
+     * special position states that transition the tab from the left or right before centering.
+     */
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onTranslateTabStarted(e: AnimationEvent): void;
+    onTranslateTabComplete(e: AnimationEvent): void;
+    /** The text direction of the containing app. */
+    getLayoutDirection(): Direction;
+    /** Whether the provided position state is considered center, regardless of origin. */
+    isCenterPosition(position: KbqTabBodyPositionState | string): boolean;
+    /** Computes the position state that will be used for the tab-body animation trigger. */
+    private computePositionAnimationState;
+    /**
+     * Computes the position state based on the specified origin position. This is used if the
+     * tab is becoming visible immediately after creation.
+     */
+    private computePositionFromOrigin;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabBody, [null, { optional: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabBody, "kbq-tab-body", never, { "position": { "alias": "position"; "required": false; }; "content": { "alias": "content"; "required": false; }; "origin": { "alias": "origin"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; }, { "onCentering": "onCentering"; "beforeCentering": "beforeCentering"; "afterLeavingCenter": "afterLeavingCenter"; "onCentered": "onCentered"; }, never, never, false, never>;
+}
+/**
+ * The portal host directive for the contents of the tab.
+ * @docs-private
+ */
+export declare class KbqTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestroy {
+    private readonly host;
+    /** Subscription to events for when the tab body begins centering. */
+    private centeringSub;
+    /** Subscription to events for when the tab body finishes leaving from center position. */
+    private leavingSub;
+    constructor(componentFactoryResolver: ComponentFactoryResolver, viewContainerRef: ViewContainerRef, host: KbqTabBody);
+    /** Set initial visibility or set up subscription for changing visibility. */
+    ngOnInit(): void;
+    /** Clean up centering subscription. */
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabBodyPortal, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabBodyPortal, "[mcTabBodyHost]", never, {}, {}, never, never, false, never>;
+}

package/tabs/tab-body.scss

@@ -0,0 +1,8 @@
+.kbq-tab-body__content {
+    height: 100%;
+    overflow: auto;
+
+    .kbq-tab-group_dynamic-height {
+        overflow: hidden;
+    }
+}

package/tabs/tab-content.directive.d.ts

@@ -0,0 +1,9 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/** Decorates the `ng-template` tags and reads out the template from it. */
+export declare class KbqTabContent {
+    template: TemplateRef<any>;
+    constructor(template: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabContent, "[mcTabContent]", never, {}, {}, never, never, false, never>;
+}

package/tabs/tab-group.component.d.ts

@@ -0,0 +1,134 @@
+import { AfterContentChecked, AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList, InjectionToken, AfterViewInit } from '@angular/core';
+import { CanDisableCtor } from '@koobiq/components/core';
+import { Subject } from 'rxjs';
+import { KbqTabHeader } from './tab-header.component';
+import { KbqTab } from './tab.component';
+import * as i0 from "@angular/core";
+export declare class KbqOldTabsCssStyler {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqOldTabsCssStyler, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOldTabsCssStyler, "kbq-tab-group[kbq-old-tabs]", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqAlignTabsCenterCssStyler {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAlignTabsCenterCssStyler, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAlignTabsCenterCssStyler, "kbq-tab-group[kbq-align-tabs-center], [kbq-tab-nav-bar][kbq-align-tabs-center]", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqAlignTabsEndCssStyler {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAlignTabsEndCssStyler, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAlignTabsEndCssStyler, "kbq-tab-group[kbq-align-tabs-end], [kbq-tab-nav-bar][kbq-align-tabs-end]", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqStretchTabsCssStyler {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqStretchTabsCssStyler, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqStretchTabsCssStyler, "kbq-tab-group[kbq-stretch-tabs], [kbq-tab-nav-bar][kbq-stretch-tabs]", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqVerticalTabsCssStyler {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqVerticalTabsCssStyler, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqVerticalTabsCssStyler, "kbq-tab-group[vertical], [kbq-tab-nav-bar][vertical]", never, {}, {}, never, never, false, never>;
+}
+/** A simple change event emitted on focus or selection changes. */
+export declare class KbqTabChangeEvent {
+    /** Index of the currently-selected tab. */
+    index: number;
+    /** Reference to the currently-selected tab. */
+    tab: KbqTab;
+}
+/** Possible positions for the tab header. */
+export type KbqTabHeaderPosition = 'above' | 'below';
+/** Object that can be used to configure the default options for the tabs module. */
+export interface IKbqTabsConfig {
+    /** Duration for the tab animation. Must be a valid CSS value (e.g. 600ms). */
+    animationDuration?: string;
+}
+/** Injection token that can be used to provide the default options the tabs module. */
+export declare const KBQ_TABS_CONFIG: InjectionToken<string>;
+/** @docs-private */
+export declare class KbqTabGroupBase {
+    elementRef: ElementRef;
+    constructor(elementRef: ElementRef);
+}
+/** @docs-private */
+export declare const KbqTabGroupMixinBase: CanDisableCtor & typeof KbqTabGroupBase;
+/**
+ * Tab-group component.  Supports basic tab pairs (label + content) and includes
+ * keyboard navigation.
+ */
+export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterContentInit, AfterViewInit, AfterContentChecked, OnDestroy {
+    private readonly changeDetectorRef;
+    readonly resizeStream: Subject<Event>;
+    oldTab: boolean;
+    vertical: boolean;
+    tabs: QueryList<KbqTab>;
+    tabBodyWrapper: ElementRef;
+    tabHeader: KbqTabHeader;
+    /** Whether the tab group should grow to the size of the active tab. */
+    get dynamicHeight(): boolean;
+    set dynamicHeight(value: boolean);
+    private _dynamicHeight;
+    /** The index of the active tab. */
+    get selectedIndex(): number | null;
+    set selectedIndex(value: number | null);
+    private _selectedIndex;
+    /** Position of the tab header. */
+    headerPosition: KbqTabHeaderPosition;
+    /** Duration for the tab animation. Must be a valid CSS value (e.g. 600ms). */
+    animationDuration: string;
+    /** Output to enable support for two-way binding on `[(selectedIndex)]` */
+    readonly selectedIndexChange: EventEmitter<number>;
+    /** Event emitted when focus has changed within a tab group. */
+    readonly focusChange: EventEmitter<KbqTabChangeEvent>;
+    /** Event emitted when the body animation has completed */
+    readonly animationDone: EventEmitter<void>;
+    /** Event emitted when the tab selection has changed. */
+    readonly selectedTabChange: EventEmitter<KbqTabChangeEvent>;
+    /** The tab index that should be selected after the content has been checked. */
+    private indexToSelect;
+    /** Snapshot of the height of the tab body wrapper before another tab is activated. */
+    private tabBodyWrapperHeight;
+    /** Subscription to tabs being added/removed. */
+    private tabsSubscription;
+    /** Subscription to changes in the tab labels. */
+    private tabLabelSubscription;
+    private resizeSubscription;
+    private readonly groupId;
+    private readonly resizeDebounceInterval;
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, lightTabs: string, vertical: string, defaultConfig?: IKbqTabsConfig);
+    /**
+     * After the content is checked, this component knows what tabs have been defined
+     * and what the selected index should be. This is where we can know exactly what position
+     * each tab should be in according to the new selected index, and additionally we know how
+     * a new selected tab should transition in (from the left or right).
+     */
+    ngAfterContentChecked(): void;
+    ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    focusChanged(index: number): void;
+    /** Returns a unique id for each tab label element */
+    getTabLabelId(i: number): string;
+    /** Returns a unique id for each tab content element */
+    getTabContentId(i: number): string;
+    /**
+     * Sets the height of the body wrapper to the height of the activating tab if dynamic
+     * height property is true.
+     */
+    setTabBodyWrapperHeight(tabHeight: number): void;
+    /** Removes the height of the tab body wrapper. */
+    removeTabBodyWrapperHeight(): void;
+    /** Handle click events, setting new selected index if appropriate. */
+    handleClick(tab: KbqTab, tabHeader: KbqTabHeader, index: number): void;
+    /** Retrieves the tabindex for the tab. */
+    getTabIndex(tab: KbqTab, index: number): number | null;
+    private checkOverflow;
+    private createChangeEvent;
+    /**
+     * Subscribes to changes in the tab labels. This is needed, because the @Input for the label is
+     * on the KbqTab component, whereas the data binding is inside the KbqTabGroup. In order for the
+     * binding to be updated, we need to subscribe to changes in it and trigger change detection
+     * manually.
+     */
+    private subscribeToTabLabels;
+    private subscribeToResize;
+    /** Clamps the given index to the bounds of 0 and the tabs length. */
+    private clampTabIndex;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabGroup, [null, null, { attribute: "kbq-old-tabs"; }, { attribute: "vertical"; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabGroup, "kbq-tab-group", ["mcTabGroup"], { "disabled": { "alias": "disabled"; "required": false; }; "dynamicHeight": { "alias": "dynamicHeight"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "headerPosition": { "alias": "headerPosition"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, ["tabs"], never, false, never>;
+}

package/tabs/tab-group.scss

@@ -0,0 +1,63 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common/layout';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-tab-group {
+    display: flex;
+    flex-direction: column;
+
+    box-sizing: border-box;
+    text-align: left;
+
+    &.kbq-tab-group_inverted-header {
+        flex-direction: column-reverse;
+    }
+}
+
+.kbq-tab-group_vertical {
+    flex-direction: row;
+
+    & .kbq-tab-header__content {
+        overflow-y: auto;
+
+        padding-top: 8px;
+        padding-bottom: 1px;
+
+        border-right-width: var(--kbq-tabs-size-border-width, #{map.get($tokens, tabs-size-border-width)});
+        border-right-style: solid;
+    }
+}
+
+.kbq-tab-body__wrapper {
+    display: flex;
+    overflow: hidden;
+    position: relative;
+}
+
+.kbq-tab-body {
+    @include layout.kbq-fill;
+
+    display: block;
+    overflow: hidden;
+
+    // Fix for auto content wrapping in IE11
+    flex-basis: 100%;
+
+    &.kbq-tab-body__active {
+        overflow-x: hidden;
+        overflow-y: auto;
+        position: relative;
+        z-index: 1;
+        flex-grow: 1;
+    }
+
+    .kbq-tab-group.kbq-tab-group_dynamic-height &.kbq-tab-body__active {
+        overflow-y: hidden;
+    }
+}

package/tabs/tab-header.component.d.ts

@@ -0,0 +1,35 @@
+import { Directionality } from '@angular/cdk/bidi';
+import { Platform } from '@angular/cdk/platform';
+import { ViewportRuler } from '@angular/cdk/scrolling';
+import { ChangeDetectorRef, ElementRef, NgZone, QueryList } from '@angular/core';
+import { KbqPaginatedTabHeader } from './paginated-tab-header';
+import { KbqTabLabelWrapper } from './tab-label-wrapper.directive';
+import * as i0 from "@angular/core";
+/**
+ * The directions that scrolling can go in when the header's tabs exceed the header width. 'After'
+ * will scroll the header towards the end of the tabs list and 'before' will scroll towards the
+ * beginning of the list.
+ */
+export type ScrollDirection = 'after' | 'before';
+/**
+ * The header of the tab group which displays a list of all the tabs in the tab group.
+ * When the tabs list's width exceeds the width of the header container,
+ * then arrows will be displayed to allow the user to scroll
+ * left and right across the header.
+ * @docs-private
+ */
+export declare class KbqTabHeader extends KbqPaginatedTabHeader {
+    readonly elementRef: ElementRef;
+    readonly changeDetectorRef: ChangeDetectorRef;
+    /** The index of the active tab. */
+    vertical: boolean;
+    items: QueryList<KbqTabLabelWrapper>;
+    tabListContainer: ElementRef;
+    tabList: ElementRef;
+    nextPaginator: ElementRef<HTMLElement>;
+    previousPaginator: ElementRef<HTMLElement>;
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, ngZone: NgZone, platform: Platform, dir: Directionality, animationMode?: string);
+    itemSelected(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabHeader, [null, null, null, null, null, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabHeader, "kbq-tab-header", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, ["items"], ["*"], false, never>;
+}

package/tabs/tab-header.scss

@@ -0,0 +1,106 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common/vendor-prefixes';
+@use 'tabs-common' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-tab-header {
+    display: flex;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+}
+
+.kbq-tab-list__content {
+    display: flex;
+
+    .kbq-tab-group_align-labels-center & {
+        justify-content: center;
+    }
+
+    .kbq-tab-group_align-labels-end & {
+        justify-content: flex-end;
+    }
+}
+
+.kbq-tab-header_vertical .kbq-tab-list__content {
+    flex-direction: column;
+}
+
+.kbq-tab-header__pagination {
+    @include vendor-prefixes.user-select(none);
+
+    position: relative;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    z-index: 2;
+    -webkit-tap-highlight-color: transparent;
+    touch-action: none;
+
+    padding-left: 12px;
+    padding-right: 12px;
+
+    border: {
+        bottom-style: solid;
+        bottom-width: var(--kbq-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
+    };
+
+    &.kbq-tab-header__pagination_before {
+        border: {
+            right-style: solid;
+            right-width: var(--kbq-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
+        };
+    }
+
+    &.kbq-tab-header__pagination_after {
+        border: {
+            left-style: solid;
+            left-width: var(--kbq-tabs-size-border-width, map.get($tokens, tabs-size-border-width));
+        };
+    }
+
+    .kbq-tab-header__pagination-controls_enabled & {
+        display: flex;
+    }
+}
+
+
+.kbq-tab-header__content {
+    display: flex;
+    flex-grow: 1;
+
+    z-index: 1;
+    overflow: hidden;
+}
+
+.kbq-tab-list {
+    position: relative;
+
+    width: 100%;
+
+    transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
+}
+
+.kbq-tab-label {
+    @include tab-label;
+    @include vendor-prefixes.user-select(none);
+}
+
+.kbq-tab-label_old {
+    @include tab-label-old;
+}
+
+.kbq-tab-label,
+.kbq-tab-label_old {
+    .kbq-tab-group_stretch-labels & {
+        flex-basis: 0;
+        flex-grow: 1;
+    }
+}

package/tabs/tab-label-wrapper.directive.d.ts

@@ -0,0 +1,31 @@
+import { AfterViewInit, ElementRef, Renderer2 } from '@angular/core';
+import { CanDisable, CanDisableCtor } from '@koobiq/components/core';
+import { KbqTab } from './tab.component';
+import * as i0 from "@angular/core";
+/** @docs-private */
+export declare class KbqTabLabelWrapperBase {
+}
+/** @docs-private */
+export declare const KbqTabLabelWrapperMixinBase: CanDisableCtor & typeof KbqTabLabelWrapperBase;
+/**
+ * Used in the `kbq-tab-group` view to display tab labels.
+ * @docs-private
+ */
+export declare class KbqTabLabelWrapper extends KbqTabLabelWrapperMixinBase implements CanDisable, AfterViewInit {
+    elementRef: ElementRef;
+    private renderer;
+    labelContent: ElementRef;
+    tab: KbqTab;
+    constructor(elementRef: ElementRef, renderer: Renderer2);
+    ngAfterViewInit(): void;
+    /** Sets focus on the wrapper element */
+    focus(): void;
+    getOffsetLeft(): number;
+    getOffsetWidth(): number;
+    checkOverflow(): void;
+    isOverflown(): boolean;
+    getInnerText(): any;
+    private addClassModifierForIcons;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabLabelWrapper, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabLabelWrapper, "[mcTabLabelWrapper]", never, { "disabled": { "alias": "disabled"; "required": false; }; "tab": { "alias": "tab"; "required": false; }; }, {}, ["labelContent"], never, false, never>;
+}

package/tabs/tab-label.directive.d.ts

@@ -0,0 +1,9 @@
+import { CdkPortal } from '@angular/cdk/portal';
+import { InjectionToken } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare const KBQ_TAB_LABEL: InjectionToken<KbqTabLabel>;
+/** Used to flag tab labels for use with the portal directive */
+export declare class KbqTabLabel extends CdkPortal {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabLabel, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabLabel, "[kbq-tab-label], [mcTabLabel]", never, {}, {}, never, never, false, never>;
+}

package/tabs/tab-nav-bar/index.d.ts

@@ -0,0 +1 @@
+export * from './tab-nav-bar';

package/tabs/tab-nav-bar/tab-nav-bar.d.ts

@@ -0,0 +1,40 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { AfterContentInit, ElementRef, OnDestroy, QueryList, Renderer2 } from '@angular/core';
+import { CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor } from '@koobiq/components/core';
+import * as i0 from "@angular/core";
+/** @docs-private */
+export declare class KbqTabLinkBase {
+}
+/** @docs-private */
+export declare const KbqTabLinkMixinBase: HasTabIndexCtor & CanDisableCtor & typeof KbqTabLinkBase;
+/**
+ * Link inside of a `kbq-tab-nav-bar`.
+ */
+export declare class KbqTabLink extends KbqTabLinkMixinBase implements OnDestroy, CanDisable, HasTabIndex {
+    elementRef: ElementRef;
+    private readonly focusMonitor;
+    private readonly renderer;
+    vertical: boolean;
+    /** Whether the link is active. */
+    get active(): boolean;
+    set active(value: boolean);
+    /** Whether the tab link is active or not. */
+    protected isActive: boolean;
+    constructor(elementRef: ElementRef, focusMonitor: FocusMonitor, renderer: Renderer2);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private addClassModifierForIcons;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabLink, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabLink, "a[kbq-tab-link], a[mcTabLink]", ["mcTabLink"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "active": { "alias": "active"; "required": false; }; }, {}, never, ["*"], false, never>;
+}
+/**
+ * Navigation component matching the styles of the tab group header.
+ */
+export declare class KbqTabNav implements AfterContentInit {
+    vertical: boolean;
+    links: QueryList<KbqTabLink>;
+    constructor(vertical: string);
+    ngAfterContentInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabNav, [{ attribute: "vertical"; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabNav, "[kbq-tab-nav-bar]", ["mcTabNavBar", "mcTabNav"], {}, {}, ["links"], ["*"], false, never>;
+}

package/tabs/tab-nav-bar/tab-nav-bar.scss

@@ -0,0 +1,54 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../tabs-common';
+
+@use '../../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-tab-link {
+    vertical-align: top;
+    text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
+
+    @include tabs-common.tab-label;
+
+    & .kbq-tab-group_stretch-labels & {
+        flex-basis: 0;
+        flex-grow: 1;
+    }
+
+    & > .kbq-icon {
+        &.kbq-icon_left {
+            margin-right: var(--kbq-tabs-size-label-icon-margin, map.get($tokens, tabs-size-label-icon-margin));
+        }
+
+        &.kbq-icon_right {
+            margin-left: var(--kbq-tabs-size-label-icon-margin, map.get($tokens, tabs-size-label-icon-margin));
+        }
+    }
+}
+
+.kbq-tab-nav-bar {
+    display: flex;
+    flex-grow: 1;
+
+    position: relative;
+
+    padding: 1px 1px 0 1px;
+
+    & .kbq-tab-group_align-labels-center {
+        justify-content: center;
+    }
+
+    & .kbq-tab-group_align-labels-end {
+        justify-content: flex-end;
+    }
+}
+
+.kbq-tab-nav-bar.kbq-tab-group_vertical {
+    flex-direction: column;
+    flex-grow: 0;
+}

package/tabs/tab.component.d.ts

@@ -0,0 +1,68 @@
+import { TemplatePortal } from '@angular/cdk/portal';
+import { OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
+import { CanDisable, CanDisableCtor, PopUpPlacements } from '@koobiq/components/core';
+import { Subject } from 'rxjs';
+import { KbqTabLabel } from './tab-label.directive';
+import * as i0 from "@angular/core";
+/** @docs-private */
+export declare class KbqTabBase {
+}
+/** @docs-private */
+export declare const KbqTabMixinBase: CanDisableCtor & typeof KbqTabBase;
+export declare class KbqTab extends KbqTabMixinBase implements OnInit, CanDisable, OnChanges, OnDestroy {
+    private readonly viewContainerRef;
+    /** @docs-private */
+    get content(): TemplatePortal | null;
+    get templateLabel(): KbqTabLabel;
+    set templateLabel(value: KbqTabLabel);
+    private _templateLabel;
+    /**
+     * Template provided in the tab content that will be used if present, used to enable lazy-loading
+     */
+    explicitContent: TemplateRef<any>;
+    /** Template inside the KbqTab view that contains an `<ng-content>`. */
+    implicitContent: TemplateRef<any>;
+    get tooltipTitle(): string;
+    set tooltipTitle(value: string);
+    private _tooltipTitle;
+    tooltipPlacement: PopUpPlacements;
+    /** Plain text label for the tab, used when there is no template label. */
+    textLabel: string;
+    empty: boolean;
+    tabId: string;
+    /** Emits whenever the internal state of the tab changes. */
+    readonly stateChanges: Subject<void>;
+    /**
+     * The relatively indexed position where 0 represents the center, negative is left, and positive
+     * represents the right.
+     */
+    position: number | null;
+    /**
+     * The initial relatively index origin of the tab if it was created and selected after there
+     * was already a selected tab. Provides context of what position the tab should originate from.
+     */
+    origin: number | null;
+    /**
+     * Whether the tab is currently active.
+     */
+    isActive: boolean;
+    get isOverflown(): boolean;
+    get overflowTooltipTitle(): string;
+    set overflowTooltipTitle(value: string);
+    private _overflowTooltipTitle;
+    /** Portal that will be the hosted content of the tab */
+    private contentPortal;
+    constructor(viewContainerRef: ViewContainerRef);
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    ngOnInit(): void;
+    /**
+     * This has been extracted to a util because of TS 4 and VE.
+     * View Engine doesn't support property rename inheritance.
+     * TS 4.0 doesn't allow properties to override accessors or vice-versa.
+     * @docs-private
+     */
+    protected setTemplateLabelInput(value: KbqTabLabel): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTab, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTab, "kbq-tab", ["mcTab"], { "disabled": { "alias": "disabled"; "required": false; }; "tooltipTitle": { "alias": "tooltipTitle"; "required": false; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; }; "textLabel": { "alias": "label"; "required": false; }; "empty": { "alias": "empty"; "required": false; }; "tabId": { "alias": "tabId"; "required": false; }; }, {}, ["templateLabel", "explicitContent"], ["*"], false, never>;
+}

package/tabs/tabs-animations.d.ts

@@ -0,0 +1,4 @@
+import { AnimationTriggerMetadata } from '@angular/animations';
+export declare const mcTabsAnimations: {
+    readonly translateTab: AnimationTriggerMetadata;
+};