import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, OnInit, QueryList } from '@angular/core'; import { PoTabDropdownComponent } from './po-tab-dropdown/po-tab-dropdown.component'; import { PoTabComponent } from './po-tab/po-tab.component'; import { PoTabsBaseComponent } from './po-tabs-base.component'; export declare const poTabsLiterals: object; /** * @docsExtends PoTabsBaseComponent * * @description * * O componente `po-tabs` é responsável por agrupar [abas](/documentation/po-tab) dispostas numa linha horizontal, * ideal para facilitar a organização de conteúdos. * * O componente exibirá as abas enquanto houver espaço na tela, caso a aba ultrapasse o limite da tela a mesma será agrupada em um dropdown. * * > As abas que estiverem agrupadas serão dispostas numa cascata suspensa que será exibida ao clicar no botão. * * É possível realizar a navegação entre as abas através da tecla SETAS(direita e esquerda) do teclado. * Caso uma aba estiver desabilitada, não receberá foco de navegação. * * #### Boas práticas * * - Evite utilizar um `po-tabs` dentro de outro `po-tabs`; * - Evite utilizar uma quantidade excessiva de abas, pois irá gerar um *scroll* muito longo no `dropdown`; * - Evite `labels` extensos para as `tabs` pois podem quebrar seu *layout*, use `labels` diretas, curtas e intuitivas. * * * @example * * * * * * * * * * * * * * * * * * * * */ export declare class PoTabsComponent extends PoTabsBaseComponent implements OnInit, AfterViewInit, OnDestroy, AfterContentInit { changeDetector: ChangeDetectorRef; private readonly languageService; private readonly tabsService; tabsChildren: QueryList; tabButton: QueryList; tabDropdown: PoTabDropdownComponent; containerTabs: ElementRef; maxNumberOfTabs: number; literals: any; tabsDefault: any[]; tabsDropdown: any[]; initializeCalculation: boolean; initializeComponent: boolean; initCheckChangesTab: boolean; quantityTabsButton: any; defaultLastTabWidth: number; private previousActiveTab; private subscription; private subscriptionTabsService; private subscriptionTabActive; constructor(); ngOnInit(): void; ngAfterViewInit(): void; ngAfterContentInit(): void; ngOnDestroy(): void; get isShowTabDropdown(): any; get overflowedTabs(): any; get tabs(): any; get tabsChildrenArray(): Array; closeListbox(): void; isVisibleTab(tab: any): boolean; onTabActiveByDropdown(tab: PoTabComponent, eventEmitter?: boolean): void; onTabActive(tab: PoTabComponent): void; onTabChangeState(tab: PoTabComponent | any): void; reorderTabs(tabToReorder: PoTabComponent, lastTab?: any): void; selectedTab(tab: PoTabComponent | any): void; trackByFn(_i: any, tab: PoTabComponent): string; private activeDistinctTab; private activeFirstTab; changeTabPositionByDropdown(tabToActivate: PoTabComponent, byContextsTabs?: boolean): void; private deactivateTab; updateTabsState(initialState?: boolean, tab?: PoTabComponent): void; executeTabsState(initialState: any, idByContextTabs?: string): void; calculateTabs(initializeCalculation?: boolean): void; handleKeyboardNavigationTab(initialIndex?: number): void; /** * Função que atribui o número de tabs fora do dropdown. * * Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma: * * ``` * import { PoTabsComponent } from '@po-ui/ng-components'; * * ... * * @ViewChild('poTab', { static: true }) poTab: PoTabsComponent; * * changeQuantityTabs() { * this.poTab.setQuantityTabsButton(1); //Número de tabs * } * ``` */ setQuantityTabsButton(number: number): void; private initializeTabAccessibilityElements; private setTabIndex; private handleKeyDown; private handleArrowLeft; private handleHomeKey; private handleEndKey; private handleArrowRight; /** * Ativa a aba correspondente ao `id` informado. * * Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma: * * ``` * import { PoTabsComponent } from '@po-ui/ng-components'; * * ... * * @ViewChild('poTab', { static: true }) poTab: PoTabsComponent; * * focusOnTab() { * this.poTab.activateTab('meu-id-da-aba'); * } * ``` * * @param id Identificador único da aba a ser ativada. */ activateTab(id: string): void; }