@exadel/esl/modules/esl-tab/core/esl-tabs.d.ts

Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components

import { ESLBaseElement } from '../../esl-base-element/core';
import { ESLMediaRuleList } from '../../esl-media-query/core/esl-media-rule-list';
import { ESLTab } from './esl-tab';
/**
 * ESlTabs component
 * @author Julia Murashko
 *
 * Tabs container component for Tabs trigger group.
 * Uses {@link ESLTab} as an item.
 * Each individual {@link ESLTab} can control {@link ESLToggleable} or, usually, {@link ESLPanel}
 */
export declare class ESLTabs extends ESLBaseElement {
    static is: string;
    static observedAttributes: string[];
    /** List of supported scrollable types */
    static supportedScrollableTypes: string[];
    /**
     * Scrollable mode (supports {@link ESLMediaRuleList}).
     * Supported types for different breakpoints ('disabled' by default):
     * - 'disabled' or not defined -  scroll behavior is disabled;
     * - 'center' - scroll behavior is enabled, tab is center-aligned;
     * - 'side' - scroll behavior is enabled, tab is side-aligned;
     * - empty or unsupported value is equal to 'side' behavior;
     */
    scrollable: string;
    /** Inner element to contain {@link ESLTab} collection. Will be scrolled in a scrollable mode */
    scrollableTarget: string;
    protected _deferredUpdateArrows: import("../../esl-utils/async/debounce").Debounced<() => void>;
    protected _deferredFitToViewport: import("../../esl-utils/async/debounce").Debounced<($trigger: ESLTab | null, behavior?: ScrollBehavior) => void>;
    /** ESLMediaRuleList instance of the scrollable type mapping */
    get scrollableTypeRules(): ESLMediaRuleList<string>;
    /** @returns current scrollable type */
    get currentScrollableType(): string;
    protected connectedCallback(): void;
    protected attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void;
    protected bindScrollableEvents(): void;
    protected unbindScrollableEvents(): void;
    /** Collection of inner {@link ESLTab} items */
    get $tabs(): ESLTab[];
    /** Active {@link ESLTab} item */
    get $current(): ESLTab | null;
    /** Container element to scroll */
    get $scrollableTarget(): HTMLElement | null;
    /** Is the scrollable mode enabled ? */
    get isScrollable(): boolean;
    /** Move scroll to the next/previous item */
    moveTo(direction: string, behavior?: ScrollBehavior): void;
    /** Scroll tab to the view */
    protected fitToViewport($trigger: ESLTab | null, behavior?: ScrollBehavior): void;
    /** Get scroll offset position from the selected item rectangle */
    protected calcScrollOffset(itemRect: DOMRect, areaRect: DOMRect): number | undefined;
    protected updateArrows(): void;
    protected updateMarkers(): void;
    /** Update element state according to scrollable type */
    protected updateScrollableType(): void;
    protected _onTriggerStateChange({ detail }: CustomEvent): void;
    protected _onClick(event: Event): void;
    protected _onFocus(e: FocusEvent): void;
    protected _onScroll(): void;
    protected _onResize(): void;
    /** Handles scrollable type change */
    protected _onScrollableTypeChange(): void;
}
declare global {
    export interface ESLLibrary {
        Tabs: typeof ESLTabs;
    }
    export interface HTMLElementTagNameMap {
        'esl-tabs': ESLTabs;
    }
}