Koobiq

KbqTabContent

Decorates the `ng-template` tags and reads out the template from it.

Selector: [kbqTabContent]

Properties

Name	Description
template: TemplateRef

Name

Description

template: TemplateRef

KbqTabLabel

Used to flag tab labels for use with the portal directive

Selector: [kbq-tab-label], [kbqTabLabel]

Properties

Name	Description
context: C	Contextual data to be passed in to the embedded view.
injector: Injector	The injector to use for the embedded view.
isAttached: boolean	Whether this portal is attached to a host.
origin: ElementRef
templateRef: TemplateRef	The embedded template that will be used to instantiate an embedded View in the host.
viewContainerRef: ViewContainerRef	Reference to the ViewContainer into which the template will be stamped out.

Name

Description

context: C

Contextual data to be passed in to the embedded view.

injector: Injector

The injector to use for the embedded view.

isAttached: boolean

Whether this portal is attached to a host.

origin: ElementRef

templateRef: TemplateRef

The embedded template that will be used to instantiate an embedded View in the host.

viewContainerRef: ViewContainerRef

Reference to the ViewContainer into which the template will be stamped out.

Methods

attach

Attach the portal to the provided `PortalOutlet`. When a context is provided it will override the `context` property of the `TemplatePortal` instance.

detach

setAttachedHost

Sets the PortalOutlet reference without performing `attach()`. This is used directly by the PortalOutlet when it is performing an `attach()` or `detach()`.

KbqTab

Selector: kbq-tab

Exported as: kbqTab

Properties

Name	Description
@Input() disabled: boolean
@Input() empty: boolean
@Input() tabId: string
@Input('label') textLabel: string	Plain text label for the tab, used when there is no template label.
@Input() tooltipPlacement: "top" \| "topLeft" \| "topRight" \| "right" \| "rightTop" \| "rightBottom" \| "left" \| "leftTop" \| "leftBottom" \| "bottom" \| "bottomLeft" \| "bottomRight"
@Input() tooltipTitle: string
explicitContent: TemplateRef	Template provided in the tab content that will be used if present, used to enable lazy-loading
implicitContent: TemplateRef	Template inside the KbqTab view that contains an ``.
isActive: boolean	Whether the tab is currently active.
isOverflown: boolean
origin: number	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.
overflowTooltipTitle: string
position: number	The relatively indexed position where 0 represents the center, negative is left, and positive represents the right.
stateChanges: Subject	Emits whenever the internal state of the tab changes.
templateLabel: KbqTabLabel

Name

Description

@Input()

disabled: boolean

@Input()

empty: boolean

@Input()

tabId: string

@Input('label')

textLabel: string

Plain text label for the tab, used when there is no template label.

@Input()

@Input()

tooltipTitle: string

explicitContent: TemplateRef

Template provided in the tab content that will be used if present, used to enable lazy-loading

implicitContent: TemplateRef

Template inside the KbqTab view that contains an ``.

isActive: boolean

Whether the tab is currently active.

isOverflown: boolean

origin: number

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.

overflowTooltipTitle: string

position: number

The relatively indexed position where 0 represents the center, negative is left, and positive represents the right.

stateChanges: Subject

Emits whenever the internal state of the tab changes.

templateLabel: KbqTabLabel

KbqTabNavBar

Navigation component matching the styles of the tab group header.

Selector: [kbqTabNavBar], [kbq-tab-nav-bar]

Exported as: kbqTabNavBar

Properties

