/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { BottomNavigationItemProps as BottomNavigationItemProps_2 } from './BottomNavigationItemProps';
import { BreadcrumbDataModel as BreadcrumbDataModel_2 } from './interfaces/BreadcrumbProps';
import { BreadcrumbDelimiterProps as BreadcrumbDelimiterProps_2 } from '..';
import { BreadcrumbLinkMouseEvent as BreadcrumbLinkMouseEvent_2 } from './interfaces/BreadcrumbProps';
import { BreadcrumbLinkProps as BreadcrumbLinkProps_2 } from '..';
import { BreadcrumbListItemProps as BreadcrumbListItemProps_2 } from '..';
import { BreadcrumbOrderedListProps as BreadcrumbOrderedListProps_2 } from '..';
import { Component } from 'vue';
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { DefineComponent } from 'vue';
import { DrawerAnimation as DrawerAnimation_2 } from '..';
import { DrawerItemProps as DrawerItemProps_2 } from '..';
import { DrawerSelectEvent as DrawerSelectEvent_2 } from '..';
import { ExtractPropTypes } from 'vue';
import { GridLayoutColumnProps as GridLayoutColumnProps_2 } from '..';
import { GridLayoutGap as GridLayoutGap_2 } from './interfaces/GridLayoutProps';
import { GridLayoutRowProps as GridLayoutRowProps_2 } from '..';
import { MenuItemModel as MenuItemModel_2 } from '../..';
import { Navigation } from '@progress/kendo-vue-common';
import { PanelBarExpandMode as PanelBarExpandMode_2 } from './interfaces/PanelBarProps';
import { PropType } from 'vue';
import { PublicProps } from 'vue';
import { Ref } from 'vue';
import { RendererElement } from 'vue';
import { RendererNode } from 'vue';
import { StepProps as StepProps_2 } from '..';
import { SVGIcon } from '@progress/kendo-vue-common';
import { SVGIcon as SVGIcon_2 } from '@progress/kendo-svg-icons';
import { VNode } from 'vue';

/**
 * @hidden
 */
