@ckeditor/ckeditor5-ai/src/aitabs/tabs/aitabsview.d.ts

AI features for CKEditor 5.

/**
 * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
 */
/**
 * @module ai/aitabs/tabs/aitabsview
 * @publicApi
 */
import { View, type ViewCollection } from 'ckeditor5/src/ui.js';
import { type ArrayOrItem, type Locale } from 'ckeditor5/src/utils.js';
import { TabButtonView } from './tabbuttonview.js';
import { TabPanelView } from './tabpanelview.js';
import '../../../theme/aitabs/tabs/tabsview.css';
export declare const AI_TABS_POSITIONS: readonly ["top", "left", "right"];
/**
 * A view component that manages the tabs and their panels.
 */
export declare class AITabsView extends View {
    /**
     * The collection of button views.
     */
    buttonViews: ViewCollection<TabButtonView>;
    /**
     * The collection of panel views.
     */
    panelViews: ViewCollection<TabPanelView>;
    /**
     * An additional CSS class added to the {@link #element}.
     *
     * @observable
     */
    class?: string;
    /**
     * The ID of the active tab.
     *
     * See {@link #getTabIds}.
     *
     * @observable
     */
    activeTab: string | null;
    /**
     * The position of the tabs.
     *
     * @observable
     */
    side: typeof AI_TABS_POSITIONS[number];
    /**
     * Indicates whether the tabs view is maximized.
     *
     * @observable
     */
    isMaximized: boolean;
    /**
     * Creates a new AITabsView instance.
     */
    constructor(locale: Locale, options?: AITabsViewOptions);
    /**
     * Returns the IDs of all tabs as defined in the {@link #addTab} method.
     *
     * Also see: {@link #getTab}.
     *
     * @returns {Array<string>} The IDs of all tabs.
     */
    getTabIds(): Array<string>;
    /**
     * Returns the pair of tab button and panel of a specific id.
     *
     * Note: Use {@link #getTabIds} to learn how to get the IDs of all tabs.
     */
    getTab(tabId: string): {
        button: TabButtonView;
        panel: TabPanelView;
    } | null;
    /**
     * Adds a new tab to the tabs view.
     *
     * Note: Use {@link #activateTab} to activate the tab after adding it.
     *
     * Note: You can hide or show the tab after adding it using {@link #hideTab} and {@link #showTab}.
     */
    addTab(config: AITabsAddTabOptions): {
        button: TabButtonView;
        panel: TabPanelView;
    };
    /**
     * Activates a tab by its ID.
     *
     * Note: Use {@link #getTabIds} to learn how to get the IDs of all tabs.
     *
     * Note: If `null` is passed, the current active tab will be deactivated and its panel will be hidden.
     */
    activateTab(id: string | null): void;
    /**
     * Shows the tab of a specific id.
     *
     * Note: Use {@link #getTabIds} to learn how to get the IDs of all tabs.
     */
    showTab(id: string): void;
    /**
     * Hides the tab of a specific id.
     *
     * Note: Use {@link #getTabIds} to learn how to get the IDs of all tabs.
     */
    hideTab(id: string): void;
}
/**
 * The options for the `AITabsView#addTab()` method.
 */
export type AITabsAddTabOptions = {
    /**
     * The unique ID of the tab.
     */
    id: string;
    /**
     * The label of the tab button.
     */
    buttonLabel: string;
    /**
     * The icon of the tab button. See {@link module:ui/button/buttonview~ButtonView#icon} to learn more.
     */
    buttonIcon?: string;
    /**
     * The order of the tab. If not provided, the tab will be added to the end of the tabs list.
     */
    order?: number;
    /**
     * The content of the tab. If not provided, the tab will be empty.
     */
    content?: View;
};
/**
 * The options for the `AITabsView` class constructor.
 */
export type AITabsViewOptions = {
    /**
     * Additional children of the tabs view.
     */
    children?: Array<View>;
    /**
     * The position of the tabs.
     */
    side?: typeof AI_TABS_POSITIONS[number];
    /**
     * An additional CSS class added to the {@link module:ai/aitabs/tabs/aitabsview~AITabsView#element}.
     */
    class?: ArrayOrItem<string>;
};