Name	Description
@Input() onSurface: boolean
@Input() tabNavPanel: KbqTabNavPanel	Associated tab panel controlled by the nav bar.
@Input() transparent: boolean	Whether the nav bar background should be transparent.
@Input() underlined: boolean	Whether the nav bar should be underlined.
activeTabOffsetLeft: number
activeTabOffsetWidth: number
changeDetectorRef: ChangeDetectorRef
destroyRef: DestroyRef
disablePagination: boolean	Whether pagination should be disabled. This can be used to avoid unnecessary layout recalculations if it's known that pagination won't be required.
disableScrollAfter: boolean	Whether the tab list can be scrolled more towards the end of the tab label list.
disableScrollBefore: boolean	Whether the tab list can be scrolled more towards the beginning of the tab label list.
elementRef: ElementRef
focusIndex: number	Tracks which element has focus; used for keyboard navigation
indexFocused: EventEmitter	Event emitted when a label is focused.
items: QueryList
nextPaginator: ElementRef
previousPaginator: ElementRef
role: string
scrollDistance: number	Sets the distance in pixels that the tab header should be transformed in the X-axis.
selectFocusedIndex: EventEmitter	Event emitted when the option is selected.
selectedIndex: number	The index of the active tab.
showPaginationControls: boolean	Whether the controls for pagination should be displayed
tabList: ElementRef
tabListContainer: ElementRef
vertical: boolean	Whether the tabs should be displayed vertically.

Name

Description

@Input()

onSurface: boolean

@Input()

tabNavPanel: KbqTabNavPanel

Associated tab panel controlled by the nav bar.

@Input()

transparent: boolean

Whether the nav bar background should be transparent.

@Input()

underlined: boolean

Whether the nav bar should be underlined.

activeTabOffsetLeft: number

activeTabOffsetWidth: number

changeDetectorRef: ChangeDetectorRef

destroyRef: DestroyRef

disablePagination: boolean

Whether pagination should be disabled. This can be used to avoid unnecessary layout recalculations if it's known that pagination won't be required.

disableScrollAfter: boolean

Whether the tab list can be scrolled more towards the end of the tab label list.

disableScrollBefore: boolean

Whether the tab list can be scrolled more towards the beginning of the tab label list.

elementRef: ElementRef

focusIndex: number

Tracks which element has focus; used for keyboard navigation

indexFocused: EventEmitter

Event emitted when a label is focused.

items: QueryList

nextPaginator: ElementRef

previousPaginator: ElementRef

role: string

scrollDistance: number

Sets the distance in pixels that the tab header should be transformed in the X-axis.

selectFocusedIndex: EventEmitter

Event emitted when the option is selected.

selectedIndex: number

The index of the active tab.

showPaginationControls: boolean

Whether the controls for pagination should be displayed

tabList: ElementRef

tabListContainer: ElementRef

vertical: boolean

Whether the tabs should be displayed vertically.

Methods

checkPaginationEnabled

Evaluate whether the pagination controls should be displayed. If the scroll width of the tab list is wider than the size of the header container, then the pagination controls should be shown. This is an expensive call that forces a layout reflow to compute box and scroll metrics and should be called sparingly.

checkScrollingControls

Evaluate whether the before and after controls should be enabled or disabled. If the header is at the beginning of the list (scroll distance is equal to 0) then disable the before button. If the header is at the end of the list (scroll distance is equal to the maximum distance we can scroll), then disable the after button. This is an expensive call that forces a layout reflow to compute box and scroll metrics and should be called sparingly.

getLayoutDirection

The layout direction of the containing app.

getMaxScrollDistance

Determines what is the maximum length in pixels that can be set for the scroll distance. This is equal to the difference in width between the tab list container and tab header container. This is an expensive call that forces a layout reflow to compute box and scroll metrics and should be called sparingly.

handleKeydown

handlePaginatorClick

Handles click events on the pagination arrows.

handlePaginatorPress

Handles the user pressing down on one of the paginators. Starts scrolling the header after a certain amount of time.

isValidIndex

Determines if an index is valid. If the tabs are not ready yet, we assume that the user is providing a valid index and return true.

itemSelected

onContentChanges

Callback for when the MutationObserver detects that the content has changed.

scrollHeader

Moves the tab list in the 'before' or 'after' direction (towards the beginning of the list or the end of the list, respectively). The distance to scroll is computed to be a third of the length of the tab list view window. This is an expensive call that forces a layout reflow to compute box and scroll metrics and should be called sparingly.

