import m from 'mithril';
import { Component, ComponentAttributes } from '../common/Component';
import './box.style.css';
import { FlexDirection, IdType, SizeType } from '../common/Types';
import { ValidEventTypes } from '../event-emitter/EventEmitter';
import { Container, ContainerAttributes } from '../common/Container';
declare type GapStyle = 'none' | 'line' | 'small' | 'large';
export declare type BoxAttributes = {
    /**
     * Name of CSS class or array of classes to apply to the box.
     */
    classnames?: string | string[];
    /**
     * Direction to order content into - "row" to organize them horizontally or "column" to organize them vertically
     */
    direction?: FlexDirection;
    /**
     * Text to display as header of the box
     */
    header?: string;
    /**
     * Style of gap between content cells
     */
    gap?: GapStyle;
    /**
     * Sizes of the box like minimal, maximal and default width and height
     */
    sizes?: SizeType;
    /**
     * Specifies wheather there is available button on the header line, that allows user to expand/collapse box's content
     */
    collapsable?: boolean;
    /**
     * Default value of box content visibility
     */
    collapsed?: boolean;
    /**
     * CSS flex value of the box
     */
    flex?: number | string;
    /**
     * Specifies wheather box is hidden as whole within its header. When true, no part of box could be rendered on the page.
     */
    hidden?: boolean;
    /**
     * Specifies wheather box content could wrap into multiple lines or not
     */
    flexWrap?: boolean;
} & ContainerAttributes;
export declare type BoxExtendedContentType = {
    content?: Component<ComponentAttributes, ValidEventTypes> | Array<Component<ComponentAttributes, ValidEventTypes> | BoxExtendedContentType> | ContainerAttributes['content'];
} & Omit<BoxAttributes, 'content'>;
declare type BoxEventTypes = ValidEventTypes & {
    onCreate: (dom: HTMLElement) => void;
    onUpdate: (dom: HTMLElement) => void;
};
/**
 * The Box class represents a flexible container that uses the flexbox model in CSS.
 * It allows for the creation of a dynamic layout where each cell can have its own functionality,
 * including a title, collapsible/expandable behavior, and the ability to hide/show content.
 * Cells can contain plain text, html or other components like Box, Toolbar, Table etc.
 */
export declare class Box extends Container<BoxAttributes, BoxEventTypes> {
    private _parent?;
    private header;
    private _boxes;
    private _flex?;
    constructor(attrs?: BoxExtendedContentType, parent?: Box);
    /**
     * Returns one of the nested cells by its id
     * @param id id of the cell to get
     * @returns Box container associated with passed id, or undefined if there is no nested box with requested id
     */
    getContainer(id: IdType): Box | undefined;
    /**
     * Returns array of all nested boxes on every level down until there is another box attached as content
     */
    getAllContainers(): Box[] | undefined;
    /**
     * Add new cell to the box
     * @param attributes configuration of the new box, or component instance to add inside new box
     * @returns Newly created box
     */
    add(attributes: BoxExtendedContentType | Component<ComponentAttributes, ValidEventTypes>): Box;
    /**
     * Get information about children boxes direction
     * @returns direction that box cells are organized into
     */
    getDirection(): FlexDirection;
    /**
     * Change direction of the children boxes
     * @param direction direction to organize children into
     */
    setDirection(direction: FlexDirection): void;
    /**
     * Makes box visible/invisible on the page as whole (header and content)
     * @param value true to hide the box
     */
    setHidden(value: boolean): void;
    /**
     * Get text displays as the box header title
     * @returns text of the box header
     */
    getHeader(): string | undefined;
    /**
     * Changes text displays as box header title
     * @param header text to display as header title
     */
    setHeader(header: string | undefined): void;
    /**
     * Get style of gaps between each container inside the box
     * @returns name of gap style currently used
     */
    getGap(): GapStyle;
    /**
     * Changes style of gap spaces between each container inside the box
     * @param gap name of gap style to use
     */
    setGap(gap?: GapStyle): void;
    /**
     * Hide box content. Remains only header line to display
     */
    collapse(): void;
    /**
     * Show box content.
     */
    expand(): void;
    /**
     * Hide/show box content.
     */
    toggle(): void;
    /**
     * Get information that box content is visible or not
     * @returns true when box content is visibled
     */
    isCollapsed(): boolean;
    view(): m.Children | m.Vnode<unknown, unknown>;
    private _getBoxCss;
    private _getContentCss;
    private _getOverflowCss;
    private _computeFlex;
    protected _getChildren(): m.Children;
    private _createHeader;
    private _getSizes;
    private _getCollapsingIcon;
}
export {};
//# sourceMappingURL=Box.d.ts.map