@georapbox/a-tab-group/dist/a-tab-group.d.ts

A custom element to create a group of tabs and tab panels.

export { ATab } from "./a-tab.js";
export { ATabPanel } from "./a-tab-panel.js";
export type Nullable<T> = T | null;
export type Tab = import("./a-tab").ATab;
export type TabPanel = import("./a-tab-panel").ATabPanel;
/**
 * @summary Container element for tabs and panels. All children of <a-tab-group> should be either `<a-tab>` or `<a-tab-panel>`.
 * @documentation https://github.com/georapbox/a-tab-group
 *
 * @tagname a-tab-group
 * @extends HTMLElement
 *
 * @property {string} placement - The placement of the tabs.
 * @property {boolean} noScrollControls - Whether or not the scroll controls are enabled.
 * @property {number} scrollDistance - The distance in pixels that the tabs will scroll when the scroll buttons are clicked.
 * @property {string} activation - The activation mode of the tabs.
 * @property {boolean} noTabCycling - Whether or not the tabs should cycle when reaching the first or last tab using the keyboard.
 *
 * @attribute placement - Reflects the placement property.
 * @attribute no-scroll-controls - Reflects the noScrollControls property.
 * @attribute scroll-distance - Reflects the scrollDistance property.
 * @attribute activation - Reflects the activation property.
 * @attribute no-tab-cycling - Reflects the noTabCycling property.
 *
 * @slot tab - Used for groupping tabs in the tab group. Must be <a-tab> elements.
 * @slot panel - Used for groupping tab panels in the tab group. Must be <a-tab-panel> elements.
 *
 * @csspart base - The component's base wrapper.
 * @csspart nav - The nav container.
 * @csspart nav--has-scroll-controls - The nav container when the scroll controls are enabled and visible.
 * @csspart scroll-button - The scroll button.
 * @csspart scroll-button--start - The scroll button for scrolling towards the start.
 * @csspart scroll-button--end - The scroll button for scrolling towards the end.
 * @csspart scroll-button-icon - The scroll button icon.
 * @csspart tabs - The tabs container.
 * @csspart panels - The panels container.
 *
 * @cssproperty --selected-tab-color - The color of the selected tab.
 * @cssproperty --selected-tab-bg-color - The background color of the selected tab.
 * @cssproperty --tabs-scroll-behavior - The scroll behavior of the tabs container.
 * @cssproperty --scroll-button-width - The width of the scroll buttons.
 * @cssproperty --scroll-button-height - The height of the scroll buttons.
 * @cssproperty --scroll-button-inline-offset - The inline offset of the scroll buttons.
 *
 * @event a-tab-show - Fired when a tab is shown.
 * @event a-tab-hide - Fired when a tab is shown.
 *
 * @method selectTabByIndex - Selects the tab at the given index.
 * @method selectTabById - Selects the tab with the given id.
 * @method selectTab - Selects the given tab.
 */
export class ATabGroup extends HTMLElement {
    static get observedAttributes(): string[];
    static defineCustomElement(elementName?: string): void;
    /**
     * Lifecycle method that is called when attributes are changed, added, removed, or replaced.
     *
     * @param {string} name - The name of the attribute.
     * @param {string} oldValue - The old value of the attribute.
     * @param {string} newValue - The new value of the attribute.
     */
    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
    set placement(value: Nullable<string>);
    /**
     * @type {Nullable<string>} - The placement of the tabs.
     * @default 'top'
     * @attribute placement - Reflects the placement property.
     */
    get placement(): Nullable<string>;
    set noScrollControls(value: boolean);
    /**
     * @type {boolean} - Whether or not the scroll controls are enabled.
     * @default false
     * @attribute no-scroll-controls - Reflects the noScrollControls property.
     */
    get noScrollControls(): boolean;
    set scrollDistance(value: number);
    /**
     * @type {number} - The distance in pixels that the tabs will scroll when the scroll buttons are clicked.
     * @default 200
     * @attribute scroll-distance - Reflects the scrollDistance property.
     */
    get scrollDistance(): number;
    set activation(value: string);
    /**
     * @type {string} - The activation mode of the tabs.
     * @default 'auto'
     * @attribute activation - Reflects the activation property.
     */
    get activation(): string;
    set noTabCycling(value: boolean);
    /**
     * @type {boolean} - Whether or not the tabs should cycle when reaching the first or last tab using the keyboard.
     * @default false
     * @attribute no-tab-cycling - Reflects the noTabCycling property.
     */
    get noTabCycling(): boolean;
    /**
     * Lifecycle method that is called when the element is first connected to the DOM.
     */
    connectedCallback(): void;
    /**
     * Lifecycle method that is called when the element is disconnected from the DOM.
     */
    disconnectedCallback(): void;
    /**
     * Selects the tab at the given index.
     * If the tab at the given index is disabled or already selected, this method does nothing.
     *
     * @param {number} index - The index of the tab to be selected.
     */
    selectTabByIndex(index: number): void;
    /**
     * Selects the tab with the given id.
     * If the tab with the given id is disabled or already selected, this method does nothing.
     *
     * @param {string} id - The id of the tab to be selected.
     */
    selectTabById(id: string): void;
    /**
     * Selects the given tab.
     * If the given tab is disabled or already selected, this method does nothing.
     *
     * @param {Tab} tab - The tab to be selected.
     */
    selectTab(tab: Tab): void;
    #private;
}
//# sourceMappingURL=a-tab-group.d.ts.map