scrollToLabel

Moves the tab list such that the desired tab label (marked by index) is moved into view. This is an expensive call that forces a layout reflow to compute box and scroll metrics and should be called sparingly.

setTabFocus

Sets focus on the HTML element for the label wrapper and scrolls it into the view if scrolling is enabled.

stopInterval

Stops the currently-running paginator interval.

updateActiveLink

Notifies the component that the active link has been changed.

updatePagination

Updates the view whether pagination should be enabled or not. WARNING: Calling this method can be very costly in terms of performance. It should be called as infrequently as possible from outside of the Tabs component as it causes a reflow of the page.

updateTabScrollPosition

Performs the CSS transformation on the tab list that will cause the list to scroll.

KbqAlignTabsCenterCssStyler

Selector: kbq-tab-group[kbq-align-tabs-center], [kbq-tab-nav-bar][kbq-align-tabs-center], [kbqTabNavBar][kbq-align-tabs-center]

KbqAlignTabsEndCssStyler

Selector: kbq-tab-group[kbq-align-tabs-end], [kbq-tab-nav-bar][kbq-align-tabs-end], [kbqTabNavBar][kbq-align-tabs-end]

KbqStretchTabsCssStyler

Selector: kbq-tab-group[kbq-stretch-tabs], [kbq-tab-nav-bar][kbq-stretch-tabs], [kbqTabNavBar][kbq-stretch-tabs]

KbqVerticalTabsCssStyler

Selector: kbq-tab-group[vertical], [kbq-tab-nav-bar][vertical], [kbqTabNavBar][vertical]

KbqTabGroup

Tab-group component. Supports basic tab pairs (label + content) and includes keyboard navigation.

Selector: kbq-tab-group

Exported as: kbqTabGroup

Properties

Name	Description
@Input() activeTab: KbqTab
@Input() animationDuration: string	Duration for the tab animation. Must be a valid CSS value (e.g. 600ms).
@Input() disabled: boolean
@Input() dynamicHeight: boolean	Whether the tab group should grow to the size of the active tab.
@Input() headerPosition: KbqTabHeaderPosition	Position of the tab header.
@Input() onSurface: boolean
@Input() selectedIndex: number	The index of the active tab.
@Input() transparent: boolean
@Input() underlined: boolean
@Input() vertical: boolean
@Output('activeTabChange') activeTabChange: EventEmitter	Event emitted when the tab selection has changed.
@Output('animationDone') animationDone: EventEmitter	Event emitted when the body animation has completed
@Output('focusChange') focusChange: EventEmitter	Event emitted when focus has changed within a tab group.
@Output('selectedIndexChange') selectedIndexChange: EventEmitter	Output to enable support for two-way binding on `[(selectedIndex)]`
@Output('selectedTabChange') selectedTabChange: EventEmitter	Event emitted when the tab selection has changed.
resizeStream: Subject
tabBodyWrapper: ElementRef
tabHeader: KbqTabHeader
tabs: QueryList

Name

Description

@Input()

activeTab: KbqTab

@Input()

animationDuration: string

Duration for the tab animation. Must be a valid CSS value (e.g. 600ms).

@Input()

disabled: boolean

@Input()

dynamicHeight: boolean

Whether the tab group should grow to the size of the active tab.

@Input()

headerPosition: KbqTabHeaderPosition

Position of the tab header.

@Input()

onSurface: boolean

@Input()

selectedIndex: number

The index of the active tab.

@Input()

transparent: boolean

@Input()

underlined: boolean

@Input()

vertical: boolean

@Output('activeTabChange')

activeTabChange: EventEmitter

Event emitted when the tab selection has changed.

@Output('animationDone')

animationDone: EventEmitter

Event emitted when the body animation has completed

@Output('focusChange')

focusChange: EventEmitter

Event emitted when focus has changed within a tab group.

@Output('selectedIndexChange')

selectedIndexChange: EventEmitter

Output to enable support for two-way binding on `[(selectedIndex)]`

