/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { DrawerSelectEvent } from './DrawerSelectEvent';
import { DrawerAnimation } from '../interfaces/DrawerAnimation';
import { DrawerItemProps } from './DrawerItemProps';
/**
 * The properties of the [Kendo UI for Vue Drawer component]({% slug overview_drawer %}).
 */
export interface DrawerProps {
    /**
     * Specifies the animation settings of the Drawer.
     * If boolean enables or disables the default animation.
     * Use DrawerAnimation to set slide animation with customizable duration option. Accepts a number in milliseconds.
     */
    animation?: boolean | DrawerAnimation;
    /**
     * Specifies the state of the Drawer. Defaults to `false` ([see example]({% slug expanded_state_drawer %})).
     */
    expanded?: boolean;
    /**
     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
     */
    dir?: string;
    /**
     * Specifies the mode in which the Drawer will be displayed.
     * The possible values are `overlay` and `push`.
     * Defaults to `overlay` ([see example]({% slug display_modes_drawer %}#toc-expand-modes)).
     */
    mode?: 'overlay' | 'push' | string;
    /**
     * Specifies the position of the Drawer.
     * The possible values are `start` and `end` ([see example]({% slug positioning_drawer %})).
     */
    position?: 'start' | 'end' | string;
    /**
     * Sets the `tabIndex` property of the Drawer.
     */
    tabIndex?: number;
    /**
     * Enables the mini (compact) view of the Drawer which is displayed when the component is collapsed
     * ([see example]({% slug display_modes_drawer %}#toc-mini-view))).
     */
    mini?: boolean;
    /**
     * Defines the width of the Drawer when the mini view is enabled and the component is collapsed. Defaults to `50`.
     */
    miniWidth?: number;
    /**
     * Defines the width of the Drawer when it is expanded. Defaults to `240`.
     */
    width?: number;
    /**
     * The collection of items that will be rendered in the Drawer ([see example]({% slug overview_drawer %})).
     */
    items?: Array<DrawerItemProps>;
    /**
     * Overrides the default component responsible for visualizing a single item ([see example]({% slug custom_rendering %})).
     *
     * The default Component is: [DrawerItem]({% slug api_layout_draweritemprops %}).
     */
    item?: any;
    /**
     * The event handler that will be fired when the overlay is clicked.
     * Used in overlay mode only.
     */
    onOverlayclick?: (event: any) => void;
    /**
     * Fires when a Drawer item is selected.
     */
    onSelect?: (event: DrawerSelectEvent) => void;
    /**
     * Provides the option to define a `header` in the Drawer component ([see example]({% slug custom_rendering %})).
     * The header is rendered above the Drawer Items. By default, the property is not defined.
     */
    navigationHeader?: String | Object | Function;
    /**
     * Provides the option to define a `footer` in the Drawer component ([see example]({% slug custom_rendering %})).
     * The footer is rendered below the Drawer Items. By default, the property is not defined.
     */
    navigationFooter?: String | Object | Function;
    /**
     * Provides the option to define a custom template inside the navigational section of the Drawer component ([see example]({% slug custom_rendering %})).
     * When defined, the custom template will override the default [DrawerItem]({% slug api_layout_draweritemprops %}) rendering.
     * By default, the property is not defined.
     */
    navigationContent?: String | Object | Function;
}