igniteui-webcomponents/components/tabs/tabs.d.ts

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

import { LitElement, nothing } from 'lit';
import { type Ref } from 'lit/directives/ref.js';
import type { Constructor } from '../common/mixins/constructor.js';
import IgcTabPanelComponent from './tab-panel.js';
import IgcTabComponent from './tab.js';
export interface IgcTabsComponentEventMap {
    igcChange: CustomEvent<IgcTabComponent>;
}
declare const IgcTabsComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcTabsComponentEventMap>> & Constructor<LitElement>;
/**
 * Represents tabs component
 *
 * @element igc-tabs
 *
 * @fires igcChange - Emitted when the selected tab changes.
 *
 * @slot - Renders the tab header.
 * @slot panel - Renders the tab content.
 *
 * @csspart headers - The wrapper of the tabs including the headers content and the scroll buttons.
 * @csspart headers-content - The container for the tab headers.
 * @csspart headers-wrapper - The wrapper for the tab headers and the selected indicator.
 * @csspart headers-scroll - The container for the headers.
 * @csspart selected-indicator - The selected indicator.
 * @csspart start-scroll-button - The start scroll button displayed when the tabs overflow.
 * @csspart end-scroll-button - The end scroll button displayed when the tabs overflow.
 * @csspart content - The container for the tabs content.
 */
export default class IgcTabsComponent extends IgcTabsComponent_base {
    static readonly tagName = "igc-tabs";
    static styles: import("lit").CSSResult[];
    static register(): void;
    private static readonly increment;
    protected headerRef: Ref<HTMLDivElement>;
    protected tabs: Array<IgcTabComponent>;
    protected panels: Array<IgcTabPanelComponent>;
    protected wrapper: HTMLElement;
    protected container: HTMLElement;
    protected selectedIndicator: HTMLElement;
    protected showScrollButtons: boolean;
    protected disableStartScrollButton: boolean;
    protected disableEndScrollButton: boolean;
    protected activeTab?: IgcTabComponent;
    protected resizeObserver: ResizeObserver;
    private get _closestActiveTabIndex();
    private _mutationCallback;
    protected get enabledTabs(): IgcTabComponent[];
    /** Returns the currently selected tab. */
    get selected(): string;
    /**
     * Sets the alignment for the tab headers
     * @attr
     */
    alignment: 'start' | 'end' | 'center' | 'justify';
    /**
     * Determines the tab activation. When set to auto,
     * the tab is instantly selected while navigating with the Left/Right Arrows, Home or End keys
     * and the corresponding panel is displayed.
     * When set to manual, the tab is only focused. The selection happens after pressing Space or Enter.
     * @attr
     */
    activation: 'auto' | 'manual';
    protected alignIndicator(): void;
    constructor();
    protected firstUpdated(): Promise<void>;
    disconnectedCallback(): void;
    protected updateButtonsOnResize(): void;
    protected updateScrollButtons(): void;
    protected setupObserver(): void;
    protected updateSelectedTab(): void;
    protected syncAttributes(): void;
    private setSelectedTab;
    protected scrollByTabOffset(direction: 'start' | 'end'): void;
    protected handleClick(event: MouseEvent): void;
    private _scrollToAndFocus;
    private _kbActivateTab;
    private onArrowLeft;
    private onArrowRight;
    private onHomeKey;
    private onEndKey;
    private onActivationKey;
    protected handleScroll(): void;
    /** Selects the specified tab and displays the corresponding panel.  */
    select(name: string): void;
    protected renderScrollButton(direction: 'start' | 'end'): import("lit-html").TemplateResult<1> | typeof nothing;
    protected render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'igc-tabs': IgcTabsComponent;
    }
}
export {};