gentics-ui-core
Version:
This is the common core framework for the Gentics CMS and Mesh UI, and other Angular applications.
125 lines (124 loc) • 4.54 kB
TypeScript
import { QueryList, AfterContentInit, EventEmitter, SimpleChanges, ElementRef } from '@angular/core';
import { TabPane } from './tab-pane.component';
import { TabGroup } from './tab-group.component';
import { BehaviorSubject } from 'rxjs';
import * as i0 from "@angular/core";
/**
* GroupedTabs supports tabs either with and without groups.
*
* Pure tabs will only change the active tab when the `activeId` property is updated.
*
* ## Tabs with simple labels
* ```html
* <gtx-grouped-tabs>
* <gtx-tab-pane label="First without Group">Content 1</gtx-tab-pane>
* <gtx-tab-group label="1st Group name" expanded="true">
* <gtx-tab-pane label="First">Content 2</gtx-tab-pane>
* <gtx-tab-pane label="Second">Content 3</gtx-tab-pane>
* </gtx-tab-group>
* <gtx-tab-group label="2nd Group name">
* <gtx-tab-pane label="First">Content 4</gtx-tab-pane>
* <gtx-tab-pane label="Second">Content 5</gtx-tab-pane>
* </gtx-tab-group>
* </gtx-grouped-tabs>
* ```
*
* ## Tabs with template labels
* ```html
* <gtx-grouped-tabs>
* <gtx-tab-pane>
* <ng-template gtx-tab-label>First without Group</ng-template>
* Implicit Content 1
* </gtx-tab-pane>
* <gtx-tab-group expanded="true">
* <ng-template gtx-tab-label>
* <icon>add</icon> 1st Group name
* </ng-template>
* <gtx-tab-pane>
* <ng-template gtx-tab-label>First</ng-template>
* <ng-template gtx-tab-content>
* Content 2
* </ng-template>
* </gtx-tab-pane>
* <gtx-tab-pane label="Second">Content 3</gtx-tab-pane>
* </gtx-tab-group>
* <gtx-tab-group label="2nd Group name">
* <gtx-tab-pane label="First">Content 4</gtx-tab-pane>
* <gtx-tab-pane label="Second">Content 5</gtx-tab-pane>
* </gtx-tab-group>
* </gtx-grouped-tabs>
* ```
*
* ## Export components to use in templates
* ```html
* <gtx-grouped-tabs #groupedTabs="gtxGroupedTabs">
* <gtx-tab-pane label="First" #tab1>First content</gtx-tab-pane>
* <gtx-tab-pane label="Second">
* Seconds content
* <gtx-button (click)="groupedTabs.selectTab(tab1)">Switch to Tab 1</gtx-button>
* </gtx-tab-pane>
* </gtx-grouped-tabs>
* ```
*
*/
export declare class GroupedTabs implements AfterContentInit {
private elementRef;
/** Unique id for this input. */
private uniqueId;
tabs$: BehaviorSubject<(TabPane | TabGroup)[]>;
/** All of the defined tab panes. */
tabPanes: QueryList<TabPane>;
/** All of the defined groups of tab panes. */
tabGroups: QueryList<TabGroup>;
/**
* Fires an event whenever the active tab changes. Argument is the id of the selected tab.
*/
tabChange: EventEmitter<string>;
/**
* The id of the active tab. Should only be used in pure (stateless) mode.
*/
activeId: string;
set id(val: string);
get id(): string;
/**
* When present, sets the tabs to pure (stateless) mode.
*/
set pure(val: any);
/**
* When present (or set to true), tabs title will wrap onto a new line. Otherwise, tabs will remain on one line
* and the contents will be elided if all the available space is filled.
*/
set wrap(val: any);
set statusIcons(val: any);
get currentTab(): TabPane;
tabsShouldWrap: boolean;
displayStatusIcons: boolean;
private isPure;
private subscriptions;
constructor(elementRef: ElementRef);
isTabGroup(item: any): boolean;
collectTabs(): void;
preActivateTab(): void;
ngAfterContentInit(): void;
ngOnChanges(changes: SimpleChanges): void;
ngOnDestroy(): void;
/**
* Sets the tab with id === this.activeId to active.
*/
setActiveTab(): void;
/**
* Invoked when a tab link is clicked.
*/
selectTab(tab: TabPane): void;
/**
* Toggle TabGroup open/close state.
*/
toggleGroup(group: TabGroup): void;
/**
* Calculates TabGroup body height to to make it correctly animateable.
*/
tabsHeight(group: TabGroup): number;
private setAsActive;
static ɵfac: i0.ɵɵFactoryDeclaration<GroupedTabs, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<GroupedTabs, "gtx-grouped-tabs", ["gtxGroupedTabs"], { "activeId": "activeId"; "id": "id"; "pure": "pure"; "wrap": "wrap"; "statusIcons": "statusIcons"; }, { "tabChange": "tabChange"; }, ["tabPanes", "tabGroups"], never>;
}