@Output('selectedTabChange')

selectedTabChange: EventEmitter

Event emitted when the tab selection has changed.

resizeStream: Subject

tabBodyWrapper: ElementRef

tabHeader: KbqTabHeader

tabs: QueryList

Methods

focusChanged

getTabContentId

Returns a unique id for each tab content element

getTabIndex

Retrieves the tabindex for the tab.

getTabLabelId

Returns a unique id for each tab label element

handleClick

Handle click events, setting new selected index if appropriate.

onSelectFocusedIndex

removeTabBodyWrapperHeight

Removes the height of the tab body wrapper.

setTabBodyWrapperHeight

Sets the height of the body wrapper to the height of the activating tab if dynamic height property is true.

KbqTabLink

Link inside of a KbqTabNavBar.

Selector: [kbqTabLink], [kbq-tab-link]

Exported as: kbqTabLink

Properties

Name	Description
@Input() active: boolean	Whether the link is active.
@Input() disabled: boolean	Whether the tab link is disabled.
@Input() id: string	Unique id for the link.
ariaControls: string	Link aria-controls attribute value.
ariaCurrent: string	Link aria-current attribute value.
ariaSelected: string	Link aria-selected attribute value.
elementRef: ElementRef
role: string	Link role attribute value.
underlined: boolean
vertical: boolean

Name

Description

@Input()

active: boolean

Whether the link is active.

@Input()

disabled: boolean

Whether the tab link is disabled.

@Input()

id: string

Unique id for the link.

ariaControls: string

Link aria-controls attribute value.

ariaCurrent: string

Link aria-current attribute value.

ariaSelected: string

Link aria-selected attribute value.

elementRef: ElementRef

role: string

Link role attribute value.

underlined: boolean

vertical: boolean

Methods

focus

Focuses the tab link.

handleFocus

Handles the focus event.

handleKeydown

Handles the keydown event.

KbqTabNavPanel

Tab panel component associated with KbqTabNav.

Selector: [kbqTabNavPanel]

Exported as: kbqTabNavPanel

Properties

Name	Description
@Input() id: string	Unique id for the tab panel.
activeTabId: string	Id of the active tab in the nav bar.

Name

Description

@Input()

id: string

Unique id for the tab panel.

activeTabId: string

Id of the active tab in the nav bar.

KbqTabChangeEvent

A simple change event emitted on focus or selection changes.

Properties

Name	Description
index: number	Index of the currently-selected tab.
tab: KbqTab	Reference to the currently-selected tab.

Name

Description

index: number

Index of the currently-selected tab.

tab: KbqTab

Reference to the currently-selected tab.

KbqTabsConfig

Object that can be used to configure the default options for the tabs module.

Properties

Name	Description
animationDuration: string	Duration for the tab animation. Must be a valid CSS value (e.g. 600ms).

Name

Description

animationDuration: string

Duration for the tab animation. Must be a valid CSS value (e.g. 600ms).

ScrollDirection

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.

type ScrollDirection = 'after' | 'before';

KbqTabBodyPositionState

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 pseudo-prior state.

type KbqTabBodyPositionState = 'left' | 'center' | 'right' | 'left-origin-center' | 'right-origin-center';

KbqTabBodyOriginState

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.

type KbqTabBodyOriginState = 'left' | 'right';

KbqTabHeaderPosition

Possible positions for the tab header.

type KbqTabHeaderPosition = 'above' | 'below';

KbqTabSelectBy

type KbqTabSelectBy = string | number | ((tabs: KbqTab[]) => KbqTab | null);

KBQ_TAB_LABEL

const KBQ_TAB_LABEL: InjectionToken<KbqTabLabel>;

kbqTabsAnimations

const kbqTabsAnimations: { readonly translateTab: AnimationTriggerMetadata; };

KBQ_TABS_CONFIG

Injection token that can be used to provide the default options the tabs module.

const KBQ_TABS_CONFIG: InjectionToken<KbqTabsConfig>;