export declare const ActionSheet: DefineComponent<ExtractPropTypes<    {
expand: PropType<boolean>;
animation: {
type: PropType<boolean>;
default: boolean;
};
animationDuration: {
type: PropType<number>;
default: number;
};
animationStyles: PropType<any>;
tabIndex: PropType<number>;
items: PropType<ActionSheetItemProps[]>;
subTitle: PropType<string>;
title: PropType<string>;
className: PropType<string>;
headerClassName: {
type: PropType<string>;
default: any;
};
contentClassName: {
type: PropType<string>;
default: any;
};
headerStyle: {
type: PropType<string>;
default: any;
};
footerClassName: {
type: PropType<string>;
default: any;
};
header: PropType<string | Function>;
content: PropType<string | Function>;
footer: PropType<string | Function>;
item: PropType<string | Function>;
navigatable: {
type: PropType<boolean>;
default: boolean;
};
navigatableElements: {
type: PropType<string[]>;
default: () => any[];
};
actions: PropType<any>;
onClose: PropType<(event: any) => void>;
}>, {}, {
show: boolean;
slide: boolean;
}, {
topGroupItems(): Array<ActionSheetItemProps> | undefined;
bottomGroupItems(): Array<ActionSheetItemProps> | undefined;
shouldRenderSeparator(): boolean;
}, {
handleKeyDown(e: any): void;
onTab(target: HTMLElement, nav: Navigation, ev: any): void;
handleOverlayClick(ev: any): void;
handleItemClick(ev: {
syntheticEvent: any;
title?: string;
item?: any;
}): void;
onEnter(target: HTMLElement, nav: Navigation, ev: any): void;
onEscape(_target: HTMLElement, _nav: Navigation, ev: any): void;
hideActionSheet(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
expand: PropType<boolean>;
animation: {
type: PropType<boolean>;
default: boolean;
};
animationDuration: {
type: PropType<number>;
default: number;
};
animationStyles: PropType<any>;
tabIndex: PropType<number>;
items: PropType<ActionSheetItemProps[]>;
subTitle: PropType<string>;
title: PropType<string>;
className: PropType<string>;
headerClassName: {
type: PropType<string>;
default: any;
};
contentClassName: {
type: PropType<string>;
default: any;
};
headerStyle: {
type: PropType<string>;
default: any;
};
footerClassName: {
type: PropType<string>;
default: any;
};
header: PropType<string | Function>;
content: PropType<string | Function>;
footer: PropType<string | Function>;
item: PropType<string | Function>;
navigatable: {
type: PropType<boolean>;
default: boolean;
};
navigatableElements: {
type: PropType<string[]>;
default: () => any[];
};
actions: PropType<any>;
onClose: PropType<(event: any) => void>;
}>> & Readonly<{}>, {
animation: boolean;
contentClassName: string;
animationDuration: number;
headerClassName: string;
headerStyle: string;
footerClassName: string;
navigatable: boolean;
navigatableElements: string[];
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare const ActionSheetContent: DefineComponent<ExtractPropTypes<    {
contentClassName: {
type: PropType<string>;
default: any;
};
}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
contentClassName: {
type: PropType<string>;
default: any;
};
}>> & Readonly<{}>, {
contentClassName: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare const ActionSheetFooter: DefineComponent<ExtractPropTypes<    {
footerClassName: {
type: PropType<string>;
default: any;
};
}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
footerClassName: {
type: PropType<string>;
default: any;
};
}>> & Readonly<{}>, {
footerClassName: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare const ActionSheetHeader: DefineComponent<ExtractPropTypes<    {
headerClassName: {
type: PropType<string>;
default: any;
};
headerStyle: {
type: PropType<string>;
default: any;
};
}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
headerClassName: {
type: PropType<string>;
default: any;
};
headerStyle: {
type: PropType<string>;
default: any;
};
}>> & Readonly<{}>, {
headerClassName: string;
headerStyle: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare const ActionSheetItem: DefineComponent<ExtractPropTypes<    {
id: PropType<number>;
description: PropType<string>;
disabled: PropType<boolean>;
group: {
type: PropType<string>;
validator: (value?: string) => any;
};
item: PropType<object>;
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
iconColor: PropType<string>;
iconSize: PropType<string>;
content: PropType<string | Function>;
title: PropType<string>;
tabIndex: {
type: PropType<number>;
default: number;
};
}>, {}, {}, {
wrapperClass(): {
'k-actionsheet-item': boolean;
'k-cursor-pointer': boolean;
'k-disabled': any;
};
}, {
onClick(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
click: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
id: PropType<number>;
description: PropType<string>;
disabled: PropType<boolean>;
group: {
type: PropType<string>;
validator: (value?: string) => any;
};
item: PropType<object>;
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
iconColor: PropType<string>;
iconSize: PropType<string>;
content: PropType<string | Function>;
title: PropType<string>;
tabIndex: {
type: PropType<number>;
default: number;
};
}>> & Readonly<{
onClick?: (...args: any[] | unknown[]) => any;
}>, {
tabIndex: number;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * Represents the props of the Kendo UI for Vue ActionSheetItem.
 */
export declare interface ActionSheetItemProps {
    /**
     * Sets additional CSS classes to the ActionSheetItem.
     */
    class?: string;
    /**
     * Sets additional CSS styles to the ActionSheetItem.
     */
    style?: object;
    /**
     * Specifies additional text rendered under the item's title.
     */
    description?: string;
    /**
     * Specifies if the ActionSheet item is initially disabled.
     */
    disabled?: boolean;
    /**
     * Defines the group of the item. Items can be segregated in two groups - `top` and `bottom`.
     * Each specifying whether the ActionSheet item will be rendered over the separator or under it.
     */
    group?: 'top' | 'bottom' | string;
    /**
     * Defines the icon rendered inside the ActionSheet item.
     */
    icon?: string;
    /**
     * Defines an SVGIcon to be rendered inside the ActionSheet item.
     */
    svgIcon?: SVGIcon;
    /**
     * Defines an size of the icon or SVGIcon that is rendered inside the ActionSheet item.
     */
    iconSize?: string;
    /**
     * Defines the color of the icon or SVGIcon that is rendered inside the ActionSheet item.
     */
    iconColor?: string;
    /**
     * Specifies the text content of the ActionSheet item.
     */
    title?: string;
    /**
     * @hidden
     */
    item?: object;
    /**
     * Sets the content of the ActionSheetItem either as string that is pointing to a slot template of as render function.
     */
    content?: string | Function;
    /**
     * @hidden
     */
    onClick?: (event: {
        event: any;
        title?: string;
    }) => void;
    /**
     * @hidden
     */
    onKeydown?: (event: any, title: string | undefined, id: number | undefined) => void;
    /**
     * @hidden
     */
    id?: number;
    /**
     * The tabIndex of the ActionSheetItem.
     */
    tabIndex?: number;
}

/**
 * The props of the ActionSheet component.
 */
export declare interface ActionSheetProps {
    /**
     * The collection of items that will be rendered in the ActionSheet.
     */
    items?: ActionSheetItemProps[];
    /**
     * Specifies the text that is rendered under the title.
     */
    subTitle?: string;
    /**
     * Specifies the text that is rendered as title.
     */
    title?: string;
    /**
     * Fires when the modal overlay is clicked.
     */
    onClose?: (event: any) => void;
    /**
     * Fires when an ActionSheet item is clicked.
     */
    onItemselect?: (event: {
        syntheticEvent: any;
        title?: string;
        item?: any;
    }) => void;
    /**
     * Specifies the `tabIndex` of the ActionSheet.
     */
    tabIndex?: number;
    /**
     * Specifies if the ActionSheet can be navigatable with keyboard.
     * Defaults to `true`.
     */
    navigatable?: boolean;
    /**
     * Specifies the selectors of the navigatable elements inside the templates of the ActionSheet.
     */
    navigatableElements?: string[];
    /**
     * Controls the popup animation. By default, the animation is enabled.
     */
    animation?: boolean;
    /**
     * @hidden
     */
    animationStyles?: any;
    /**
     * @hidden
     * Used to render the close button in the header of the ActionSheet.
     */
    actions?: any;
    /**
     * Specifies the duration of the transition for the entering and closing Animation. Defaults to `300ms`.
     */
    animationDuration?: number;
    /**
     * The CSS classes that will be rendered on the inner ActionSheet element.
     */
    className?: string;
    /**
     * The CSS classes that will be rendered on the DOM element that wraps the header section of the ActionSheet element.
     */
    headerClassName?: string;
    /**
     * The CSS classes that will be rendered on the DOM element that wraps the footer section of the ActionSheet element.
     */
    footerClassName?: string;
    /**
     * The CSS classes that will be rendered on the DOM element that wraps the content section of the ActionSheet element.
     */
    contentClassName?: string;
    /**
     * The custom Styles that will be applied on the DOM element that wraps the header section of the ActionSheet element.
     */
    headerStyle?: string;
    /**
     * Sets the header content of the ActionSheet either as string that is pointing to a slot template of as render function.
     */
    header?: string | Function;
    /**
     * Sets the content content of the ActionSheet either as string that is pointing to a slot template of as render function.
     */
    content?: string | Function;
    /**
     * Sets the footer content of the ActionSheet either as string that is pointing to a slot template of as render function.
     */
    footer?: string | Function;
    /**
     * Sets the item content of the ActionSheet either as string that is pointing to a slot template of as render function.
     */
    item?: string | Function;
    /**
     * Specifies the state of the ActionSheet.
     */
    expand?: boolean;
}

/**
 * @hidden
 */
export declare const AppBar: DefineComponent<ExtractPropTypes<    {
id: PropType<string>;
themeColor: {
type: PropType<string>;
default: string;
};
position: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
positionMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
}>, {}, {}, {
wrapperClass(): AppBarComputed['wrapperClass'];
}, {
focus(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
id: PropType<string>;
themeColor: {
type: PropType<string>;
default: string;
};
position: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
positionMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
}>> & Readonly<{}>, {
themeColor: string;
position: string;
positionMode: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface AppBarComputed {
    [key: string]: any;
    wrapperClass: object;
}

/**
 * Specifies the position of the AppBar ([see example]({% slug positioning_appbar %}#toc-position)).
 *
 * * The possible values are:
 * * 'top' (Default)
 * * 'bottom'
 *
 */
export declare type AppBarPosition = 'top' | 'bottom';

/**
 * Specifies the positionMode of the AppBar ([see example]({% slug positioning_appbar %}#toc-position-mode)).
 *
 * * The possible values are:
 * * 'static' (Default)
 * * 'sticky'
 * * 'fixed'
 */
export declare type AppBarPositionMode = 'static' | 'sticky' | 'fixed';

/**
 * Represents the props of the [Kendo UI for Vue AppBar component]({% slug overview_appbar %}).
 * Used to display information, actions, branding titles and additional navigation on the current screen.
 */
export declare interface AppBarProps {
    /**
     * Sets the `id` property of the root AppBar element.
     */
    id?: string;
    /**
     * Specifies the position of the AppBar ([see example]({% slug positioning_appbar %}#toc-position)).
     *
     * * The possible values are:
     * * 'top' (Default)
     * * 'bottom'
     *
     */
    position?: AppBarPosition | string;
    /**
     * Specifies the positionMode of the AppBar ([see example]({% slug positioning_appbar %}#toc-position-mode)).
     *
     * * The possible values are:
     * * 'static' (Default)
     * * 'sticky'
     * * 'fixed'
     */
    positionMode?: AppBarPositionMode | string;
    /**
     * Specifies the theme color of the AppBar ([see example]({% slug appearance_appbar %})).
     *
     * * The possible values are:
     * * `light` (Default)
     * * 'primary'
     * * 'dark'
     * * 'inherit'
     *
     */
    themeColor?: AppBarThemeColor | string;
}

/**
 * @hidden
 */
export declare const AppBarSection: DefineComponent<    {}, {}, {}, {}, {
focus(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface AppBarSectionComputed {
    [key: string]: any;
    wrapperClass: object;
}

/**
 * @hidden
 */
export declare const AppBarSpacer: DefineComponent<ExtractPropTypes<    {
width: PropType<string | number>;
}>, {}, {}, {
spacerClasses(): AppBarSpacerComputed['spacerClasses'];
spacerStyles(): AppBarSpacerComputed['spacerStyles'];
}, {
focus(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
width: PropType<string | number>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface AppBarSpacerComputed {
    [key: string]: any;
    spacerClasses: object;
    spacerStyles: object;
}

/**
 * Represents the props of the [Kendo UI for Vue AppBarSpacer component]({% slug contentarrangement_appbar %}#toc-defining-spacings).
 * Used to give additional white space between the AppBar sections and provides a way for customizing its width.
 */
export declare interface AppBarSpacerProps {
    width?: string | number;
}

/**
 * Specifies the theme color of the AppBar ([see example]({% slug appearance_appbar %})).
 *
 * * The possible values are:
 * * `inherit`
 * * `light` (Default)
 * * `dark`
 *
 */
export declare type AppBarThemeColor = 'light' | 'dark' | 'inherit';

/**
 * @hidden
 */
export declare const Avatar: DefineComponent<ExtractPropTypes<    {
type: {
type: PropType<string>;
default: avatarType;
validator: (value: string) => any;
};
border: PropType<boolean>;
rounded: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
size: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
themeColor: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
}>, {}, {}, {
wrapperClass(): AvatarComputed['wrapperClass'];
innerClass(): AvatarComputed['innerClass'];
}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
type: {
type: PropType<string>;
default: avatarType;
validator: (value: string) => any;
};
border: PropType<boolean>;
rounded: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
size: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
themeColor: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
}>> & Readonly<{}>, {
type: string;
themeColor: string;
size: string;
rounded: string;
fillMode: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface AvatarComputed {
    [key: string]: any;
    wrapperClass: object;
    innerClass: object;
}

declare enum avatarType {
    TEXT = "text",
    IMAGE = "image",
    ICON = "icon"
}

/**
 * An interface which holds the shared properties of the MenuItemModel and the MenuItem components.
 */
declare interface BaseMenuItem {
    /**
     * Specifies the item text ([see example]({% slug itemproperties_menu %}#toc-text)).
     */
    text?: string;
    /**
     * Specifies a URL which is rendered as a `href` attribute on the item link ([see example]({% slug itemproperties_menu %}#toc-url)).
     */
    url?: string;
    /**
     * Specifies the name of the [FontIcon]({% slug overview_icon %}) that will be rendered for the item).
     */
    icon?: string;
    /**
     * Specifies the name of the [SVGIcon]({% slug overview_svgicon %}) that will be rendered for the item).
     */
    svgIcon?: SVGIcon_2;
    /**
     * Specifies if the item is disabled ([see example]({% slug itemproperties_menu %}#toc-disabled-items)).
     */
    disabled?: boolean;
    /**
     * The additional CSS classes that will be rendered on the item ([see example]({% slug itemproperties_menu %}#toc-styles-and-classes)).
     */
    cssClass?: string;
    /**
     * The additional CSS classes that will be rendered on the item's popup.
     */
    popupClass?: string;
    /**
     * The CSS styles that will be rendered on the item ([see example]({% slug itemproperties_menu %}#toc-styles-and-classes)).
     */
    cssStyle?: any;
    /**
     * A Vue functional or class component which is used for rendering the innermost part of the Menu item ([see example]({% slug rendering_menu %}#toc-items)). By default, the innermost item part includes only the text for the item.
     */
    render?: any;
    /**
     * A Vue functional or class component which is used for rendering the link of the item ([see example]({% slug rendering_menu %}#toc-links)). The item link is a part of the visual representation of the item which, by default, includes an arrow, icon, and text.
     */
    linkRender?: any;
    /**
     * A Vue functional or class component which is used for rendering content instead of the item children ([see example]({% slug rendering_menu %}#toc-content)).
     */
    contentRender?: any;
    /**
     * Represents any additional data that is associated with the Menu item.
     */
    data?: any;
    /**
     * Specifies if this is a separator item. If set to true only the `cssClass` and `cssStyle` props should be rendered along.
     */
    separator?: boolean;
}

/**
 * @hidden
 */
export declare const BottomNavigation: DefineComponent<ExtractPropTypes<    {
dir: PropType<string>;
themeColor: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
fill: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
item: PropType<any>;
items: PropType<BottomNavigationItemProps_2[]>;
itemFlow: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
positionMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
border: {
type: PropType<boolean>;
default: boolean;
};
disabled: PropType<boolean>;
selected: PropType<number>;
}>, {}, {}, {
navClasses(): {
[x: string]: any;
[x: number]: boolean;
'k-bottom-nav': boolean;
'k-bottom-nav-border': any;
'k-disabled': any;
};
}, {
focus(): void;
dispatchSelectEvent(dispatchedEvent: any, index: number): void;
handleSelect(event: any, clickedItemIndex: number): void;
handleKeyDown(event: any, clickedItemIndex: number): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
keydown: any;
select: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
dir: PropType<string>;
themeColor: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
fill: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
item: PropType<any>;
items: PropType<BottomNavigationItemProps_2[]>;
itemFlow: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
positionMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
border: {
type: PropType<boolean>;
default: boolean;
};
disabled: PropType<boolean>;
selected: PropType<number>;
}>> & Readonly<{
onSelect?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
}>, {
fill: string;
themeColor: string;
border: boolean;
fillMode: string;
positionMode: string;
itemFlow: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface BottomNavigationComputed {
    [key: string]: any;
    navClasses: object;
}

/**
 * Represents the return type of the BottomNavigation events.
 */
export declare interface BottomNavigationEvent {
}

/**
 * The fill style of the BottomNavigation
 * ([see example]({% slug appearance_bottomnavigation %}#toc-fill)).
 *
 * The possible values are:
 * * `flat`(Default) &mdash; Sets the theme color as the text color. The background will be white.
 * * `solid` &mdash; Sets the theme color as a background color.
 *
 */
export declare type BottomNavigationFill = 'solid' | 'flat';

/**
 * @hidden
 */
export declare const BottomNavigationItem: DefineComponent<ExtractPropTypes<    {
id: PropType<string>;
disabled: PropType<boolean>;
selected: PropType<boolean>;
icon: PropType<any>;
item: PropType<any>;
text: PropType<any>;
dataItem: PropType<any>;
index: PropType<number>;
tabIndex: {
type: PropType<number>;
default: number;
};
}>, {}, {}, {
itemClasses(): BottomNavigationItemComputed['itemClasses'];
}, {
handleClick(event: any): void;
handleKeyDown(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
keydown: any;
select: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
id: PropType<string>;
disabled: PropType<boolean>;
selected: PropType<boolean>;
icon: PropType<any>;
item: PropType<any>;
text: PropType<any>;
dataItem: PropType<any>;
index: PropType<number>;
tabIndex: {
type: PropType<number>;
default: number;
};
}>> & Readonly<{
onSelect?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
}>, {
tabIndex: number;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface BottomNavigationItemComputed {
    [key: string]: any;
    itemClasses: object;
}

/**
 * Specifies how the icon and text label are positioned in each item of the BottomNavigation
 * ([see example]({% slug content_types_bottomnavigation %}#toc-item-flow)).
 *
 * The possible values are:
 * * `vertical`(Default) &mdash; Renders the text below the icon.
 * * `horizontal` &mdash; Renders the text and the icon on the same line.
 */
export declare type BottomNavigationItemFlow = 'vertical' | 'horizontal';

/**
 * The interface for describing items that can be passed to the `items` property of the BottomNavigation component.
 */
export declare interface BottomNavigationItemProps {
    /**
     * Style the BottomNavigation item.
     */
    style?: object;
    /**
     * Class the BottomNavigation item.
     */
    class?: string;
    /**
     * Disables the BottomNavigation item.
     */
    disabled?: boolean;
    /**
     * Specifies if the BottomNavigation item is selected.
     */
    selected?: boolean;
    /**
     * Defines the name for an existing icon in a Kendo UI for Vue theme.
     * The icon is rendered inside the BottomNavigation item by a `span.k-icon` element.
     */
    icon?: any;
    /**
     * Specifies the text content of the BottomNavigation item.
     */
    text?: any;
    /**
     * Sets the `tabIndex` property of the BottomNavigation item. Defaults to `0`.
     */
    tabIndex?: number;
    /**
     * Sets a custom property. Contained in the BottomNavItem props that are returned from the `onSelect` BottomNavigation event.
     */
    [customProp: string]: any;
    /**
     * @hidden
     */
    index?: number;
    /**
     * @hidden
     */
    item?: any;
    /**
     * @hidden
     */
    dataItem?: any;
    /**
     * @hidden
     */
    id?: string;
}

/**
 * Specifies the position and behavior of the BottomNavigation when the page is scrolled
 * ([see example]({% slug positioning_bottomnavigation %}#toc-position-mode)).
 *
 * The possible values are:
 * * `fixed`(Default) &mdash; The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
 * * `sticky` &mdash; Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between
 * static and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
 * It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode.
 */
export declare type BottomNavigationPositionMode = 'sticky' | 'fixed';

/**
 * Represents the props of the [Kendo UI for Vue BottomNavigation component]({% slug overview_bottomnavigation %}).
 */
export declare interface BottomNavigationProps {
    /**
     * Sets the `id` property of the root BottomNavigation element.
     */
    id?: string;
    /**
     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
     */
    dir?: string;
    /**
     * Specifies the theme color of the BottomNavigation
     * ([see example]({% slug appearance_bottomnavigation %}#toc-theme-color)).
     *
     * The possible values are:
     * * `primary` (Default) &mdash; Applies coloring based on the primary theme color.
     * * `secondary` &mdash; Applies coloring based on the secondary theme color.
     * * `tertiary` &mdash; Applies coloring based on the tertiary theme color.
     * * `info` &mdash; Applies coloring based on the info theme color.
     * * `success` &mdash; Applies coloring based on the success theme color.
     * * `warning` &mdash; Applies coloring based on the warning theme color.
     * * `error` &mdash; Applies coloring based on the error theme color.
     * * `dark` &mdash; Applies coloring based on the dark theme color.
     * * `light` &mdash; Applies coloring based on the light theme color.
     * * `inverse` &mdash; Applies coloring based on the inverted theme color.
     */
    themeColor?: BottomNavigationThemeColor | string;
    /**
     * The fill style of the BottomNavigation
     * ([see example]({% slug appearance_bottomnavigation %}#toc-fill)).
     *
     * The possible values are:
     * * `flat`(Default) &mdash; Sets the theme color as the text color. The background will be white.
     * * `solid` &mdash; Sets the theme color as a background color.
     */
    fillMode?: BottomNavigationFill | string;
    /**
     * @hidden
     */
    fill?: BottomNavigationFill | string;
    /**
     * Specifies the position and behavior of the BottomNavigation when the page is scrolled
     * ([see example]({% slug positioning_bottomnavigation %}#toc-position-mode)).
     *
     * The possible values are:
     * * `fixed`(Default) &mdash; The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
     * * `sticky` &mdash; Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between static
     * and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
     * It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode.
     */
    positionMode?: BottomNavigationPositionMode | string;
    /**
     * Specifies how the icon and text label are positioned in each item of the BottomNavigation
     * ([see example]({% slug content_types_bottomnavigation %}#toc-item-flow)).
     *
     * The possible values are:
     * * `vertical`(Default) &mdash; Renders the text below the icon.
     * * `horizontal` &mdash; Renders the text and the icon on the same line.
     */
    itemFlow?: BottomNavigationItemFlow | string;
    /**
     * Sets a border to the BottomNavigation.
     */
    border?: boolean;
    /**
     * Disables the whole BottomNavigation.
     */
    disabled?: boolean;
    /**
     * The index of the selected BottomNavigationItem.
     */
    selected?: number;
    /**
     * The collection of items that will be rendered in the BottomNavigation ([see example]({% slug overview_bottomnavigation %})).
     */
    items?: Array<BottomNavigationItemProps>;
    /**
     * Overrides the default component's content responsible for visualizing a single item
     * ([see example]({% slug custom_rendering_bottomnavigation %}#toc-custom-rendering)).
     */
    item?: any;
    /**
     * Fires when a BottomNavigation item is about to be rendered
     * ([see example]({% slug custom_rendering_bottomnavigation %}#toc-item-render-property)).
     * Used to override the default appearance of the items.
     */
    itemRender?: any;
    /**
     * Fires when a BottomNavigation item is selected.
     */
    onSelect?: (event: BottomNavigationSelectEvent) => void;
    /**
     * Triggered on `onKeyDown` event.
     */
    onKeyDown?: (event: BottomNavigationEvent) => void;
}

/**
 * The arguments for the `onSelect` BottomNavigation event.
 */
export declare interface BottomNavigationSelectEvent {
    /**
     * A BottomNavigation item event target.
     */
    itemTarget: any;
    /**
     * The index of the selected BottomNavigation item.
     */
    itemIndex: number;
}

/**
 * Specifies the theme color of the BottomNavigationThemeColor.
 * ([see example]({% slug appearance_bottomnavigation %}#toc-theme-color)).
 *
 * The possible values are:
 * * `primary` (Default) &mdash; Applies coloring based on the primary theme color.
 * * `secondary` &mdash; Applies coloring based on the secondary theme color.
 * * `tertiary` &mdash; Applies coloring based on the tertiary theme color.
 * * `info` &mdash; Applies coloring based on the info theme color.
 * * `success` &mdash; Applies coloring based on the success theme color.
 * * `warning` &mdash; Applies coloring based on the warning theme color.
 * * `error` &mdash; Applies coloring based on the error theme color.
 * * `dark` &mdash; Applies coloring based on the dark theme color.
 * * `light` &mdash; Applies coloring based on the light theme color.
 * * `inverse` &mdash; Applies coloring based on the inverted theme color.
 */
export declare type BottomNavigationThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';

/**
 * Represents the Breadcrumb component.
 */
export declare const Breadcrumb: DefineComponent<ExtractPropTypes<    {
id: PropType<string>;
tabIndex: PropType<number>;
disabled: PropType<boolean>;
collapseMode: {
type: PropType<"none" | "auto" | "wrap">;
default: string;
validator: (value: string) => any;
};
ariaLabel: {
type: PropType<string>;
default: string;
};
breadcrumbOrderedList: PropType<Component<BreadcrumbOrderedListProps_2>>;
breadcrumbListItem: PropType<Component<BreadcrumbListItemProps_2>>;
breadcrumbDelimiter: PropType<Component<BreadcrumbDelimiterProps_2>>;
breadcrumbLink: PropType<Component<BreadcrumbLinkProps_2>>;
dataItems: {
type: PropType<BreadcrumbDataModel_2[]>;
default: any[];
};
size: {
type: PropType<"small" | "medium" | "large">;
default: string;
};
dir: {
type: PropType<"rtl" | "ltr">;
default: any;
};
valueField: {
type: PropType<string>;
default: string;
};
textField: {
type: PropType<string>;
default: string;
};
svgIconField: {
type: PropType<string>;
default: string;
};
iconField: {
type: PropType<string>;
default: string;
};
onSelect: PropType<(event: BreadcrumbLinkMouseEvent_2) => void>;
onKeydown: PropType<(event: any) => void>;
}>, {
breadcrumbRef: Ref<any, any>;
}, {
currentDir: string;
localData: BreadcrumbDataModel_2[];
listItems: any[];
itemsData: any[];
addDelimiter: boolean;
}, {
itemClasses(): BreadcrumbComputed['itemClasses'];
}, {
getLastHiddenItemWidth(): any[];
calculateMedia(): void;
handleSelect(event: any): void;
handleKeyDown(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
select: any;
keydown: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
id: PropType<string>;
tabIndex: PropType<number>;
disabled: PropType<boolean>;
collapseMode: {
type: PropType<"none" | "auto" | "wrap">;
default: string;
validator: (value: string) => any;
};
ariaLabel: {
type: PropType<string>;
default: string;
};
breadcrumbOrderedList: PropType<Component<BreadcrumbOrderedListProps_2>>;
breadcrumbListItem: PropType<Component<BreadcrumbListItemProps_2>>;
breadcrumbDelimiter: PropType<Component<BreadcrumbDelimiterProps_2>>;
breadcrumbLink: PropType<Component<BreadcrumbLinkProps_2>>;
dataItems: {
type: PropType<BreadcrumbDataModel_2[]>;
default: any[];
};
size: {
type: PropType<"small" | "medium" | "large">;
default: string;
};
dir: {
type: PropType<"rtl" | "ltr">;
default: any;
};
valueField: {
type: PropType<string>;
default: string;
};
textField: {
type: PropType<string>;
default: string;
};
svgIconField: {
type: PropType<string>;
default: string;
};
iconField: {
type: PropType<string>;
default: string;
};
onSelect: PropType<(event: BreadcrumbLinkMouseEvent_2) => void>;
onKeydown: PropType<(event: any) => void>;
}>> & Readonly<{
onSelect?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
}>, {
ariaLabel: string;
size: "small" | "medium" | "large";
dir: "rtl" | "ltr";
collapseMode: "none" | "auto" | "wrap";
dataItems: BreadcrumbDataModel_2[];
valueField: string;
textField: string;
svgIconField: string;
iconField: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface BreadcrumbComputed {
    [key: string]: any;
    itemClasses: object;
}

/**
 * Represents the BreadcrumbDataModel object type.
 */
export declare interface BreadcrumbDataModel {
    /**
     * Represents the `id` of the dataItems object.
     * Used for setting the `key` of the BreadcrumbListItem component and the `id` of the BreadcrumbLink component.
     */
    id?: string;
    /**
     * Represents the `text` used inside the BreadcrumbLink component.
     */
    text?: string;
    /**
     * Represents the `svgIcon` used inside the BreadcrumbLink component.
     */
    svgIcon?: VNode;
    /**
     * Represents the `icon` used inside the BreadcrumbLink component.
     */
    icon?: VNode;
    /**
     * @hidden
     */
    disabled?: boolean;
}

/**
 * Represents the BreadcrumbDelimiter component.
 */
export declare const BreadcrumbDelimiter: DefineComponent<ExtractPropTypes<    {
id: PropType<string>;
dir: PropType<string>;
tabIndex: PropType<number>;
}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
id: PropType<string>;
dir: PropType<string>;
tabIndex: PropType<number>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * Represents the properties of BreadcrumbDelimiter component.
 */
export declare interface BreadcrumbDelimiterProps {
    /**
     * Sets the `id` property of the BreadcrumbDelimiter component.
     */
    id?: string;
    /**
     * Sets the `tabIndex` attribute to the BreadcrumbDelimiter.
     */
    tabIndex?: number;
    /**
     * @hidden
     */
    dir?: string;
}

/**
 * Represents the BreadcrumbLink component.
 */
export declare const BreadcrumbLink: DefineComponent<ExtractPropTypes<    {
id: PropType<string>;
tabIndex: PropType<number>;
dir: PropType<string>;
disabled: PropType<boolean>;
text: PropType<string>;
svgIcon: PropType<VNode<RendererNode, RendererElement, {
[key: string]: any;
}>>;
icon: PropType<VNode<RendererNode, RendererElement, {
[key: string]: any;
}>>;
ariaCurrent: PropType<boolean>;
isLast: PropType<boolean>;
isFirst: PropType<boolean>;
onSelect: PropType<(event: any) => void>;
}>, {
linkRef: Ref<any, any>;
}, {}, {
itemClasses(): BreadcrumbLinkComputed['itemClasses'];
}, {
focus(): void;
handleSelect(event: any): void;
handleKeyDown(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, ("select" | "keydown")[], "select" | "keydown", PublicProps, Readonly<ExtractPropTypes<    {
id: PropType<string>;
tabIndex: PropType<number>;
dir: PropType<string>;
disabled: PropType<boolean>;
text: PropType<string>;
svgIcon: PropType<VNode<RendererNode, RendererElement, {
[key: string]: any;
}>>;
icon: PropType<VNode<RendererNode, RendererElement, {
[key: string]: any;
}>>;
ariaCurrent: PropType<boolean>;
isLast: PropType<boolean>;
isFirst: PropType<boolean>;
onSelect: PropType<(event: any) => void>;
}>> & Readonly<{
onKeydown?: (...args: any[]) => any;
onSelect?: (...args: any[]) => any;
}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface BreadcrumbLinkComputed {
    [key: string]: any;
    itemClasses: object;
}

/**
 * Represents the `BreadcrumbLinkMouseEvent`.
 */
export declare interface BreadcrumbLinkMouseEvent {
    /**
     * Represents the `id` of the `BreadcrumbLinkMouseEvent`.
     */
    id?: string;
    /**
     * A Vue native DOM event.
     */
    nativeEvent: any;
}

/**
 * Represents the properties of BreadcrumbLink component.
 */
export declare interface BreadcrumbLinkProps {
    /**
     * Sets the `id` property of the top `div` element of the BreadcrumbLink.
     */
    id?: string;
    /**
     * Sets the `tabIndex` attribute to the BreadcrumbLink.
     */
    tabIndex?: number;
    /**
     * The Breadcrumb direction `ltr` or `rtl`.
     */
    dir?: string;
    /**
     * Determines the `disabled` mode of the BreadcrumbLink. If `true`, the component is disabled.
     */
    disabled?: boolean;
    /**
     * Represents the `text` of the BreadcrumbLink component.
     */
    text?: string;
    /**
     * Represents the `svgIcon` of the BreadcrumbLink component.
     */
    svgIcon?: VNode;
    /**
     * Represents the `icon` of the BreadcrumbLink component.
     */
    icon?: VNode;
    /**
     * Represents the `onSelect` event. Triggered after click on the BreadcrumbLink item.
     */
    onSelect?: (event: any) => void;
    /**
     * Represents the `onKeydown` event. Triggered after key down on the BreadcrumbLink item.
     */
    onKeydown?: (event: any) => void;
    /**
     * Sets the `aria-current` value.
     */
    ariaCurrent?: boolean;
    /**
     * @hidden
     */
    isLast?: boolean;
    /**
     * @hidden
     */
    isFirst?: boolean;
}

/**
 * @hidden
 */
export declare const BreadcrumbListItem: DefineComponent<ExtractPropTypes<    {
id: PropType<string>;
isFirstItem: PropType<boolean>;
isLastItem: PropType<boolean>;
}>, {}, {}, {
itemClasses(): BreadcrumbListItemComputed['itemClasses'];
}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
id: PropType<string>;
isFirstItem: PropType<boolean>;
isLastItem: PropType<boolean>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface BreadcrumbListItemComputed {
    [key: string]: any;
    itemClasses: object;
}

/**
 * @hidden
 */
export declare interface BreadcrumbListItemProps {
    /**
     * Sets the `id` property of the top `div` element of the BreadcrumbListItem.
     */
    id?: string;
    /**
     * @hidden
     */
    isFirstItem: boolean;
    /**
     * @hidden
     */
    isLastItem: boolean;
}

/**
 * @hidden
 */
export declare const BreadcrumbOrderedList: DefineComponent<ExtractPropTypes<    {
rootItem: PropType<boolean>;
id: PropType<string>;
dir: PropType<string>;
tabIndex: PropType<number>;
disabled: PropType<boolean>;
collapseMode: {
type: PropType<"none" | "auto" | "wrap">;
validator: (value: string) => any;
};
}>, {}, {}, {
itemClasses(): BreadcrumbOrderedListComputed['itemClasses'];
}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
rootItem: PropType<boolean>;
id: PropType<string>;
dir: PropType<string>;
tabIndex: PropType<number>;
disabled: PropType<boolean>;
collapseMode: {
type: PropType<"none" | "auto" | "wrap">;
validator: (value: string) => any;
};
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface BreadcrumbOrderedListComputed {
    [key: string]: any;
    itemClasses: object;
}

/**
 * @hidden
 */
export declare interface BreadcrumbOrderedListProps {
    /**
     * Sets the `id` property of the top `div` element of the BreadcrumbOrderedList.
     */
    id?: string;
    /**
     * Sets the `tabIndex` attribute to the BreadcrumbOrderedList.
     */
    tabIndex?: number;
    /**
     * The BreadcrumbOrderedList direction `ltr` or `rtl`.
     */
    dir?: string;
    /**
     * Sets the Collapse mode of the Breadcrumb.
     * The available values are:
     * - `auto`(default)&mdash;Items are automatically collapsed based on the width of the Breadcrumb. First and last item always remain visible.
     * - `wrap`&mdash;Items are wrapped on multiple rows when their total width is bigger than the width of the BreadCrumb.
     * - `none`&mdash;All items are expanded on the same row. This scenario is useful when the Breadcrumb needs to be scrolled.
     *
     * For more information and example refer to the [Collapse Modes]({% slug collapse_modes_breadcrumb %}) article.
     */
    collapseMode?: 'auto' | 'wrap' | 'none';
    /**
     * Determines the `disabled` mode of the BreadcrumbOrderedList. If `true`, the component is disabled.
     */
    disabled?: boolean;
    /**
     * @hidden
     */
    rootItem?: boolean;
}

export declare interface BreadcrumbProps {
    /**
     * Sets the `id` property of the top `div` element of the Breadcrumb.
     */
    id?: string;
    /**
     * Represents the Breadcrumb ordered list component.
     */
    breadcrumbOrderedList?: Component<BreadcrumbOrderedListProps>;
    /**
     * Represents the Breadcrumb list item component.
     */
    breadcrumbListItem?: Component<BreadcrumbListItemProps>;
    /**
     * Represents the Breadcrumb delimiter component.
     */
    breadcrumbDelimiter?: Component<BreadcrumbDelimiterProps>;
    /**
     * Represents the Breadcrumb link component.
     */
    breadcrumbLink?: Component<BreadcrumbLinkProps>;
    /**
     * Represents the dataItems of the Breadcrumb from type BreadcrumbDataModel.
     */
    dataItems: BreadcrumbDataModel[];
    /**
     * Specifies the padding of all Breadcrumb elements.
     *
     * The possible values are:
     * * `small`
     * * `medium`
     * * `large`
     *
     * @default `medium`
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * The Breadcrumb direction `ltr` or `rtl`.
     */
    dir?: 'ltr' | 'rtl';
    /**
     * Sets the `tabIndex` attribute to the Breadcrumb.
     */
    tabIndex?: number;
    /**
     * Sets the Collapse mode of the Breadcrumb.
     * The available values are:
     * - `auto`(default)&mdash;Items are automatically collapsed based on the width of the Breadcrumb. First and last item always remain visible.
     * - `wrap`&mdash;Items are wrapped on multiple rows when their total width is bigger than the width of the BreadCrumb.
     * - `none`&mdash;All items are expanded on the same row. This scenario is useful when the Breadcrumb needs to be scrolled.
     *
     * For more information and example refer to the [Collapse Modes]({% slug collapse_modes_breadcrumb %}) article.
     */
    collapseMode?: 'auto' | 'wrap' | 'none';
    /**
     * Determines the `disabled` mode of the Breadcrumb. If `true`, the component is disabled.
     */
    disabled?: boolean;
    /**
     * Represents the `value` field. Used for setting the key of the BreadcrumbListItem component and the `id` of the BreadcrumbLink component.
     */
    valueField?: string;
    /**
     * Represents the `text` field. Used for setting the `text` inside the BreadcrumbLink component.
     */
    textField?: string;
    /**
     * Represents the `svgIcon` field. Used for setting the `svgIcon` inside the BreadcrumbLink component.
     */
    svgIconField?: string;
    /**
     * Represents the `icon` field. Used for setting the `icon` inside the BreadcrumbLink component.
     */
    iconField?: string;
    /**
     * Represents the `onSelect` event. Triggered after click on the Breadcrumb.
     */
    onSelect?: (event: BreadcrumbLinkMouseEvent) => void;
    /**
     * Triggered on onKeydown event.
     */
    onKeydown?: (event: any) => void;
    /**
     * Represents the label of the Breadcrumb component.
     */
    ariaLabel?: string;
}

/**
 * @hidden
 */
export declare const Card: DefineComponent<ExtractPropTypes<    {
dir: PropType<string>;
type: {
type: PropType<string>;
default: cardType;
validator: (value: string) => any;
};
orientation: {
type: PropType<string>;
default: cardOrientation;
validator: (value: string) => any;
};
}>, {}, {}, {
wrapperClass(): CardComputed['wrapperClass'];
}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
dir: PropType<string>;
type: {
type: PropType<string>;
default: cardType;
validator: (value: string) => any;
};
orientation: {
type: PropType<string>;
default: cardOrientation;
validator: (value: string) => any;
};
}>> & Readonly<{}>, {
type: string;
orientation: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare const CardActions: DefineComponent<ExtractPropTypes<    {
layout: {
type: PropType<string>;
default: cardActionsLayout;
validator: (value: string) => any;
};
orientation: {
type: PropType<string>;
default: cardOrientation;
validator: (value: string) => any;
};
}>, {}, {}, {
wrapperClass(): {
[x: string]: boolean;
'k-card-actions': boolean;
'k-actions': boolean;
};
}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
layout: {
type: PropType<string>;
default: cardActionsLayout;
validator: (value: string) => any;
};
orientation: {
type: PropType<string>;
default: cardOrientation;
validator: (value: string) => any;
};
}>> & Readonly<{}>, {
orientation: string;
layout: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface CardActionsComputed {
    [key: string]: any;
    wrapperClass: object;
}

declare enum cardActionsLayout {
    START = "start",
    CENTER = "center",
    END = "end",
    STRETCHED = "stretched"
}

/**
 * @hidden
 */
export declare const CardBody: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface CardComputed {
    [key: string]: any;
    wrapperClass: object;
}

/**
 * @hidden
 */
export declare const CardFooter: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare const CardHeader: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare const CardImage: DefineComponent<ExtractPropTypes<    {
src: PropType<string>;
}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
src: PropType<string>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

declare enum cardOrientation {
    HORIZONTAL = "horizontal",
    VERTICAL = "vertical"
}

/**
 * @hidden
 */
export declare const CardSubtitle: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare const CardTitle: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

declare enum cardType {
    DEFAULT = "default",
    primary = "primary",
    INFO = "info",
    SUCCESS = "success",
    WARNING = "warning",
    ERROR = "error"
}

/**
 * @hidden
 */
export declare const downArrowIcon: SVGIcon_2;

/**
 * @hidden
 */
export declare const Drawer: DefineComponent<ExtractPropTypes<    {
animation: {
type: PropType<boolean | DrawerAnimation_2>;
default: boolean;
};
expanded: {
type: PropType<boolean>;
default: boolean;
};
dir: {
type: StringConstructor;
default: string;
};
item: PropType<any>;
navigationHeader: PropType<Object | Function | String>;
navigationFooter: PropType<Object | Function | String>;
navigationContent: PropType<Object | Function | String>;
mode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
position: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
items: {
type: PropType<DrawerItemProps_2[]>;
default: any[];
};
mini: {
type: PropType<boolean>;
default: boolean;
};
tabIndex: PropType<number>;
width: {
type: PropType<number>;
default: number;
};
miniWidth: {
type: PropType<number>;
default: number;
};
}>, {}, {
currentDir: string;
drawer: {
expanded: boolean;
mode: string;
dir: Function;
position: string;
animation: boolean | DrawerAnimation_2;
mini: boolean;
width: number;
miniWidth: number;
items: DrawerItemProps_2[];
item: any;
};
showLicenseWatermark: boolean;
}, {
drawerClassNames(): DrawerComputed['drawerClassNames'];
}, {
focus(): void;
handleSelect(itemTarget: any, itemIndex: number): void;
onOverlayClick(e: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
select: any;
overlayclick: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
animation: {
type: PropType<boolean | DrawerAnimation_2>;
default: boolean;
};
expanded: {
type: PropType<boolean>;
default: boolean;
};
dir: {
type: StringConstructor;
default: string;
};
item: PropType<any>;
navigationHeader: PropType<Object | Function | String>;
navigationFooter: PropType<Object | Function | String>;
navigationContent: PropType<Object | Function | String>;
mode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
position: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
items: {
type: PropType<DrawerItemProps_2[]>;
default: any[];
};
mini: {
type: PropType<boolean>;
default: boolean;
};
tabIndex: PropType<number>;
width: {
type: PropType<number>;
default: number;
};
miniWidth: {
type: PropType<number>;
default: number;
};
}>> & Readonly<{
onSelect?: (...args: any[] | unknown[]) => any;
onOverlayclick?: (...args: any[] | unknown[]) => any;
}>, {
mode: string;
animation: boolean | DrawerAnimation_2;
dir: string;
expanded: boolean;
mini: boolean;
position: string;
width: number;
miniWidth: number;
items: DrawerItemProps_2[];
}, {}, {}, {}, string, () => {
kendoDrawer: any;
}, true, {}, any>;

/**
 * Specifies the animation settings of the Drawer.
 *
 */
export declare interface DrawerAnimation {
    /**
     * Specifies the type of the Drawer animation.
     */
    type?: 'slide';
    /**
     * Specifies the duration of the Drawer animation ([see example]({% slug display_modes_drawer %}#toc-expand-modes)) .
     */
    duration: number;
}

/**
 * @hidden
 */
export declare interface DrawerComputed {
    drawerClassNames: object;
}

/**
 * @hidden
 */
export declare const DrawerContent: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * The properties of the [Kendo UI for Vue DrawerContent component]({% slug overview_drawer %}).
 */
export declare interface DrawerContentProps {
}

/**
 * @hidden
 */
export declare const DrawerItem: DefineComponent<ExtractPropTypes<    {
index: PropType<number>;
text: PropType<string>;
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
separator: PropType<boolean>;
selected: PropType<boolean>;
disabled: PropType<boolean>;
targetItem: PropType<any>;
}>, {}, {}, {
itemClassNames(): DrawerItemComputed['itemClassNames'];
}, {
focus(e: any): void;
handleClick(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
click: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
index: PropType<number>;
text: PropType<string>;
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
separator: PropType<boolean>;
selected: PropType<boolean>;
disabled: PropType<boolean>;
targetItem: PropType<any>;
}>> & Readonly<{
onClick?: (...args: any[] | unknown[]) => any;
}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface DrawerItemComputed {
    itemClassNames: object;
}

/**
 * The DrawerItem ref.
 */
export declare interface DrawerItemHandle {
    /**
     * The DrawerItem element.
     */
    element: any;
    /**
     * Focus the DrawerItem.
     */
    focus: (e: any) => void;
    /**
     * The props of the DrawerItem.
     */
    props?: any;
}

/**
 * An interface for the Drawer items.
 */
export declare interface DrawerItemProps {
    /**
     * Specifies if the Drawer item is disabled.
     */
    disabled?: boolean;
    /**
     * Defines the name for an existing icon in a Kendo UI for Vue theme.
     * The icon is rendered inside the Drawer item by a `span.k-icon` element.
     */
    icon?: string;
    /**
     * Defines an SVGIcon to be rendered within the Drawer item.
     */
    svgIcon?: SVGIcon;
    /**
     * Specifies if the Drawer item is initially selected.
     */
    selected?: boolean;
    /**
     * Specifies if this is a separator item.
     */
    separator?: boolean;
    /**
     * Specifies the text content of the Drawer item.
     */
    text?: string;
    /**
     * Sets the index of the DrawerItem that is used to identify it.
     */
    index?: number;
    /**
     * Sets the `tabIndex` property of the DrawerItem.
     * Defaults to `0`.
     */
    tabIndex?: number;
    /**
     * Sets a custom property. Contained in the DrawerItem props that are returned from the `onSelect` Drawer event.
     */
    [customProp: string]: any;
    /**
     * @hidden
     */
    onSelect?(target?: any, idx?: number): void;
}

/**
 * @hidden
 */
export declare const DrawerNavigation: DefineComponent<ExtractPropTypes<    {
item: PropType<any>;
header: PropType<any>;
footer: PropType<any>;
content: PropType<any>;
tabIndex: PropType<number>;
showLicenseWatermark: PropType<boolean>;
onSelect: PropType<(event: DrawerSelectEvent_2) => void>;
}>, {}, {}, {
navigationClassNames(): DrawerNavigationComputed['navigationClassNames'];
}, {
focus(e: any): void;
onDrawerItemSelect(e: any, index: number): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
item: PropType<any>;
header: PropType<any>;
footer: PropType<any>;
content: PropType<any>;
tabIndex: PropType<number>;
showLicenseWatermark: PropType<boolean>;
onSelect: PropType<(event: DrawerSelectEvent_2) => void>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface DrawerNavigationComputed {
    navigationClassNames: object;
}

/**
 * @hidden
 */
export declare interface DrawerNavigationProps {
    item?: any;
    header?: any;
    footer?: any;
    content?: any;
    showLicenseWatermark?: boolean;
    tabIndex?: number;
    onSelect?: (event: DrawerSelectEvent) => void;
}

/**
 * @hidden
 */
export declare interface DrawerNavigationState {
}

/**
 * The properties of the [Kendo UI for Vue Drawer component]({% slug overview_drawer %}).
 */
export declare 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;
}

/**
 * The arguments for the `onSelect` Drawer event.
 */
export declare interface DrawerSelectEvent {
    /**
     * A Drawer item event target.
     */
    itemTarget: any;
    /**
     * The index of the selected Drawer item.
     */
    itemIndex: number;
}

/**
 * @hidden
 */
export declare const ExpansionPanel: DefineComponent<ExtractPropTypes<    {
dir: StringConstructor;
id: StringConstructor;
tabIndex: NumberConstructor;
title: StringConstructor;
subtitle: StringConstructor;
titleRender: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
subtitleRender: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
expandIcon: StringConstructor;
expandSvgIcon: ObjectConstructor;
collapseIcon: StringConstructor;
collapseSvgIcon: ObjectConstructor;
expanded: BooleanConstructor;
disabled: BooleanConstructor;
}>, {}, {
focused: boolean;
}, {
wrapperClass(): {
'k-expander': boolean;
'k-expanded': any;
'k-focus': boolean;
'k-disabled': any;
};
expandIconName(): string;
expandSVGIcon(): any;
}, {
onClick(event: any): void;
onKeyDown(event: any): void;
handleFocus(): void;
handleBlur(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
dir: StringConstructor;
id: StringConstructor;
tabIndex: NumberConstructor;
title: StringConstructor;
subtitle: StringConstructor;
titleRender: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
subtitleRender: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
expandIcon: StringConstructor;
expandSvgIcon: ObjectConstructor;
collapseIcon: StringConstructor;
collapseSvgIcon: ObjectConstructor;
expanded: BooleanConstructor;
disabled: BooleanConstructor;
}>> & Readonly<{}>, {
disabled: boolean;
expanded: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * The arguments for the `onAction` ExpansionPanel event.
 */
export declare interface ExpansionPanelActionEvent {
    /**
     * Represents the `expanded` state of the ExpansionPanel.
     */
    expanded: boolean;
}

/**
 * @hidden
 */
export declare const ExpansionPanelContent: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * The ExpansionPanel ref.
 */
export declare interface ExpansionPanelHandle {
    /**
     * The ExpansionPanel element.
     */
    element: HTMLDivElement | null;
}

/**
 * The props of the ExpansionPanel component.
 */
export declare interface ExpansionPanelProps {
    /**
     * Sets additional CSS classes to the ExpansionPanel.
     */
    class?: string;
    /**
     * Sets the `id` property of the root ExpansionPanel element.
     */
    id?: string;
    /**
     * Specifies the primary text in the header of the ExpansionPanel.
     */
    title?: string;
    /**
     * Specifies the secondary text in the header of the ExpansionPanel, which is rendered next to the collapse/expand icon.
     */
    subtitle?: string;
    /**
     * Specifies the primary text template in the header of the ExpansionPanel.
     */
    titleRender?: any;
    /**
     * Specifies the secondary text in the header of the ExpansionPanel, which is rendered next to the collapse/expand icon.
     */
    subtitleRender?: any;
    /**
     * Sets a custom icon via css class(es), for the expanded state of the ExpansionPanel.
     */
    expandIcon?: string;
    /**
     * Defines an SVGIcon to be rendered within the expand arrow.
     */
    expandSvgIcon?: SVGIcon;
    /**
     * Sets a custom icon via css class(es), for the collapsed state of the ExpansionPanel.
     */
    collapseIcon?: string;
    /**
     * Defines an SVGIcon to be rendered within the collapse arrow.
     */
    collapseSvgIcon?: SVGIcon;
    /**
     * Sets the `dir` property of the ExpansionPanel.
     */
    dir?: string;
    /**
     * Sets the `tabIndex` property of the ExpansionPanel.
     */
    tabIndex?: number;
    /**
     * Sets the `expanded` state of the ExpansionPanel.
     */
    expanded?: boolean;
    /**
     * Sets the `disabled` state of the ExpansionPanel.
     */
    disabled?: boolean;
    /**
     * Sets `aria-controls`. The value should represent the `id` of the controlled content element.
     */
    ariaControls?: string;
    /**
     * The event handler that will be fired when the expanded state of the ExpansionPanel is about to change.
     */
    onAction?: (event: ExpansionPanelActionEvent) => void;
}

/**
 * @hidden
 */
export declare function flatChildren(children: any, flattenChildren?: any[]): any[];

/**
 * @hidden
 */
export declare function flatVisibleChildren(children: any, flattenVisibleChildren?: any[]): any[];

/**
 * @hidden
 */
export declare function flatVisibleItems(data: any, flattedItems?: any[]): any[];

/**
 * @hidden
 */
export declare const getFirstId: (props: any) => any;

/**
 * @hidden
 */
export declare const getInitialState: (props: any, expandMode: PanelBarExpandMode, result?: PanelBarData, parentExpanded?: boolean, parentPrivateKey?: string[]) => PanelBarData;

/**
 * @hidden
 */
export declare const GridLayout: DefineComponent<ExtractPropTypes<    {
id: PropType<string>;
gap: {
type: PropType<GridLayoutGap_2>;
};
align: {
type: PropType<any>;
validator: (value: GridLayoutAlign) => any;
};
rows: PropType<GridLayoutRowProps_2[]>;
cols: PropType<GridLayoutColumnProps_2[]>;
items: PropType<GridLayoutItemProps[]>;
}>, {}, {}, {
hAlign(): any;
vAlign(): any;
gridLayoutClasses(): {
'k-grid-layout': boolean;
'k-justify-items-start': boolean;
'k-justify-items-center': boolean;
'k-justify-items-end': boolean;
'k-justify-items-stretch': boolean;
'k-align-items-start': boolean;
'k-align-items-center': boolean;
'k-align-items-end': boolean;
'k-align-items-stretch': boolean;
};
gapStyle(): string;
gridTemplateRowsStyle(): any;
gridTemplateColumnsStyle(): any;
gridLayoutStyles(): {
gap: any;
gridTemplateColumns: any;
gridTemplateRows: any;
};
}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
id: PropType<string>;
gap: {
type: PropType<GridLayoutGap_2>;
};
align: {
type: PropType<any>;
validator: (value: GridLayoutAlign) => any;
};
rows: PropType<GridLayoutRowProps_2[]>;
cols: PropType<GridLayoutColumnProps_2[]>;
items: PropType<GridLayoutItemProps[]>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * Specifies the horizontal and vertical alignment of the inner GridLayout elements.
 */
export declare interface GridLayoutAlign {
    /**
     * Defines the possible horizontal alignment of the inner GridLayout elements.
     *
     * The available values are:
     * - `start`&mdash;Uses the start point of the container.
     * - `center`&mdash;Uses the center point of the container.
     * - `end`&mdash;Uses the end point of the container.
     * - (Default)`stretch`&mdash;Stretches the items to fill the width of the container.
     */
    horizontal?: 'start' | 'center' | 'end' | 'stretch';
    /**
     * Defines the possible vertical alignment of the inner GridLayout elements.
     *
     * The available values are:
     * - `top`&mdash;Uses the top point of the container.
     * - `middle`&mdash;Uses the middle point of the container.
     * - `bottom`&mdash;Uses the bottom point of the container.
     * - (Default)`stretch`&mdash;Stretches the items to fill the height of the container.
     */
    vertical?: 'top' | 'middle' | 'bottom' | 'stretch';
}

/**
 * Represents the props of the [Kendo UI for Vue GridLayout column]({% slug overview_gridlayout %}).
 */
export declare interface GridLayoutColumnProps {
    /**
     * Specifies the width of the GridLayout
     * column ([see example]({% slug overview_gridlayout %})).
     */
    width?: number | string;
}

/**
 * Specifies the gaps between the elements.
 */
export declare interface GridLayoutGap {
    /**
     * Represents the row gap between the elements
     */
    rows?: number | string;
    /**
     * Represents the column gap between the elements
     */
    cols?: number | string;
}

/**
 * @hidden
 */
export declare const GridLayoutItem: DefineComponent<ExtractPropTypes<    {
content: PropType<any>;
id: PropType<string>;
col: PropType<number>;
colSpan: PropType<number>;
row: PropType<number>;
rowSpan: PropType<number>;
}>, {}, {}, {
gridLayoutItemStyles(): {
gridArea: string;
};
}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
content: PropType<any>;
id: PropType<string>;
col: PropType<number>;
colSpan: PropType<number>;
row: PropType<number>;
rowSpan: PropType<number>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * Represents the props of the [Kendo UI for Vue GridLayoutItem component]({% slug overview_gridlayout %}).
 */
export declare interface GridLayoutItemProps {
    /**
     * Sets additional CSS classes to the GridLayoutItem.
     */
    class?: string;
    /**
     * Sets additional CSS styles to the GridLayoutItem.
     */
    style?: any;
    /**
     * Sets the `id` property of the root GridLayoutItem element.
     */
    id?: string;
    /**
     * Defines the column line from which the element will start ([see example]({% slug items_gridlayout %}#toc-items)).
     */
    col?: number;
    /**
     * Specifies the number of columns over which the element will span ([see example]({% slug items_gridlayout %}#toc-items)).
     * Defaults to `1`.
     */
    colSpan?: number;
    /**
     * Defines the row line from which the element will start ([see example]({% slug items_gridlayout %}#toc-items)).
     */
    row?: number;
    /**
     * Specifies the number of rows over which the element will span ([see example]({% slug items_gridlayout %}#toc-items)).
     * Defaults to `1`.
     */
    rowSpan?: number;
    /**
     * Sets the content of the GridLayoutItem.
     */
    content?: any;
}

/**
 * Represents the props of the [Kendo UI for Vue GridLayout component]({% slug overview_gridlayout %}).
 */
export declare interface GridLayoutProps {
    /**
     * Sets additional CSS classes to the GridLayout.
     */
    className?: string;
    /**
     * Sets additional CSS styles to the GridLayout.
     */
    style?: any;
    /**
     * Sets the `id` property of the root GridLayout element.
     */
    id?: string;
    /**
     * Specifies the gaps between the elements ([see example]({% slug layout_gridlayout_gaps %})).
     *
     * * The possible keys are:
     * * `rows`
     * * `columns`
     */
    gap?: GridLayoutGap;
    /**
     * Specifies the horizontal and vertical alignment of the inner GridLayout elements (see demos
     * [here]({% slug layout_gridlayout_alignment %}#toc-horizontal-alignment) and [here]({% slug layout_gridlayout_alignment %}#toc-vertical-alignment)).
     *
     * The possible keys are:
     * * `horizontal`&mdash;Defines the possible horizontal alignment of the inner GridLayout elements.
     *   * `start`&mdash;Uses the start point of the container.
     *   * `center`&mdash;Uses the central point of the container.
     *   * `end`&mdash;Uses the end point of the container.
     *   * (Default)`stretch`&mdash;Stretches the items to fill the width of the container.
     * * `vertical`&mdash; Defines the possible vertical alignment of the inner GridLayout elements.
     *   * `top`&mdash;Uses the top point of the container.
     *   * `middle`&mdash;Uses the middle point of the container.
     *   * `bottom`&mdash;Uses the bottom point of the container.
     *   * (Default)`stretch`&mdash;Stretches the items to fill the height of the container.
     */
    align?: GridLayoutAlign | any;
    /**
     * Specifies the default number of columns and their widths ([see example]({% slug layout_gridlayout_rowscolumns %})).
     */
    cols?: GridLayoutColumnProps[];
    /**
     * Specifies the default number of rows and their height ([see example]({% slug layout_gridlayout_rowscolumns %})).
     */
    rows?: GridLayoutRowProps[];
    /**
     * The collection of GridLayoutItemProps.
     */
    items?: GridLayoutItemProps[];
}

/**
 * Represents the props of the [Kendo UI for Vue GridLayout row]({% slug overview_gridlayout %}).
 */
export declare interface GridLayoutRowProps {
    /**
     * Specifies the height of the GridLayout
     * row ([see example]({% slug overview_gridlayout %})).
     */
    height?: number | string;
}

/**
 * @hidden
 */
export declare const isArrayEqual: (firstArray: any[], secondArray: any[]) => boolean;

/**
 * @hidden
 */
export declare const isPresent: Function;

/**
 * @hidden
 */
export declare const leftArrowIcon: SVGIcon_2;

/**
 *
 * Represents the [Kendo UI for Vue Menu component]({% slug overview_menu %}).
 *
 *
 * ### props <span class='code'>Readonly&lt;[MenuProps]({% slug api_layout_menuprops %})&gt;</span>
 * The props of the Menu component.
 *
 */
export declare const Menu: DefineComponent<ExtractPropTypes<    {
vertical: {
type: PropType<boolean>;
default: boolean;
};
items: PropType<MenuItemModel_2[]>;
dir: PropType<string>;
hoverOpenDelay: {
type: PropType<number>;
default: any;
};
hoverCloseDelay: {
type: PropType<number>;
default: any;
};
openOnClick: PropType<boolean>;
itemRender: PropType<any>;
linkRender: PropType<any>;
customCloseItemIds: ArrayConstructor;
}>, {}, {
focusedItemId: string;
hoveredItemId: string;
tabbableItemId: string;
isFirstRender: boolean;
}, {
menuClassName(): MenuComputed['menuClassName'];
}, {
reset(): void;
onKeyDown(event: any): void;
onItemMouseOver(itemId: string): void;
onItemMouseLeave(itemId: string): void;
onItemMouseDown(): void;
onItemFocus(itemId: string): void;
onItemClick(event: any, itemId: string): void;
onItemBlur(itemId: string): void;
getInputItem(itemId: string): void;
setFocusedItemId(focusedItemId: string): void;
setHoveredItemId(hoveredItemId: string): void;
getMenuWrapperClassName(): object;
clearItemHoverAndLeaveRequestsIfApplicable(): void;
isItemWithDefaultClose(itemId: string): boolean;
checkIsDirectionRightToLeft(): any;
prepareItems(): void;
dispatchSelectEventIfWired(event: any, itemId: string): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
vertical: {
type: PropType<boolean>;
default: boolean;
};
items: PropType<MenuItemModel_2[]>;
dir: PropType<string>;
hoverOpenDelay: {
type: PropType<number>;
default: any;
};
hoverCloseDelay: {
type: PropType<number>;
default: any;
};
openOnClick: PropType<boolean>;
itemRender: PropType<any>;
linkRender: PropType<any>;
customCloseItemIds: ArrayConstructor;
}>> & Readonly<{}>, {
vertical: boolean;
hoverOpenDelay: number;
hoverCloseDelay: number;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface MenuComputed {
    menuClassName: object;
}

/**
 * @hidden
 */
export declare const MenuItemArrow: DefineComponent<ExtractPropTypes<    {
itemId: PropType<string>;
dir: PropType<string>;
verticalMenu: PropType<boolean>;
}>, {}, {}, {}, {
getArrowName(): "" | SVGIcon_2;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
itemId: PropType<string>;
dir: PropType<string>;
verticalMenu: PropType<boolean>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * The properties of the Kendo UI for Vue MenuItemArrow component.
 */
export declare interface MenuItemArrowProps {
    /**
     * Sets the item id of the MenuItemArrow component.
     */
    itemId: string;
    /**
     * Sets the direction of the MenuItemArrow component.
     */
    dir: 'ltr' | 'rtl' | string;
    /**
     * Specifies whether the Menu which holds the MenuItemArrow component is vertical.
     */
    verticalMenu?: boolean;
}

/**
 * @hidden
 */
export declare interface MenuItemInternalModel extends BaseMenuItem {
    id: string;
    items: MenuItemInternalModel[];
    contentParentItemId?: string;
    isLastFromSiblings: boolean;
}

/**
 * @hidden
 */
export declare const MenuItemLink: DefineComponent<ExtractPropTypes<    {
opened: BooleanConstructor;
focused: BooleanConstructor;
url: StringConstructor;
}>, {}, {}, {
menuItemClassName(): {
'k-link': boolean;
'k-menu-link': boolean;
'k-active': any;
'k-focus': any;
};
}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
opened: BooleanConstructor;
focused: BooleanConstructor;
url: StringConstructor;
}>> & Readonly<{}>, {
focused: boolean;
opened: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface MenuItemLinkComputed {
    menuItemClassName: object;
}

/**
 * The properties of the Kendo UI for Vue MenuItemLink component.
 */
export declare interface MenuItemLinkProps {
    /**
     * Specifies whether the MenuItemLink component is opened.
     */
    opened: boolean;
    /**
     * Specifies whether the MenuItemLink component is focused.
     */
    focused: boolean;
    /**
     * Sets the URL of the MenuItemLink component.
     */
    url?: string;
}

/**
 * The interface for describing items that can be passed to the `items` property of the Menu as an alternative to passing them as children.
 */
export declare interface MenuItemModel extends BaseMenuItem {
    /**
     * Specifies the children of the item.
     */
    items?: MenuItemModel[];
}

/**
 * @hidden
 */
export declare interface MenuMethods {
    [key: string]: any;
    reset: () => void;
    onKeyDown: (event: any) => void;
    onItemMouseOver: (itemId: string) => void;
    onItemMouseLeave: (itemId: string) => void;
    onItemMouseDown: () => void;
    onItemFocus: (itemId: string) => void;
    onItemClick: (event: any, itemId: string) => void;
    onItemBlur: (itemId: string) => void;
    getInputItem: (itemId: string) => void;
    setFocusedItemId: (focusedItemId: string) => void;
    setHoveredItemId: (hoveredItemId: string) => void;
    getMenuWrapperClassName: () => object;
    clearItemHoverAndLeaveRequestsIfApplicable: () => void;
    isItemWithDefaultClose: (itemId: string) => boolean;
    checkIsDirectionRightToLeft: () => any;
    prepareItems: () => void;
    dispatchSelectEventIfWired: (event: any, itemId: string) => void;
}

/**
 * The arguments for the `select` event of the Menu. If the item has a URL and the event is prevented, navigation to the URL does not occur.
 */
export declare interface MenuSelectEvent {
    /**
     * The id of selected item. The ids are hierarchical and zero-based. The first root item has a `0` id. If the first root item has children, the first child acquires a `0_0` id and the second acquires a `0_1` id.
     */
    itemId: string;
    /**
     * The selected item.
     */
    item: MenuItemModel;
}

/**
 * @hidden
 */
declare enum NavigationAction {
    Toggle = 0,
    Next = 1,
    Previous = 2
}

/**
 *
 * ### props <span class='code'>[PanelBarProps]({% slug api_layout_panelbarprops %})</span>
 * The props of the PanelBar component.
 */
export declare const PanelBar: DefineComponent<ExtractPropTypes<    {
animation: {
type: PropType<boolean>;
default: boolean;
};
items: PropType<any[]>;
dir: PropType<string>;
selected: PropType<string | number>;
expanded: {
type: PropType<string[]>;
default: any;
};
focused: PropType<string | number>;
expandMode: {
type: PropType<PanelBarExpandMode_2>;
default: string;
validator: (value: string) => boolean;
};
className: PropType<string>;
keepItemsMounted: PropType<boolean>;
}>, {}, PanelBarData, {
selectedItem(): any;
expandedItems(): any;
computedItems(): any;
}, {
handleSelect(event: PanelBarItemClickEventArguments): void;
onSelect(event: any): void;
onFocus(event: any, step?: number): void;
onNavigate(event: any, action: NavigationAction): void;
handleWrapperFocus(): void;
handleWrapperBlur(): void;
handleKeyDown(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
select: any;
keydown: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
animation: {
type: PropType<boolean>;
default: boolean;
};
items: PropType<any[]>;
dir: PropType<string>;
selected: PropType<string | number>;
expanded: {
type: PropType<string[]>;
default: any;
};
focused: PropType<string | number>;
expandMode: {
type: PropType<PanelBarExpandMode_2>;
default: string;
validator: (value: string) => boolean;
};
className: PropType<string>;
keepItemsMounted: PropType<boolean>;
}>> & Readonly<{
onSelect?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
}>, {
animation: boolean;
expanded: string[];
expandMode: PanelBarExpandMode_2;
}, {}, {}, {}, string, () => {
dispatchItemSelect: any;
}, true, {}, any>;

export declare interface PanelBarData {
    currentFocused?: string;
    wrapperFocused?: boolean;
    currentSelected?: string;
    currentExpanded: string[];
}

/**
 * Represents the expand modes of the Kendo UI for Vue PanelBar. Defaults to `multiple`.
 */
export declare type PanelBarExpandMode = 'single' | 'multiple';

/**
 * @hidden
 */
export declare interface PanelBarGroupData {
    show: boolean;
}

/**
 * @hidden
 */
export declare interface PanelBarGroupProps {
    item?: object;
    items?: any[];
    animation?: boolean;
    expanded?: boolean;
    disabled?: boolean;
    content?: any;
    keepItemsMounted?: boolean;
    uniquePrivateKey?: string | number;
}

/**
 * @hidden
 */
export declare const PanelBarItem: DefineComponent<ExtractPropTypes<    {
item: PropType<any>;
items: PropType<any[]>;
animation: PropType<boolean>;
expanded: PropType<boolean>;
disabled: PropType<boolean>;
selected: PropType<boolean>;
level: PropType<number>;
title: {
type: PropType<any>;
default: () => string;
};
id: PropType<string | number>;
focused: PropType<boolean>;
keepItemsMounted: PropType<boolean>;
uniquePrivateKey: PropType<string | number>;
parentUniquePrivateKey: PropType<string[]>;
parentExpanded: PropType<boolean>;
headerClassName: PropType<string>;
iconClass: PropType<string>;
imageUrl: PropType<string>;
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
content: PropType<any>;
header: PropType<any>;
}>, {}, {}, {}, {
handleItemClick(): void;
childFactory(child: any): any;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
item: PropType<any>;
items: PropType<any[]>;
animation: PropType<boolean>;
expanded: PropType<boolean>;
disabled: PropType<boolean>;
selected: PropType<boolean>;
level: PropType<number>;
title: {
type: PropType<any>;
default: () => string;
};
id: PropType<string | number>;
focused: PropType<boolean>;
keepItemsMounted: PropType<boolean>;
uniquePrivateKey: PropType<string | number>;
parentUniquePrivateKey: PropType<string[]>;
parentExpanded: PropType<boolean>;
headerClassName: PropType<string>;
iconClass: PropType<string>;
imageUrl: PropType<string>;
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
content: PropType<any>;
header: PropType<any>;
}>> & Readonly<{}>, {
title: any;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
declare interface PanelBarItemClickEventArguments {
    uniquePrivateKey: number;
    target: any;
}

/**
 * Represents the props of the PanelBarItem component.
 */
export declare interface PanelBarItemProps {
    /**
     * Sets the subitems of the item.
     */
    items?: any[];
    /**
     * Allows individual animation control over the child ([see example]({% slug animations_panelbar %})). By default, it is controlled by the PanelBar component.
     */
    animation?: boolean;
    /**
     * The class name that is set to the PanelBarItem header.
     */
    headerClassName?: string;
    /**
     * Sets the initial expanded state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-expanded-items)). Controlled by the PanelBar component.
     */
    expanded?: boolean;
    /**
     * Sets the disabled state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-disabled-items)).
     */
    disabled?: boolean;
    /**
     * @hidden
     */
    level?: number;
    /**
     * Defines an icon that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
     */
    icon?: string;
    /**
     * Defines an SVGIcon to be rendered next to the title.
     */
    svgIcon?: SVGIcon;
    /**
     * Defines an icon with a custom CSS class that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
     */
    iconClass?: string;
    /**
     * Defines the location of the image that will be displayed next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-images)).
     */
    imageUrl?: string;
    /**
     * Sets the initial selected state of the PanelBarItem. Controlled by the PanelBarItem component ([see example]({% slug statesitems_panelbar %}#toc-selected-items)).
     */
    selected?: boolean;
    /**
     * Sets the title of the PanelBar item ([see example]({% slug titlesitems_panelbar %}#toc-getting-started)).
     */
    title?: any;
    /**
     * Allows the component to set the `id` property to each item. If not set, a default `id` is applied.
     */
    id?: string | number;
    /**
     * Sets the initial focused state of the PanelBarItem. Controlled by the PanelBar component.
     */
    focused?: boolean;
    /**
     * @hidden
     */
    parentExpanded?: boolean;
    /**
     *  Defines the custom rendering of the content of the PanelBarItem. Accepts a Vue component, a `render` function, or a slot name.
     */
    content?: any;
    /**
     *  Defines the custom rendering of the header of the PanelBarItem. Accepts a Vue component, a `render` function, or a slot name.
     */
    header?: any;
    /**
     * Used to identify the PanelBarItems inside the PanelBar ([see example]({% slug controlling_state_panelbar %})). Does not depend on the state of the PanelBarItem.
     */
    uniquePrivateKey?: string | number;
    /**
     * @hidden
     */
    parentUniquePrivateKey?: string[];
    /**
     * @hidden
     */
    keepItemsMounted?: boolean;
    /**
     * @hidden
     */
    item?: any;
}

/**
 * Represents the props of the [Kendo UI for Vue PanelBar component]({% slug overview_panelbar %}).
 */
export declare interface PanelBarProps {
    /**
     * The class name that is set to the PanelBar.
     */
    className?: string;
    /**
     * Sets the animation state of the PanelBar.
     */
    animation?: boolean;
    /**
     * Sets the items of the PanelBar.
     */
    items?: any[];
    /**
     * Sets the expand mode of the PanelBar ([see example]({% slug expandmodes_panelbar %})).
     *
     * The available modes are:
     * - `"single"`&mdash;Allows you to expand only one item at a time. The expanding of an item collapses the item that was previously expanded.
     * - `"multiple"` (default)&mdash;Allows you to expand two or more items at a time. Items can also be toggled.
     */
    expandMode?: PanelBarExpandMode;
    /**
     * Sets the direction of the PanelBar component.
     */
    dir?: string;
    /**
     * If set, overrides the currently selected property in the PanelBar state.
     */
    selected?: string | number;
    /**
     * Sets the initial expanded state of the PanelBar.
     */
    expanded?: string[];
    /**
     * Sets the initial focused state of the PanelBar.
     */
    focused?: string | number;
    /**
     * Determines if the PanelBar items will be mounted after expand collapse. Defaults to `false`.
     */
    keepItemsMounted?: boolean;
    /**
     * Determines if the PanelBar is going to be used in controlled state.
     */
    isControlled?: boolean;
    /**
     * Fires each time the user makes a selection ([see example]({% slug controlling_state_panelbar %})).
     */
    onSelect?: (event: PanelBarSelectEventArguments) => void;
}

/**
 * The arguments that are passed to the `onSelect` callback function.
 */
export declare interface PanelBarSelectEventArguments {
    /**
     * The selected PanelBar item.
     */
    target: any;
    /**
     * The new expanded PanelBar items state.
     */
    expandedItems: string[];
}

/**
 * @hidden
 */
export declare const renderChildren: (this: any, items: any[], { animation, keepItemsMounted, state, expanded, handleSelect, parentExpanded, level, parentPrivateKey }: RenderPanelBarItem) => any;

/**
 * @hidden
 */
export declare interface RenderPanelBarItem {
    animation?: boolean;
    keepItemsMounted?: boolean;
    state: PanelBarData;
    expanded: string[];
    handleSelect: any;
    parentExpanded?: boolean;
    level?: number;
    parentPrivateKey?: string[];
}

/**
 * @hidden
 */
export declare const rightArrowIcon: SVGIcon_2;

/**
 * Represents the [Kendo UI for Vue Native Splitter component]({% slug overview_splitter %}).
 *
 * ```js-no-run
 * <template>
 *   <Splitter
 *     :style="{ height: '340px' }"
 *     :panes="panes"
 *     :orientation="'vertical'"
 *     @change="onChange"
 *   >
 *     <template v-slot:first>
 *       <div class="pane-content">
 *         <h3>Top Pane</h3>
 *       </div>
 *     </template>
 *     <template v-slot:second>
 *       <div class="pane-content">
 *         <h3>Bottom Pane</h3>
 *       </div>
 *     </template>
 *   </Splitter>
 * </template>
 *
 * <script>
 * import { Splitter } from '@progress/kendo-vue-layout';
 * import './styles.css';
 *
 * export default {
 *   components: {
 *     Splitter,
 *   },
 *   data() {
 *     return {
 *       panes: [
 *         { size: '40%', containsSplitter: true, content: 'first' },
 *         { content: 'second' },
 *       ],
 *     };
 *   },
 *   methods: {
 *     onChange(event) {
 *       this.panes = event.newState;
 *     },
 *   },
 * };
 * </script>
 * ```
 *
 *
 *
 * ### props <span class='code'>Readonly&lt;[SplitterProps]({% slug api_layout_splitterprops %})</span>
 * The props of the Splitter component.
 */
export declare const Splitter: DefineComponent<ExtractPropTypes<    {
orientation: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
panes: PropType<SplitterPaneProps[]>;
defaultPanes: PropType<SplitterPaneProps[]>;
}>, {}, {
currentRtl: boolean;
isDragging: boolean;
dragIndex: any;
startTime: number;
originalX: number;
originalY: number;
originalPrevSize: number;
originalNextSize: number;
currentPanes: SplitterPaneProps[];
}, {
isControlledState(): boolean;
computedPanes(): SplitterPaneProps[] | undefined;
}, {
validatePanes(panesOptions: SplitterPaneProps[]): void;
mapPaneOptions(panes: SplitterPaneProps[]): SplitterPaneExtendedProps[];
onBarToggle(index: number, event: any): void;
onBarDragResize(event: any, barElement: HTMLDivElement, index: number, isFirst: boolean, isLast: boolean): void;
onBarKeyboardResize(barElement: HTMLDivElement, index: number, delta: number, event: any): void;
surroudingPanes(barElement: HTMLDivElement): {
prevElement: Element;
nextElement: Element;
};
containerSize(): number;
isPercent(size: string): boolean;
toPixels(size: string, splitterSize: number): number;
panesOptions(): SplitterPaneProps[];
resetDragState(): void;
elementSize(el: HTMLElement, isContainer?: boolean): number;
clamp(min: number, max: number, v: number): number;
fixedSize(size: string | undefined): any;
resize(prevIndex: number, nextIndex: number, originalPrevSize: number, originalNextSize: number, delta: any, isLast: boolean, event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
change: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
orientation: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
panes: PropType<SplitterPaneProps[]>;
defaultPanes: PropType<SplitterPaneProps[]>;
}>> & Readonly<{
onChange?: (...args: any[] | unknown[]) => any;
}>, {
orientation: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface SplitterData {
    isDragging: boolean;
    dragIndex?: number;
    startTime: number;
    originalX: number;
    originalY: number;
    originalPrevSize: number;
    originalNextSize: number;
    currentPanes: SplitterPaneProps[];
}

/**
 * Represents the onChange event of the Splitter.
 */
export declare interface SplitterOnChangeEvent {
    /**
     * The new panes state.
     */
    newState: SplitterPaneProps[];
    /**
     * Indicates if is the last event during drag. Can be used to optimize performance.
     */
    isLast: boolean;
    /**
     * The native DOM event.
     */
    nativeEvent: any;
}

/**
 * @hidden
 */
export declare const SplitterPane: DefineComponent<ExtractPropTypes<    {
orientation: {
type: PropType<string>;
default: () => any;
validator: (value: string) => any;
};
overlay: PropType<boolean>;
containsSplitter: PropType<boolean>;
size: PropType<string>;
min: PropType<string>;
max: PropType<string>;
resizable: PropType<boolean>;
collapsible: PropType<boolean>;
collapsed: PropType<boolean>;
scrollable: PropType<boolean>;
keepMounted: PropType<boolean>;
content: PropType<any>;
}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
orientation: {
type: PropType<string>;
default: () => any;
validator: (value: string) => any;
};
overlay: PropType<boolean>;
containsSplitter: PropType<boolean>;
size: PropType<string>;
min: PropType<string>;
max: PropType<string>;
resizable: PropType<boolean>;
collapsible: PropType<boolean>;
collapsed: PropType<boolean>;
scrollable: PropType<boolean>;
keepMounted: PropType<boolean>;
content: PropType<any>;
}>> & Readonly<{}>, {
orientation: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface SplitterPaneExtendedProps extends SplitterPaneProps {
    orientation: 'vertical' | 'horizontal' | string;
    overlay: boolean;
}

/**
 * Represents the pane options of the Splitter.
 */
export declare interface SplitterPaneProps {
    /**
     * Sets the size of the pane ([see example]({% slug panes_splitter %}#toc-dimensions)). Has to be between the `min` and `max` properties.
     */
    size?: string;
    /**
     * Sets the minimum possible size of the pane ([see example]({% slug panes_splitter %}#toc-dimensions)).
     */
    min?: string;
    /**
     * Sets the maximum possible size of the pane ([see example]({% slug panes_splitter %}#toc-dimensions)).
     */
    max?: string;
    /**
     * Specifies if the user is allowed to resize the pane and provide space for other panes ([see example]({% slug panes_splitter %}#toc-resizing)). If `resizable` is not specified, the resizing of the pane will be enabled.
     */
    resizable?: boolean;
    /**
     * Specifies if the user is allowed to hide the pane and provide space for other panes ([see example]({% slug panes_splitter %}#toc-collapsing)).
     */
    collapsible?: boolean;
    /**
     * Specifies the pane collapsed state ([see example]({% slug panes_splitter %}#toc-collapsing)).
     */
    collapsed?: boolean;
    /**
     * Specifies if overflowing content is scrollable or hidden ([see example]({% slug panes_splitter %}#toc-scrolling)). If `scrollable` is not specified, the content will be scrollable.
     */
    scrollable?: boolean;
    /**
     * Specifies if the content of the pane contains Splitter.
     */
    containsSplitter: boolean;
    /**
     * Specifies if the children of the pane should be mounted when it's in collapsed state.
     */
    keepMounted?: boolean;
    /**
     * The slot template for the content of the splitter
     */
    content?: any;
}

/**
 * Represents the options of the Splitter.
 */
export declare interface SplitterProps {
    /**
     * Sets the options of the Splitter panes ([more information and examples]({% slug panes_splitter %})). Can be used for controlled state.
     */
    panes?: SplitterPaneProps[];
    /**
     * Sets the initial options of the Splitter panes ([more information and examples]({% slug panes_splitter %})). Can be used for uncontrolled state.
     */
    defaultPanes?: SplitterPaneProps[];
    /**
     * Specifies the orientation of the panes within the Splitter ([more information and examples]({% slug orientation_splitter %})). Panes in a horizontal Splitter are placed horizontally. Panes in a vertical Splitter are placed vertically.
     */
    orientation?: 'vertical' | 'horizontal' | string;
    /**
     * Fires after a Splitter pane is resized or collapsed. Useful for updating the pane options and triggering layout calculations on components which are positioned inside the panes.
     */
    onChange?: (event: SplitterOnChangeEvent) => void;
}

/**
 * Represents the [Kendo UI for Vue StackLayout component]({% slug overview_stacklayout %}).
 * Arranges its inner elements horizontally, or vertically in a stack. Nesting stack layouts is supported to build more complex layouts.
 */
export declare const StackLayout: DefineComponent<ExtractPropTypes<    {
id: PropType<string>;
orientation: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
gap: {
type: PropType<string | number>;
};
align: {
type: PropType<StackLayoutAlign>;
validator: (value: StackLayoutAlign) => any;
};
}>, {}, {}, {
hAlign(): any;
vAlign(): any;
stackLayoutClasses(): {
'k-stack-layout': boolean;
'k-hstack': boolean;
'k-vstack': boolean;
'k-justify-content-start': boolean;
'k-justify-content-center': boolean;
'k-justify-content-end': boolean;
'k-justify-content-stretch': boolean;
'k-align-items-start': boolean;
'k-align-items-center': boolean;
'k-align-items-end': boolean;
'k-align-items-stretch': boolean;
};
stackLayoutStyles(): {
gap: string;
};
}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
id: PropType<string>;
orientation: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
gap: {
type: PropType<string | number>;
};
align: {
type: PropType<StackLayoutAlign>;
validator: (value: StackLayoutAlign) => any;
};
}>> & Readonly<{}>, {
orientation: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * Specifies the horizontal and vertical alignment of the inner StackLayout elements.
 */
export declare interface StackLayoutAlign {
    /**
     * Defines the possible horizontal alignment of the inner StackLayout elements
     * ([see example]({% slug layout_stacklayout_alignment %}#toc-horizontal-alignment)).
     *
     * The available values are:
     * - `start`&mdash;Uses the start point of the container.
     * - `center`&mdash;Uses the center point of the container.
     * - `end`&mdash;Uses the end point of the container.
     * - (Default)`stretch`&mdash;Stretches the items to fill the width of the container.
     */
    horizontal?: 'start' | 'center' | 'end' | 'stretch';
    /**
     * Defines the possible vertical alignment of the inner StackLayout elements
     * ([see example]({% slug layout_stacklayout_alignment %}#toc-vertical-alignment)).
     *
     * The available values are:
     * - `top`&mdash;Uses the top point of the container.
     * - `middle`&mdash;Uses the middle point of the container.
     * - `bottom`&mdash;Uses the bottom point of the container.
     * - (Default)`stretch`&mdash;Stretches the items to fill the height of the container.
     */
    vertical?: 'top' | 'middle' | 'bottom' | 'stretch';
}

/**
 * Specifies the orientation of the StackLayout ([see example]({% slug layout_stacklayout_orientation %})).
 *
 * The possible values are:
 * * (Default)`horizontal`
 * * `vertical`
 *
 */
export declare type StackLayoutOrientation = 'horizontal' | 'vertical';

/**
 * Represents the props of the [Kendo UI for Vue StackLayout component]({% slug overview_stacklayout %}).
 */
export declare interface StackLayoutProps {
    /**
     * Sets the `id` property of the root StackLayout element.
     */
    id?: string;
    /**
     * Specifies the gap between the inner elements ([see example]({% slug layout_stacklayout_gaps %})).
     */
    gap?: number | string;
    /**
     * Specifies the orientation of the StackLayout.
     * ([see example]({% slug layout_stacklayout_orientation %})).
     *
     * The possible values are:
     * * (Default)`horizontal`
     * * `vertical`
     */
    orientation?: StackLayoutOrientation | string;
    /**
     * Specifies the horizontal and vertical alignment of the inner StackLayout elements.
     * Demo ([here]({% slug layout_stacklayout_alignment %}#toc-horizontal-alignment)) and ([here]({% slug layout_stacklayout_alignment %}#toc-vertical-alignment)).
     *
     * The possible keys are:
     * * `horizontal`&mdash;Defines the possible horizontal alignment of the inner StackLayout elements.
     *   * `start`&mdash;Uses the start point of the container.
     *   * `center`&mdash;Uses the central point of the container.
     *   * `end`&mdash;Uses the end point of the container.
     *   * (Default)`stretch`&mdash;Stretches the items to fill the width of the container.
     * * `vertical`&mdash;Defines the possible vertical alignment of the inner StackLayout elements.
     *   * `top`&mdash;Uses the top point of the container.
     *   * `middle`&mdash;Uses the middle point of the container.
     *   * `bottom`&mdash;Uses the bottom point of the container.
     *   * (Default)`stretch`&mdash;Stretches the items to fill the height of the container.
     */
    align?: StackLayoutAlign;
}

/**
 * Represents the [Kendo UI for Vue Step component]({% slug overview_stepper %}).
 *
 * ```jsx
 * <Step v-bind="props" @change="(e) => props.onChange(e)">
 * <span class="k-step-indicator" aria-hidden="true">
 *    <span class="emoji">{{ props.emoji }}</span>
 * </span>
 * <span class="k-step-label">
 *    <span class="k-step-text">{{ props.label }}</span>
 * </span>
 * </Step>
 * ```
 */
export declare const Step: DefineComponent<ExtractPropTypes<    {
current: PropType<boolean>;
disabled: PropType<boolean>;
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
index: PropType<number>;
isValid: {
type: PropType<boolean>;
default: any;
};
focused: PropType<any>;
label: PropType<string>;
optional: PropType<boolean>;
tabIndex: {
type: PropType<number>;
default: number;
};
text: PropType<string>;
animationDuration: PropType<any>;
isVertical: PropType<any>;
item: PropType<any>;
linear: PropType<any>;
mode: PropType<any>;
numOfSteps: PropType<any>;
value: PropType<any>;
successIcon: PropType<String>;
successSvgIcon: PropType<Object>;
errorIcon: PropType<String>;
errorSvgIcon: PropType<Object>;
onChange: PropType<any>;
onFocus: PropType<any>;
}>, {
kendoLocalizationService: {};
}, {}, {
itemClassNames(): StepComputed['itemClassNames'];
itemStyles(): StepComputed['itemStyles'];
}, {
focus(): void;
handleClick(event: any): void;
handleFocus(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
current: PropType<boolean>;
disabled: PropType<boolean>;
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
index: PropType<number>;
isValid: {
type: PropType<boolean>;
default: any;
};
focused: PropType<any>;
label: PropType<string>;
optional: PropType<boolean>;
tabIndex: {
type: PropType<number>;
default: number;
};
text: PropType<string>;
animationDuration: PropType<any>;
isVertical: PropType<any>;
item: PropType<any>;
linear: PropType<any>;
mode: PropType<any>;
numOfSteps: PropType<any>;
value: PropType<any>;
successIcon: PropType<String>;
successSvgIcon: PropType<Object>;
errorIcon: PropType<String>;
errorSvgIcon: PropType<Object>;
onChange: PropType<any>;
onFocus: PropType<any>;
}>> & Readonly<{}>, {
tabIndex: number;
isValid: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * The arguments for the `onChange` Step event.
 */
export declare interface StepChangeEvent {
    /**
     * The index of the selected Step.
     */
    value: number;
}

/**
 * @hidden
 */
export declare interface StepComputed {
    itemClassNames: object;
    itemStyles: object;
}

/**
 * The arguments for the `onFocus` Step event.
 */
export declare interface StepFocusEvent {
}

/**
 * The Step ref.
 */
export declare interface StepHandle {
    /**
     * The Step element.
     */
    element: HTMLLIElement | null;
    /**
     * Focus the Step.
     */
    focus: () => void;
}

/**
 * Represents the [Kendo UI for Vue Stepper component]({% slug overview_stepper %}).
 *
 * ```jsx
 * <template>
 *    <Stepper :value="value" @change="handleChange" :items="items" />
 * </template>
 *
 * <script>
 * import {
 *  Stepper
 *     } from '@progress/kendo-vue-layout';
 * export default {
 *     components: {
 *        Stepper
 *     },
 *     data () {
 *       return {
 *         value: 0,
 *         items: [
 *           {
 *             label: "Cart",
 *             icon: "cart",
 *           },
 *           {
 *             label: "Delivery Address",
 *             icon: "marker-pin-target",
 *           },
 *           {
 *             label: "Payment Method",
 *             icon: "dollar",
 *           },
 *           {
 *             label: "Preview",
 *             icon: "preview",
 *             optional: true,
 *           },
 *           {
 *             label: "Finish Order",
 *             icon: "track-changes-accept",
 *           },
 *         ]
 *       }
 *     },
 *     methods: {
 *       handleChange (e) {
 *         this.value = e.value;
 *       }
 *     }
 * };
 * </script>
 * ```
 *
 */
export declare const Stepper: DefineComponent<ExtractPropTypes<    {
animationDuration: {
type: PropType<number | boolean>;
default: number;
};
dir: PropType<string>;
disabled: PropType<boolean>;
item: {
type: PropType<any>;
default: any;
};
items: PropType<StepProps_2[]>;
linear: PropType<boolean>;
mode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
orientation: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
value: {
type: PropType<number>;
default: number;
};
progressTotal: {
type: PropType<number>;
};
progress: {
type: PropType<number>;
};
modelValue: PropType<number>;
successIcon: PropType<string>;
errorIcon: PropType<string>;
}>, {}, {
currentDir: string;
focusedIdx: number;
stepper: {};
currentFocused: boolean;
}, {
computedValue(): any;
isVertical(): boolean;
numOfSteps(): any;
stepperClasses(): {
'k-stepper': boolean;
'k-stepper-linear': any;
};
stepperStyles(): {
display: string;
gridTemplateColumns: string;
gridTemplateRows: string;
};
listClasses(): {
'k-step-list': boolean;
'k-step-list-horizontal': boolean;
'k-step-list-vertical': any;
};
listStyles(): {
gridColumnStart: string | number;
gridColumnEnd: string | number;
gridRowStart: string | number;
gridRowEnd: string | number;
};
progressbarStyles(): {
gridColumnStart: string | number;
gridColumnEnd: string | number;
gridRowStart: string | number;
gridRowEnd: string | number;
};
}, {
focus(): void;
dispatchChangeEvent(event: any, val: number): void;
handleChange(event: StepChangeEvent): void;
handleFocus(event: StepFocusEvent): void;
handleEnter(event: any): void;
handleFocusin(): void;
handleFocusout(): void;
handleKeyDown(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
animationDuration: {
type: PropType<number | boolean>;
default: number;
};
dir: PropType<string>;
disabled: PropType<boolean>;
item: {
type: PropType<any>;
default: any;
};
items: PropType<StepProps_2[]>;
linear: PropType<boolean>;
mode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
orientation: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
value: {
type: PropType<number>;
default: number;
};
progressTotal: {
type: PropType<number>;
};
progress: {
type: PropType<number>;
};
modelValue: PropType<number>;
successIcon: PropType<string>;
errorIcon: PropType<string>;
}>> & Readonly<{}>, {
value: number;
mode: string;
orientation: string;
item: any;
animationDuration: number | boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * The arguments for the `onChange` Stepper event.
 */
export declare interface StepperChangeEvent {
    /**
     * The index of the selected Step.
     */
    value: number;
}

/**
 * @hidden
 */
export declare interface StepperComputed {
    [key: string]: any;
    computedValue: number;
}

/**
 * The arguments for the `onFocus` Stepper event.
 */
export declare interface StepperFocusEvent {
}

/**
 * The Stepper ref.
 */
export declare interface StepperHandle {
    /**
     * The Stepper element.
     */
    element: HTMLMenuElement | null;
    /**
     * Focus the Stepper's first focusable child.
     */
    focus: () => void;
}

/**
 * Represents the props of the [Kendo UI for Vue Stepper component]({% slug overview_stepper %}).
 */
export declare interface StepperProps {
    /**
     * Sets the duration of the Stepper animation. Defaults to `400ms`.
     */
    animationDuration?: boolean | number;
    /**
     * Specifies a list of CSS classes that will be added to the Stepper.
     */
    className?: string;
    /**
     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
     */
    dir?: string;
    /**
     * Disables the whole Stepper.
     */
    disabled?: boolean;
    /**
     * Specifies a custom icon that will be rendered inside the step for invalid steps.
     */
    errorIcon?: string;
    /**
     * Overrides the default component responsible for visualizing a single item ([see example]({% slug custom_rendering_stepper %})).
     *
     * The default Component is: [Step]({% slug api_layout_step %}).
     */
    item?: any;
    /**
     * The collection of steps that will be rendered in the Stepper ([see example]({% slug overview_stepper %})).
     */
    items: Array<StepProps>;
    /**
     * Specifies the linear flow of the Stepper.
     * ([see example]({% slug linear_mode_stepper %})).
     */
    linear?: boolean;
    /**
     * Specifies the display mode of the Stepper
     * ([see example]({% slug display_modes_stepper %})).
     * * The possible values are:
     * * (Default) `steps`. Render step indicator and optional label.
     * * `labels`. Render labels only.
     */
    mode?: 'steps' | 'labels' | string;
    /**
     * Specifies the orientation of the Stepper
     * ([see example]({% slug orientation_stepper %})).
     *
     * The possible values are:
     * * (Default) `horizontal`
     * * `vertical`
     */
    orientation?: 'horizontal' | 'vertical' | string;
    /**
     * Specifies a custom icon that will be rendered inside the step for valid steps.
     */
    successIcon?: string;
    /**
     * Specifies the index of the selected Step.
     */
    value: number;
    /**
     * The maximum value of the ProgressBar inside the Stepper. If not defined it is equal to the number of steps defined.
     */
    progressTotal?: number;
    /**
     * Specifies the current progress of the ProgressBar inside the Stepper. If not defined it is equal to the current value.
     */
    progress?: number;
    /**
     * @hidden
     */
    modelValue?: number;
    /**
     * The event handler that will be fired when the value is changed.
     */
    onChange?: (event: StepperChangeEvent) => void;
    /**
     * The event handler that will be fired when a Step is focused.
     */
    onFocus?: (event: StepperFocusEvent) => void;
}

/**
 * Represents the props of the [Kendo UI for Vue Step component]({% slug overview_stepper %}).
 */
export declare interface StepProps {
    /**
     * Specifies a list of CSS classes that will be added to the Step element.
     */
    className?: string;
    /**
     * Represents the content that will be rendered inside each Step.
     *
     * @hidden
     */
    content?: any;
    /**
     * Specifies the current Step.
     */
    current?: boolean;
    /**
     * Sets a custom property.
     */
    [customProp: string]: any;
    /**
     * Specifies if the Step is disabled
     * ([see example]({% slug display_modes_stepper %})).
     */
    disabled?: boolean;
    /**
     * Defines the name for an existing icon in a Kendo UI for Vue theme.
     * The icon is rendered inside the Step indicator by a `span.k-icon` element
     * ([see example]({% slug display_modes_stepper %})).
     */
    icon?: string;
    /**
     * Defines an SVGIcon to be rendered within the Step.
     */
    svgIcon?: SVGIcon;
    /**
     * Defines the name for an success icon in a Kendo UI for Vue theme.
     */
    successIcon?: String;
    /**
     * Defines an success SVGIcon to be rendered within the Step.
     */
    successSvgIcon?: Object;
    /**
     * Defines the name for an error icon in a Kendo UI for Vue theme.
     */
    errorIcon?: String;
    /**
     * Defines an error SVGIcon to be rendered within the Step.
     */
    errorSvgIcon?: Object;
    /**
     * Sets the index of the Step that is used to identify it.
     */
    index?: number;
    /**
     * Specifies the validity of the step
     * ([see example]({% slug display_modes_stepper %})).
     */
    isValid?: boolean;
    /**
     * Specifies the label of the Step
     * ([see example]({% slug display_modes_stepper %})).
     */
    label?: string;
    /**
     * Specifies if the step is optional. The validation is not applied to these steps
     * ([see example]({% slug display_modes_stepper %})).
     */
    optional?: boolean;
    /**
     * Sets the `tabIndex` property of the Step.
     * Defaults to `0`.
     */
    tabIndex?: number;
    /**
     * Specifies the text content of the Step indicator
     * ([see example]({% slug display_modes_stepper %})).
     */
    text?: string;
}

/**
 * @hidden
 */
export declare const TabStrip: DefineComponent<ExtractPropTypes<    {
animation: {
type: PropType<boolean>;
default: boolean;
};
size: {
type: PropType<TabStripSize>;
default: string;
};
selected: PropType<number>;
tabPosition: {
type: PropType<string>;
default: string;
};
tabAlignment: {
type: PropType<string>;
default: string;
};
tabs: {
type: PropType<TabStripTabProperties[]>;
default: any;
};
tabIndex: PropType<number>;
dir: PropType<string>;
}>, {}, {
currentShowAll: boolean;
currentTabs: any[];
showLicenseWatermark: boolean;
}, {
compTabs(): any;
}, {
addRenderTitle(currentId: string, titleTemplate: any): void;
addTab(newTab: TabStripTabProperties): void;
removeTab(currentId: string): void;
onSelect(index: number): void;
onKeyDown(event: any): void;
invertKeys(original: any, inverted: any): any;
firstNavigatableTab(): number;
lastNavigatableTab(): number;
prevNavigatableTab(): number;
nextNavigatableTab(): number;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
select: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
animation: {
type: PropType<boolean>;
default: boolean;
};
size: {
type: PropType<TabStripSize>;
default: string;
};
selected: PropType<number>;
tabPosition: {
type: PropType<string>;
default: string;
};
tabAlignment: {
type: PropType<string>;
default: string;
};
tabs: {
type: PropType<TabStripTabProperties[]>;
default: any;
};
tabIndex: PropType<number>;
dir: PropType<string>;
}>> & Readonly<{
onSelect?: (...args: any[] | unknown[]) => any;
}>, {
size: TabStripSize;
tabs: TabStripTabProperties[];
tabPosition: string;
tabAlignment: string;
animation: boolean;
}, {}, {}, {}, string, () => {
addRenderTitle: any;
addTab: any;
removeTab: any;
}, true, {}, any>;

/**
 * @hidden
 */
export declare const TabStripContent: DefineComponent<ExtractPropTypes<    {
showAll: PropType<boolean>;
animation: PropType<boolean>;
tabs: PropType<any[]>;
selected: PropType<number>;
hasTabs: PropType<boolean>;
}>, {}, {
midAnimation: boolean;
}, {
animationClass(): any;
}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
showAll: PropType<boolean>;
animation: PropType<boolean>;
tabs: PropType<any[]>;
selected: PropType<number>;
hasTabs: PropType<boolean>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface TabStripContentMethods {
    [key: string]: any;
    addTab: () => void;
    removeTab: (id: string) => void;
    getTabs: (tabs: any[], children: any) => any;
}

/**
 * The props that are passed to the TabStripContent by the TabStrip.
 */
export declare interface TabStripContentProps {
    /**
     * Defines whether the content appearance will be animated.
     */
    animation?: boolean;
    /**
     * Defines whether to render all the tabs.
     */
    showAll?: boolean;
    /**
     * The index of the selected tab. Used to indicate which child to render.
     */
    selected?: number;
    /**
     * The tabs collection.
     */
    tabs?: Array<any>;
    /**
     * @hidden
     */
    index?: number;
    /**
     * @hidden
     */
    keepTabsMounted?: boolean;
    /**
     * @hidden
     */
    hasTabs?: boolean;
}

/**
 * Represents the emits of the [Kendo UI for Vue TabStrip component]({% slug overview_tabstrip %}).
 */
export declare interface TabStripEmits {
    /**
     * Fires each time the user makes a selection.
     */
    onSelect?: (e: TabStripSelectEventArguments) => void;
}

/**
 * @hidden
 */
export declare const TabStripNavigation: DefineComponent<ExtractPropTypes<    {
tabs: PropType<any[]>;
selected: PropType<number>;
tabIndex: PropType<number>;
tabPosition: PropType<string>;
tabAlignment: PropType<string>;
onSelect: PropType<(e: number) => void>;
onKeydown: PropType<(e: number) => void>;
}>, {}, {}, {
wrapperNavClasses(): {
'k-tabstrip-items-wrapper': boolean;
'k-hstack': boolean;
'k-vstack': boolean;
};
navClasses(): string;
}, {
onKeyDown(e: any): void;
onNavigationItemSelect(idx: number): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
select: any;
keydown: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
tabs: PropType<any[]>;
selected: PropType<number>;
tabIndex: PropType<number>;
tabPosition: PropType<string>;
tabAlignment: PropType<string>;
onSelect: PropType<(e: number) => void>;
onKeydown: PropType<(e: number) => void>;
}>> & Readonly<{
onSelect?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface TabStripNavigationComputed {
    [key: string]: any;
    wrapperNavClasses: object;
    navClasses: object;
}

/**
 * The props that are passed to the TabStripNavigation by the TabStrip.
 */
export declare interface TabStripNavigationEmits {
    /**
     * @hidden
     */
    keydown?: any;
    /**
     * @hidden
     */
    select?(idx: number): void;
}

/**
 * @hidden
 */
export declare const TabStripNavigationItem: DefineComponent<ExtractPropTypes<    {
active: PropType<boolean>;
disabled: PropType<boolean>;
index: PropType<number>;
title: {
type: PropType<any>;
default: string;
};
id: {
type: PropType<any>;
};
titleRender: PropType<any>;
first: {
type: PropType<boolean>;
default: any;
};
last: {
type: PropType<boolean>;
default: any;
};
}>, {}, {}, {
itemClasses(): TabStripNavigationItemComputed['itemClasses'];
}, {
onClick(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
select: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
active: PropType<boolean>;
disabled: PropType<boolean>;
index: PropType<number>;
title: {
type: PropType<any>;
default: string;
};
id: {
type: PropType<any>;
};
titleRender: PropType<any>;
first: {
type: PropType<boolean>;
default: any;
};
last: {
type: PropType<boolean>;
default: any;
};
}>> & Readonly<{
onSelect?: (...args: any[] | unknown[]) => any;
}>, {
title: any;
first: boolean;
last: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface TabStripNavigationItemComputed {
    [key: string]: any;
    itemClasses: object;
}

/**
 * The emits that are triggered by the TabStripNavigation to the TabStripNavigationItem.
 */
export declare interface TabStripNavigationItemEmits {
    /**
     * @hidden
     */
    select?(idx: number): void;
}

/**
 * The props that are passed by the TabStripNavigation to the TabStripNavigationItem.
 */
export declare interface TabStripNavigationItemProps {
    /**
     * Defines whether the current TabStripNavigationItem is selected.
     */
    active?: boolean;
    /**
     * Defines whether the TabStripNavigationItem is disabled.
     */
    disabled?: boolean;
    /**
     * Sets the index of the TabStripNavigationItem that is used to identify it.
     */
    index: number;
    /**
     * Sets the id of the TabStripNavigationItem.
     */
    id?: any;
    /**
     * Sets the title of the TabStripNavigationItem.
     */
    title?: any;
    /**
     * Defines the custom rendering of the title. Accepts a Vue component, a `render` function, or a slot name.
     */
    titleRender?: any;
    /**
     * @hidden
     */
    first?: boolean;
    /**
     * @hidden
     */
    last?: boolean;
}

/**
 * The props that are passed to the TabStripNavigation by the TabStrip.
 */
export declare interface TabStripNavigationProps {
    /**
     * The tabs collection.
     */
    tabs?: Array<any>;
    /**
     * Sets the index of the selected tab. Controlled by the TabStrip component.
     */
    selected?: number;
    /**
     * @hidden
     * The event that is triggered when a tab is selected.
     */
    onSelect?: (e: number) => void;
    /**
     * @hidden
     * The event that is triggered when a key is pressed.
     */
    onKeydown?: (e: number) => void;
    /**
     * @hidden
     */
    tabIndex?: number;
    /**
     * @hidden
     */
    tabPosition?: string;
    /**
     * @hidden
     */
    tabAlignment?: string;
}

/**
 * Represents the props of the [Kendo UI for Vue TabStrip component]({% slug overview_tabstrip %}).
 */
export declare interface TabStripProps extends TabStripEmits {
    /**
     * Enables the tab animation.
     */
    animation?: boolean;
    /**
     * Sets the index of the selected TabStripTab component
     * ([see example]({% slug tabs_tabstrip %}#toc-tabs-on-initial-loading)).
     */
    selected?: number;
    /**
     * Specifies the possible sizes of the TabStrip.
     *
     * @default `medium`
     */
    size?: TabStripSize;
    /**
     * The position in which the TabStripNavigation components will be rendered.
     *
     * The available options are:
     * - `"top"`&mdash;Renders the `TabStripNavigation` components to the top of the TabStrip.
     * - `"bottom"`&mdash;Renders the `TabStripNavigation` components to the bottom of the TabStrip.
     * - `"left"`&mdash;Renders the `TabStripNavigation` components to the left of the TabStrip.
     * - `"right"`&mdash;Renders the `TabStripNavigation` components to the right of the TabStrip.
     *
     * @default 'top'.
     */
    tabPosition?: string;
    /**
     * Sets the alignment of the tabs.
     *
     *
     * The available options are:
     * - `"start"`&mdash;Aligns the tabs at the start of the `TabStripNavigation`.
     * - `"center"`&mdash;Aligns the tabs in the center of the `TabStripNavigation`.
     * - `"end"`&mdash;Aligns the tabs at the end of the `TabStripNavigation`.
     * - `"justify"`&mdash;Justifies the tabs inside the `TabStripNavigation`.
     * - `"stretched"`&mdash;Stretches the tabs inside the `TabStripNavigation`.
     *
     * @default 'start'.
     */
    tabAlignment?: string;
    /**
     * Sets the array of tabs.
     */
    tabs?: TabStripTabProperties[];
    /**
     * Sets the `tabIndex` of the TabStripNavigation.
     */
    tabIndex?: number;
    /**
     * Sets the direction of the TabStrip component.
     */
    dir?: string;
}

/**
 * The arguments that are passed to the `onSelect` callback function of the TabStrip.
 */
export declare interface TabStripSelectEventArguments {
    /**
     * The index of the selected TabStrip tab.
     */
    selected: number;
}

/**
 * The values of the `size` property of the TabStrip.
 */
export declare type TabStripSize = 'small' | 'medium' | 'large' | null;

/**
 * @hidden
 */
export declare const TabStripTab: DefineComponent<ExtractPropTypes<    {
disabled: PropType<boolean>;
contentClassName: PropType<string>;
title: PropType<any>;
id: PropType<string>;
titleRender: PropType<any>;
}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
disabled: PropType<boolean>;
contentClassName: PropType<string>;
title: PropType<any>;
id: PropType<string>;
titleRender: PropType<any>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

export declare interface TabStripTabProperties {
    disabled?: boolean;
    id?: string;
    tabId?: string;
    title?: string;
    titleRender?: any;
    content?: any;
    contentClassName?: string;
}

/**
 * Represents the props of the TabStrip tabs.
 */
export declare interface TabStripTabProps {
    /**
     * Defines whether a tab is disabled ([see example]({% slug tabs_tabstrip %}#toc-disabled-state)).
     */
    disabled?: boolean;
    /**
     * Sets the title of the tab ([see example]({% slug tabs_tabstrip %}#toc-titles)).
     */
    title?: any;
    /**
     * Sets the id of the tab (li element).
     */
    id?: string;
    /**
     * Defines the custom rendering of the title. Accepts a Vue component, a `render` function, or a slot name.
     */
    titleRender?: ((h: any, defaultRendering: any | null, props: any, listeners: any) => any) | any;
    /**
     * Specifies the CSS class names of the TabStripTab content.
     */
    contentClassName?: string;
}

/**
 * @hidden
 */
export declare const TileLayout: DefineComponent<ExtractPropTypes<    {
id: StringConstructor;
dir: StringConstructor;
gap: ObjectConstructor;
columns: NumberConstructor;
columnWidth: (StringConstructor | NumberConstructor)[];
rowHeight: (StringConstructor | NumberConstructor)[];
dataItemKey: StringConstructor;
items: ArrayConstructor;
positions: ArrayConstructor;
autoFlow: {
type: StringConstructor;
default: string;
validator: (value: string) => any;
};
ignoreDrag: FunctionConstructor;
}>, {}, {
currentPositions: any[];
showLicenseWatermark: boolean;
}, {
compPositions(): any;
wrapperClass(): {
[x: number]: boolean;
'k-tilelayout': boolean;
'k-pos-relative': boolean;
};
}, {
focus(): void;
updateHandle(index: number, dOrder: number, dCol: number, dRowSpan: number, dColSpan: number, isResized: boolean): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
id: StringConstructor;
dir: StringConstructor;
gap: ObjectConstructor;
columns: NumberConstructor;
columnWidth: (StringConstructor | NumberConstructor)[];
rowHeight: (StringConstructor | NumberConstructor)[];
dataItemKey: StringConstructor;
items: ArrayConstructor;
positions: ArrayConstructor;
autoFlow: {
type: StringConstructor;
default: string;
validator: (value: string) => any;
};
ignoreDrag: FunctionConstructor;
}>> & Readonly<{}>, {
autoFlow: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the TileLayout.
 * For further reference, check [grid-auto-flow CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) article.
 * Defaults to `column`.
 */
export declare type TileLayoutAutoFlow = 'column' | 'row' | 'column dense' | 'row dense' | 'unset';

/**
 * Specifies the gaps between the tiles.
 */
export declare interface TileLayoutGap {
    /**
     * The rows gap between tiles.
     * Defaults to `16px`.
     */
    rows?: number | string;
    /**
     * The columns gap between tiles.
     * Defaults to `16px`.
     */
    columns?: number | string;
}

/**
 * The interface for describing items that can be passed to the `items` property of the TileLayout component.
 */
export declare interface TileLayoutItem {
    /**
     * The position which is used when the TileLayout is in uncontrolled mode
     * ([see example]({% slug tiles_position_dimensions_tilelayout %})).
     */
    defaultPosition?: TilePosition;
    /**
     * Sets additional styles to the TileLayoutItem.
     */
    style?: object;
    /**
     * Sets additional classes to the TileLayoutItem.
     */
    class?: string;
    /**
     * The tile object.
     */
    tile?: object;
    /**
     * Sets additional CSS styles to the TileLayoutItem hint element.
     */
    hintStyle?: object;
    /**
     * Sets additional classes to the TileLayoutItem hint element.
     */
    hintClass?: string;
    /**
     * Sets the title in the TileLayoutItem's header content
     * ([see example]({% slug tiles_position_dimensions_tilelayout %})).
     */
    header?: any;
    /**
     * Sets the title in the TileLayoutItem's header text
     * ([see example]({% slug tiles_position_dimensions_tilelayout %})).
     */
    headerText?: string;
    /**
     * Sets the content in TileLayoutItem's body content
     * ([see example]({% slug tiles_position_dimensions_tilelayout %})).
     */
    body?: any;
    /**
     * Sets the content in TileLayoutItem's body text
     * ([see example]({% slug tiles_position_dimensions_tilelayout %})).
     */
    bodyText?: string;
    /**
     * Overrides the default rendering of the TileLayoutItem
     * ([see example]({% slug tiles_custom_rendering_tilelayout %})).
     */
    item?: any;
    /**
     * Specifies the id of each Tile if needed to be user-defined. By default the id is automatically generated.
     */
    id?: any;
    /**
     * Specifies if the user is allowed to resize the TileLayoutItem and in which direction
     * ([see example]({% slug tiles_resizing_tilelayout %})).
     * If `resizable` is not specified, the resizing of the TileLayoutItem will be enabled for both directions.
     */
    resizable?: TileResizeMode | string | boolean;
    /**
     * Specifies if the user is allowed to reorder the TileLayoutItem by dragging and dropping it
     * ([see example]({% slug tiles_reordering_tilelayout %})).
     * If `reorderable` is not specified, the dragging functionality of the TileLayoutItem will be enabled.
     */
    reorderable?: boolean;
    /**
     * Specifies if the tabIndex of each TileLayout tile if the scenario requires it. Defaults to `0`.
     */
    tabIndex?: number;
}

/**
 * Represents the properties of [TileLayout](% slug overview_tilelayout %) component.
 */
export declare interface TileLayoutProps {
    /**
     * Sets the `id` property of the root element.
     */
    id?: string;
    /**
     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
     */
    dir?: string;
    /**
     * Specifies the gaps between the tiles ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
     *
     * * The possible keys are:
     * * `rows`
     * * `columns`
     */
    gap?: TileLayoutGap;
    /**
     * Specifies the default number of columns ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
     */
    columns?: number;
    /**
     * Specifies the default width of the columns ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
     */
    columnWidth?: number | string;
    /**
     * Specifies the default height of the rows ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
     */
    rowHeight?: number | string;
    /**
     * Represents the `key` field of the TileLayout item. Used for setting unique keys to the TileLayout items.
     */
    dataItemKey?: string;
    /**
     * The collection of items that will be rendered in the TileLayout
     * ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
     */
    items?: TileLayoutItem[];
    /**
     * The list of tiles' positions which are used when the TileLayout is in controlled mode
     * ([see example]({% slug tiles_position_dimensions_tilelayout %}#toc-controlling-the-position)).
     */
    positions?: TilePosition[];
    /**
     * Fires when the user repositions the tile by either dragging or resizing
     * ([see example]({% slug tiles_position_dimensions_tilelayout %}#toc-controlling-the-position)).
     */
    onReposition?: (event: TileLayoutRepositionEvent) => void;
    /**
     * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the TileLayout.
     * For further reference, check [grid-auto-flow CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) article.
     * Defaults to `column`
     * ([see example]({% slug autoflows_tilelayout %})).
     */
    autoFlow?: TileLayoutAutoFlow | String;
    /**
     * Use this callback to prevent or allow dragging of the tiles based on specific dom event.
     * Setting `:ignoreDrag="$event => !$event.target.closest('.k-card-title')"` will make only the headers draggable.
     * Setting `:ignoreDrag="$event => $event.target.nodeName == 'INPUT'"` will ignore dragging input elements.
     */
    ignoreDrag?: (event: any) => boolean;
}

/**
 * The arguments for the `onReposition` TileLayout event.
 */
export declare interface TileLayoutRepositionEvent {
    /**
     * The new positions of the TileLayout tiles.
     */
    value: Array<TileStrictPosition>;
    /**
     * The index of the currently moved tile.
     */
    index: number;
    /**
     * Returns 0 if the row is not changed, 1 if the item is dragged to the next row
     * and -1 if the item is drag to the previous row.
     */
    row: number;
    /**
     * Returns 0 if the column is not changed, 1 if the item is dragged to the next column
     * and -1 if the item is drag to the previous column.
     */
    col: number;
}

/**
 * The arguments for the `onTileresize` TileLayout event.
 */
export declare interface TileLayoutTileResizeEvent {
    /**
     * The new resized positions of the TileLayout tiles.
     */
    value: Array<TileStrictPosition>;
    /**
     * The index of the currently resized tile.
     */
    index: number;
    /**
     * Returns 0 if the rowSpan is not changed, 1 if the rowSpan is increased
     * and -1 if the rowSpan is decreased.
     */
    rowSpan: number;
    /**
     * Returns 0 if the columnSpan is not changed, 1 if the columnSpan is increased
     * and -1 if the columnSpan is decreased.
     */
    colSpan: number;
}

/**
 * Specifies the position of each tile.
 */
export declare interface TilePosition {
    /**
     * Defines the order index of the TileLayoutItem.
     * If not set, items will receive a sequential order.
     */
    order?: number;
    /**
     * (Required) Defines on which column-line the TileLayoutItem will start.
     * It is required in order reordering and resizing functionalities to work as expected as they rely on it.
     */
    col: number;
    /**
     * Specifies how many columns will the TileLayoutItem spans.
     * Defaults to `1`.
     */
    colSpan?: number;
    /**
     * Defines on which row-line the TileLayoutItem will start.
     */
    row?: number;
    /**
     * Specifies how many rows will the TileLayoutItem spans.
     * Defaults to `1`.
     */
    rowSpan?: number;
}

/**
 * Specifies if the user is allowed to resize the TileLayoutItem and in which direction
 * ([see example]({% slug tiles_resizing_tilelayout %})).
 * If `resizable` is not specified, the resizing of the TileLayoutItem will be enabled for both directions.
 */
export declare type TileResizeMode = 'horizontal' | 'vertical' | boolean;

/**
 * Specifies the strict position of each tile.
 * Used in the [TileLayoutRepositionEvent]({% slug api_layout_tilelayoutrepositionevent %}).
 */
export declare interface TileStrictPosition extends TilePosition {
    /**
     * Defines the order index of the TileLayoutItem.
     * If not set, items will receive a sequential order.
     */
    order: number;
    /**
     * Specifies how many rows will the TileLayoutItem spans.
     * Defaults to `1`.
     */
    rowSpan: number;
    /**
     * Specifies how many columns will the TileLayoutItem spans.
     * Defaults to `1`.
     */
    colSpan: number;
}

export { }