import { default as CxResizeObserver } from '../resize-observer/resize-observer.ts';
import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
import { TabGroupActivation, TabGroupAlignment, TabGroupHidePanelVariant, TabGroupOverflowVariant, TabGroupPlacement, TabGroupVariant } from '../../../../types/src/tab-group';
import { CSSResultGroup } from 'lit';
import { default as CxButton } from '../button/button';
import { default as CxDropdown } from '../dropdown/dropdown';
import { default as CxIconButton } from '../icon-button/icon-button';
import { default as CxMenu } from '../menu/menu';
import { default as CxMenuItem } from '../menu-item/menu-item';
import { default as CxTab } from '../tab/tab';

/**
 * @summary Tab groups organize content into a container that shows one section at a time.
 *
 * @description Tab groups make use of [tabs](?s=atoms&id=/tab) and [tab panels](?s=atoms&id=/tab-panel).
 * Each tab must be slotted into the `nav` slot and its `panel` must refer to a tab panel of the same name.
 *
 * @slot (default) - Used for grouping tab panels in the tab group. Must be `<cx-tab-panel>` elements.
 * @slot nav - Used for grouping tabs in the tab group. Must be `<cx-tab>` elements.
 *
 * @event {{ name: String }} cx-tab-show - Emitted when a tab is shown.
 * @event {{ name: String }} cx-tab-hide - Emitted when a tab is hidden.
 *
 * @csspart base - The component's base wrapper.
 * @csspart nav - The tab group's navigation container where tabs are slotted in.
 * @csspart tabs - The container that wraps the tabs.
 * @csspart active-tab-indicator - The line that highlights the currently selected tab.
 * @csspart body - The tab group's body where tab panels are slotted in.
 * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<cx-icon-button>`.
 * @csspart scroll-button--start - The starting scroll button.
 * @csspart scroll-button--end - The ending scroll button.
 * @csspart scroll-button__base - The scroll button's exported `base` part.
 *
 * @cssproperty --indicator-color - The color of the active tab indicator.
 * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
 * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
 * @cssproperty [--tab-dropdown-trigger-max-width=150px] - The maximum width of the dropdown button.
 */
export default class CxTabGroup extends CortexElement {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-button': typeof CxButton;
        'cx-dropdown': typeof CxDropdown;
        'cx-icon-button': typeof CxIconButton;
        'cx-menu': typeof CxMenu;
        'cx-menu-item': typeof CxMenuItem;
        'cx-resize-observer': typeof CxResizeObserver;
        'cx-tab': typeof CxTab;
    };
    private readonly localize;
    private mutationObserver;
    private resizeObserver;
    private panelResizeObserver?;
    private tabs;
    private focusableTabs;
    private panels;
    tabGroup: HTMLElement;
    body: HTMLSlotElement;
    container: HTMLElement;
    nav: HTMLElement;
    indicator: HTMLElement;
    dropdown: CxDropdown;
    menu: CxMenu;
    tabButtons: HTMLElement;
    dropdownTrigger: CxButton;
    private allDots;
    private activeTab?;
    private hasScrollControls;
    private shouldHideScrollStartButton;
    private shouldHideScrollEndButton;
    private dropdownOffset;
    private tabPanelHeight;
    private tabAlignmentIndent;
    shouldIgnoreAlignment: boolean;
    shouldShowDropdown: boolean;
    isActiveTabHidden: boolean;
    paginationCount: number;
    activePaginationIndex: number;
    tabWidth: number;
    clampedTabsPerPage: number;
    /** The placement of the tabs. */
    placement: TabGroupPlacement;
    /**
     * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
     * manual, the tab will receive focus but will not show until the user presses spacebar or enter.
     */
    activation: TabGroupActivation;
    /** Disables the scroll arrows that appear when tabs overflow. */
    noScrollControls: boolean;
    /** Prevent scroll buttons from being hidden when inactive. */
    fixedScrollControls: boolean;
    /** Use max panel height for all tab panels. */
    useMaxPanelHeight: boolean;
    /** The variant of the tab group. */
    variant: TabGroupVariant;
    /** The overflow variant of the tab group. */
    overflowVariant: TabGroupOverflowVariant;
    /** Indicate the way to hide tab panel. */
    hidePanelVariant: TabGroupHidePanelVariant;
    /** The alignment of the tabs. */
    tabAlignment: TabGroupAlignment;
    /** The label of the dropdown. */
    dropdownLabel: string;
    /**
     * The number of tabs per page. This applies when overflow variant is pagination.
     */
    tabsPerPage: number;
    /** The minimum width of the tab. */
    minTabWidth: number;
    /** Minimum clamp width - The minimum width of the tab not to be clamped */
    private static readonly MIN_CLAMP_WIDTH;
    connectedCallback(): void;
    disconnectedCallback(): void;
    /**
     * Navigate to the next tab
     */
    nextTab(options?: {
        paginate?: boolean;
        paginateDirection?: 'forward' | 'backward';
    }): void;
    /**
     * Navigate to the previous tab
     */
    previousTab(options?: {
        paginate?: boolean;
        paginateDirection?: 'forward' | 'backward';
    }): void;
    private getAllTabs;
    private getAllPanels;
    private getActiveTab;
    /**
     * If dropdown overflow but placement is start and end, count as scroll overflow
     */
    private get allowDropdownOverflow();
    /**
     * Get the height of the body
     */
    private get bodyHeight();
    /**
     * Get caret direction based on placement
     */
    private get caretDirection();
    private handleClick;
    private handleKeyDown;
    private handleScrollToStart;
    private handleScrollToEnd;
    private handleDropdownAfterShow;
    private setActiveTab;
    private setAriaLabels;
    private repositionIndicator;
    /**
     * This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.
     */
    private syncTabsAndPanels;
    /**
     * Calculate the highest tab height
     */
    private calculateTabPanelHeight;
    private updatePagination;
    /**
     * Sync the scroll position to the rightmost tab when:
     * overflow variant is dropdown and the direction is rtl
     */
    private syncScrollPosition;
    private findNextFocusableTab;
    /**
     * The reality of the browser means that we can't expect the scroll position to be exactly what we want it to be, so
     * we add one pixel of wiggle room to our calculations.
     */
    private scrollOffset;
    private handleScrollEnd;
    private updateScrollButtons;
    private isScrolledToEnd;
    private scrollFromStart;
    updateScrollControls(): void;
    syncIndicator(): void;
    handleVariantChange(): Promise<void>;
    handleOverflowVariantChange(): void;
    handleDropdownLabelChange(): void;
    handleAbsoluteHeightChange(): void;
    handleTabAlignmentChange(): void;
    handleTabsPerPageChange(): Promise<void>;
    /**
     * Setup ResizeObserver for all panels when keepHiddenHeight is enabled
     */
    private setupPanelResizeObserver;
    /**
     * Clean up panel ResizeObserver
     */
    private cleanupPanelResizeObserver;
    /** Shows the specified tab panel. */
    show(panel: string): void;
    private handleNavContainerResize;
    private handleIndicatorResize;
    /** Guard for dropdown variant */
    private getDropdownStyle;
    private getDropdownPlacement;
    private handlePaginationDotClick;
    private handlePaginationDotKeyDown;
    private renderPaginationDot;
    render(): import('lit').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-tab-group': CxTabGroup;
    }
}
