import { Cre8Element } from '../cre8-element';
import { Cre8TabPanel } from '../tab-panel/tab-panel';
import { Cre8Tab } from '../tab/tab';
/**
 * Tabs are used to quickly navigate back and forth between views.
 * The Tab design and interaction varies depending on the requirements for your organization and project.
 * Standardizing on the best individual controls will improve usability and reduce development and QA time.
 *
 * Create a standard set of Tab controls:
 * Primary Tabs (for system navigation), Secondary Tabs (for sub navigation within a screen).
 *
 * ## Usability Guidelines
 * - The selected Tab should be visually differentiated from the other Tabs.
 *   The deselected Tabs should still look enabled.
 *   Dimming the other Tabs decreases the legibility of items that are actually active and clickable.
 * - There must be a minimum of 2 Tabs.
 * - Showing status in a Tab is non-standard (such as 0%, 10%).
 * - Tab labels and content should be parallel, with the exception of a Summary or Overview Tab
 *   which can be a rollup of content across other Tabs.
 * - Keep the font size of the Tabs the same.
 *   If the Tabs are a fixed width and one of the labels is too long,
 *   don't resize the text to fit and consider wrapping text to a second line.
 * - If possible, don't truncate text because it makes it harder to understand what's in the Tab.
 * - Try not to use more than six Tabs to keep the UI uncluttered.
 * - Do not stack Tabs on top of each other, and do not nest Tabs within Tabs.
 *   Find alternate ways of navigating page hierarchy.
 *
 * @slot default - Default, unnamed slot container for each `cre8-tab` button
 * @slot panel - Container for each `cre8-tab-panel` content item
 */
export declare class Cre8Tabs extends Cre8Element {
    static styles: import("lit").CSSResult[];
    /**
     * Tab sizes
     * - **default** displays the cre8-tab text with cre8-typography-label-default
     * - **sm** displays the cre8-tab text with cre8-typography-label-small
     * @type {"sm"}
     * @attr
     */
    size?: 'sm';
    /**
     * Displays a set of tabs with a spanning the width of the element
     * @attr {boolean}
     */
    fullWidth?: boolean;
    /**
     * Auto Increment id to sync tab and tab panel
     *
     * _*This property is dynamically set_
     */
    tabId: string;
    /**
     * Sets the initial active tab (e.g. 0 sets the first tab, 1 sets the second tab, etc.)
     * @attr {number}
     */
    activeIndex?: number;
    /**
     * The active tab
     *
     * _*This property is dynamically set_
     */
    activeTab?: Cre8Tab;
    /**
     * If position from left is greater than 0, set isStart to false. Otherwise set isStart to true.
     *
     * _*This property is dynamically set_
     * @attr {boolean}
     */
    isStart?: boolean;
    /**
     * If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.
     *
     * _*This property is dynamically set_
     * @attr {boolean}
     */
    isEnd?: boolean;
    /**
     * Query all the tab items
     */
    _Cre8TabItems: Array<Cre8Tab>;
    /**
     * Query all the tab panels
     */
    _Cre8TabPanels: Array<Cre8TabPanel>;
    /**
     * Query the tabs header element
     */
    _Cre8TabsHeader: HTMLElement;
    /**
     * Query the tabs header list element
     */
    _Cre8TabsHeaderList: HTMLElement;
    /**
     * Query the document direction value
     *
     * _*This property is dynamically set_
     */
    get isRTL(): boolean;
    /**
     * Initialize Functions
     */
    constructor();
    /**
     * Connected Callback Lifecycle
     * 1. Fires each time a custom element is appended into a document-connected element.
     */
    connectedCallback(): void;
    /**
     * Disconnected Callback Lifecycle
     * 1. Removes the event listeners to ensure that any memory allocated by your component
     *    will be cleaned up when your component is destroyed or disconnected from the page.
     */
    disconnectedCallback(): void;
    /**
     * First Updated Lifecycle Hook
     * 1. Sets the `aria-labelledby` prop for accessible tabs if user doesn't define the `ariaLabelledBy` prop.
     * 2. Sets the active tab if activeIndex is defined. Otherwise, set the first tab as active by default.
     * 3. Initialize isStart and isEnd.
     * 4. Set the varaint on the cre8-tab according to the cre8-tabs variant.
     */
    firstUpdated(): Promise<void>;
    /**
     * Updated Lifecycle Hook
     * 1. remove selected state from previously selected tab
     * 2. Checks to see if the old `activeIndex` property has been updated.
     *    If the new value doesn't equal the old value, activate the proper tab
     */
    updated(changedProperties: Map<string, unknown>): Promise<void>;
    /**
     * Handle Resize
     * 1. On resize, if position from left is greater than 0, set isStart to false. Otherwise set isStart to true.
     * 2. On resize, If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.
     * @fires resize
     */
    handleResize(): void;
    /**
     * Handle Scroll
     * 1. On scroll, if position from left is greater than 0, set isStart to false. Otherwise set isStart to true.
     * 2. On scroll, If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.
     * @fires scroll
     */
    handleScroll(): void;
    /**
     * Set isStart State
     * 1. If position from left is greater than 0, set isStart to false. Otherwise set isStart to true.
     */
    setIsStart(): void;
    /**
     * Set isEnd State
     * 1. If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.
     */
    setIsEnd(): void;
    /**
     * Check if last overflow list item is in the viewport
     * 1. Get children of the overflow list inner container and get bounding client rectangle of last child
     * 2. Return true if the left property is greater than or equal to 0 and if the right property is less
     * than or equal to the window inner width or document client width
     */
    isInViewport(): boolean;
    /**
     * Set Tab Variant
     * 1. Loop through all the cre8-tab Components and set the size to 'sm' if the parent has size 'sm'.
     */
    setTabVariant(): void;
    /**
     * Set the attributes on tab and tab panel
     * 1. Sets the index value on the tab items.
     * 2. Sets the `aria-labelledby` on the tab items.
     * 3. Set the index and id on the tab-panel to match the tab.
     */
    setTabAttributes(): void;
    /**
     * Set Active Tab
     * 1. Sets the active state for the selected tab.
     * 2. Sets the active state for the tab panel with the same index value as the selected tab.
     */
    setActiveTab(): void;
    /**
     * Set Active Tab Focus
     */
    setActiveTabFocus(): void;
    /**
     * Handle Tab Selected
     * 1. Only continue if event target is a tab
     * 2. If tab is active, make the previous selected tab inactive.
     * 3. Set the clicked tab active.
     * 4. Emit the custom event.
     * @fires tabSelected
     */
    handleTabSelected(event: MouseEvent): void;
    /**
     * Handle Keydown
     * 1. If the active tab is not focused then handle the keydown events.
     * 2. On keydown of the right arrow, make the next tab active.
     * 3. On keydown of the left arrow, make the previous tab active.
     * 4. On keydown of the home key, make the first tab active.
     * 5. On keydown of the end key, make the last tab active.
     * 6. On keydown of the escape key, remove the focus.
     * @fires keydown
     */
    handleKeydown(event: KeyboardEvent): void;
    /**
     * Set Selected To Previous Tab
     * 1. Get current selected Tab index then deactivate previously selected tab.
     * 2. If current activeIndex is in first position then move the tab focus to last tab.
     * 3. Set the active tab and focus.
     * 4. Emit custom event.
     * @fires tabChange
     */
    setSelectedToPreviousTab(currentTab: Cre8Tab): void;
    /**
     * Set Selected To Next Tab
     * 1. Get current selected Tab index then deactivate previously selected tab.
     * 2. If current activeIndex is in last position then move the tab focus to first tab.
     * 3. Set the active tab and focus.
     * 4. Emit custom event.
     * @fires tabChange
     */
    setSelectedToNextTab(currentTab: Cre8Tab): void;
    /**
     * Remove Active from Previous Tab
     * 1. Get current selected Tab index then deactivate previously selected tab
     * 2. If current activeIndex is in first position then move the tab focus to last tab
     */
    removePreviousActiveTab(): void;
    /**
     * Emit custom event
     */
    emitEvent(): void;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cre8-tabs': Cre8Tabs;
    }
}
export default Cre8Tabs;
//# sourceMappingURL=tabs.d.ts.map