@progress/kendo-vue-common/index.d.ts

Kendo UI for Vue Common Utilities package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { DefineComponent } from 'vue';
import { ExtractPropTypes } from 'vue';
import { PropType } from 'vue';
import { PublicProps } from 'vue';

/** @hidden */
export declare const ADAPTIVE_MEDIUM_BREAKPOINT: number;

/** @hidden */
export declare const ADAPTIVE_SMALL_BREAKPOINT: number;

/**
 * Represents a Vue Provider Component that enables further configuration of the adaptive mode breakpoints.
 * Used for global configuration across components that implement adaptive rendering.
 * For more information and demos, refer to:
 * * [ComboBox Adaptive Rendering article]({% slug adaptive_rendering_combobox %})
 * * [DropDownList Adaptive Rendering article]({% slug adaptive_rendering_dropdownlist %})
 * * [DropDownTree Adaptive Rendering article]({% slug adaptive_rendering_dropdowntree %})
 * * [MultiSelect Adaptive Rendering article]({% slug adaptive_rendering_multiselect %})
 * * [MultiSelectTree Adaptive Rendering article]({% slug adaptive_rendering_multiselecttree %})
 *
 */
export declare const AdaptiveModeProvider: DefineComponent<ExtractPropTypes<    {
small: {
type: PropType<number>;
default: number;
};
medium: {
type: PropType<number>;
default: number;
};
}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
small: {
type: PropType<number>;
default: number;
};
medium: {
type: PropType<number>;
default: number;
};
}>> & Readonly<{}>, {
small: number;
medium: number;
}, {}, {}, {}, string, () => {
adaptiveModeBreakpoints: {
small: any;
medium: any;
};
}, true, {}, any>;

/**
 * @hidden
 */
declare interface BaseIconProps {
    /**
     * Sets the `tabIndex` of the icon element.
     */
    tabIndex?: number;
    /**
     * Sets the `id` of the icon element.
     */
    id?: string;
    /**
     * Sets the `aria-label` of the icon element.
     */
    ariaLabel?: string;
    /**
     * Sets the `title` of the icon element.
     */
    title?: string;
    /**
     * Specifies a list of CSS classes that will be added to the root DOM element.
     */
    class?: string;
    /**
     * Specifies the theme color of the Icon.
     *
     * The possible values are:
     * * `inherit` (Default)&mdash;Applies coloring based on the current color.
     * * `primary` &mdash;Applies coloring based on primary theme color.
     * * `secondary`&mdash;Applies coloring based on secondary theme color.
     * * `tertiary`&mdash; Applies coloring based on tertiary theme color.
     * * `info`&mdash;Applies coloring based on info theme color.
     * * `success`&mdash; Applies coloring based on success theme color.
     * * `warning`&mdash; Applies coloring based on warning theme color.
     * * `error`&mdash; Applies coloring based on error theme color.
     * * `dark`&mdash; Applies coloring based on dark theme color.
     * * `light`&mdash; Applies coloring based on light theme color.
     * * `inverse`&mdash; Applies coloring based on inverse theme color.
     *
     * If the property is not set, the icon inherits the color from its parent.
     *
     * You can use the `style` prop to apply custom color related properties to the icon.
     */
    themeColor?: IconThemeColor | string;
    /**
     * Specifies the size of the icon.
     *
     * The possible values are:
     * `default` (Default)&mdash;Font-size: 16px; Width: 16px; Height: 16px.
     * `xsmall`&mdash;Font-size: 12px; Width: 12px; Height: 12px.
     * `small`&mdash;Font-size: 14px; Width: 14px; Height: 14px.
     * `medium`&mdash;Font-size: 16px; Width: 16px; Height: 16px.
     * `large`&mdash;Font-size: 20px; Width: 20px; Height: 20px.
     * `xlarge`&mdash;Font-size: 24px; Width: 24px; Height: 24px.
     * `xxlarge`&mdash;Font-size: 32px; Width: 32px; Height: 32px.
     * `xxxlarge`&mdash;Font-size: 48px; Width: 48px; Height: 48px.
     *
     *
     * You can use the `style` prop to apply custom font size to the icon.
     */
    size?: IconSize | string;
    /**
     * Specifies the icon flip direction.
     *
     * The possible values are:
     * * `default` (Default)&mdash;No flipping applied.
     * * `horizontal`&mdash;Flips the icon in horizontal direction.
     * * `vertical`&mdash;Flips the icon in vertical direction.
     * * `both`&mdash;Flips the icon in both horizontal and vertical directions.
     *
     */
    flip?: IconFlip | string;
}

/**
 * @hidden
 */
export declare class BrowserSupportService {
    private scrollbar;
    get scrollbarWidth(): number;
}

/**
 * @hidden
 */
export declare const canUseDOM: boolean;

/**
 * @hidden
 */
export declare const classNames: (...args: any[]) => string;

/**
 * @hidden
 */
export declare function clone(obj: any): any;

/**
 * @hidden
 */
export declare function cloneArray(array: any[]): any;

/**
 * @hidden
 */
export declare const cloneDate: (date?: Date) => Date | null;

/**
 * @hidden
 */
export declare function cloneObject(obj: any, result: any): void;

/**
 * @hidden
 */
export declare function cloneValue(value: any, nextValue: any): any;

/**
 * @hidden
 */
export declare const Draggable: DefineComponent<    {}, {}, {}, {}, {
press(event: any): void;
drag(event: any): void;
release(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
press: any;
drag: any;
release: any;
}, string, PublicProps, Readonly<{}> & Readonly<{
onPress?: (...args: any[] | unknown[]) => any;
onDrag?: (...args: any[] | unknown[]) => any;
onRelease?: (...args: any[] | unknown[]) => any;
}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface DraggableDragEvent {
    event: any;
    element: HTMLElement;
}

/**
 * @hidden
 */
export declare interface DraggablePressEvent {
    event: any;
    element: HTMLElement;
}

/**
 * @hidden
 */
export declare interface DraggableReleaseEvent {
    event: any;
}

/**
 * Similar to the `Object.assign` function. Additionally, creates a new array for the subitems.
 *
 * @param {object} item - The source data item.
 * @param {string} subItemsField - The field which points to the subitems collection of each data item.
 * @param {object} propsToExtend - The props with which the source data item will be extended.
 * @returns {object} - The target data item.
 */
export declare const extendDataItem: (item: any, subItemsField: string, propsToExtend?: any) => any;

/**
 * @hidden
 */
export declare const FIELD_REGEX: RegExp;

/**
 * @hidden
 */
export declare const firstFocusableChild: (element: any) => any;

/**
 * @hidden
 */
export declare const FOCUSABLE_ELEMENTS: string[];

/**
 * @hidden
 */
export declare const focusContainer: (e: any, containerElement: any) => boolean;

/**
 * @hidden
 */
export declare const focusFirstFocusableChild: (element: any) => void;

/**
 * @hidden
 */
export declare const focusLastFocusableChild: (element: any) => void;

/**
 * @hidden
 */
export declare const FontIcon: DefineComponent<ExtractPropTypes<    {
name: StringConstructor;
themeColor: {
type: StringConstructor;
};
size: {
type: StringConstructor;
};
flip: {
type: StringConstructor;
};
id: StringConstructor;
ariaLabel: StringConstructor;
title: StringConstructor;
tabIndex: NumberConstructor;
}>, {}, {}, {
fontClassNames(this: FontIconAll): {
[x: string]: any;
[x: number]: any;
'k-icon': boolean;
'k-font-icon': boolean;
'k-flip-h': boolean;
'k-flip-v': boolean;
};
}, {
handleClick(e: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
click: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
name: StringConstructor;
themeColor: {
type: StringConstructor;
};
size: {
type: StringConstructor;
};
flip: {
type: StringConstructor;
};
id: StringConstructor;
ariaLabel: StringConstructor;
title: StringConstructor;
tabIndex: NumberConstructor;
}>> & Readonly<{
onClick?: (...args: any[] | unknown[]) => any;
}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface FontIconAll extends FontIconMethods, FontIconData, FontIconComputed, FontIconState {
}

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

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

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

/**
 * Represents the props of the [Kendo UI for Vue Icon component]({% slug overview_icon %}).
 */
export declare interface FontIconProps extends BaseIconProps {
    /**
     * Represents the name of the icon.
     */
    name?: string;
}

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

/**
 * Represents the basic props of the KendoVue form components.
 *
 * For runnable examples on forms support, refer to the documentation of the respective form component:
 * * [DateInput]({% slug forms_dateinput %})
 * * [DatePicker]({% slug forms_datepicker %})
 * * [TimePicker]({% slug forms_timepicker %})
 * * [DateTimePicker]({% slug forms_datetimepicker %})
 * * [AutoComplete]({% slug forms_autocomplete %})
 * * [ComboBox]({% slug forms_combobox %})
 * * [DropDownList]({% slug forms_dropdownlist %})
 * * [MultiSelect]({% slug forms_multiselect %})
 * * [Input]({% slug forms_input %})
 * * [MaskedTextBox]({% slug forms_maskedtextbox %})
 * * [NumericTextBox]({% slug forms_numerictextbox %})
 */
export declare interface FormComponentProps {
    /**
     * Controls the form error message of the component. If set to an empty string, no error will be thrown.
     *
     */
    validationMessage?: string;
    /**
     * Specifies if `null` is a valid value for the component.
     *
     */
    required?: boolean;
    /**
     * Specifies the `name` property of the `input` DOM element.
     *
     */
    name?: string;
    /**
     * Overrides the validity state of the component.
     * If `valid` is set, the `required` property will be ignored.
     *
     */
    valid?: boolean;
    /**
     * If set to `false`, no visual representation of the invalid state of the component will be applied.
     *
     */
    validityStyles?: boolean;
    /**
     * @hidden
     */
    value?: any;
    /**
     * @hidden
     */
    defaultValue?: any;
}

/**
 * Represents the `validity` state of the KendoVue form components.
 *
 * For runnable examples on forms support, refer to the documentation of the respective form component:
 * * [DateInput]({% slug forms_dateinput %})
 * * [DatePicker]({% slug forms_datepicker %})
 * * [TimePicker]({% slug forms_timepicker %})
 * * [DateTimePicker]({% slug forms_timepicker %})
 * * [AutoComplete]({% slug forms_autocomplete %})
 * * [ComboBox]({% slug forms_combobox %})
 * * [DropDownList]({% slug forms_dropdownlist %})
 * * [MultiSelect]({% slug forms_multiselect %})
 * * [Input]({% slug forms_input %})
 * * [MaskedTextBox]({% slug forms_maskedtextbox %})
 * * [NumericTextBox]({% slug forms_numerictextbox %})
 */
export declare interface FormComponentValidity {
    readonly badInput?: boolean;
    readonly customError: boolean;
    readonly patternMismatch?: boolean;
    readonly rangeOverflow?: boolean;
    readonly rangeUnderflow?: boolean;
    readonly stepMismatch?: boolean;
    readonly tooLong?: boolean;
    readonly tooShort?: boolean;
    readonly typeMismatch?: boolean;
    readonly valid: boolean;
    readonly valueMissing: boolean;
}

/**
 * @hidden
 */
export declare const getActiveElement: (document: any) => HTMLElement | undefined;

/**
 * @hidden
 */
export declare function getDefaultSlots(component: any): any;

/**
 * @hidden
 */
export declare function getDir(element: Element | null, initialDir: string): string;

export declare const getIconName: (iconName: string) => string;

/**
 * @hidden
 */
export declare const getInnerActiveElement: any;

/**
 * Returns the data item path in the tree based on the level parameter.
 *
 * @param {any[]} tree - The data tree.
 * @param {number[]} level - The level of the target tree item.
 * @param {string} subItemsField - The field which points to the subitems collection of each data item.
 * @returns {any[]} - The path of the data item.
 */
export declare const getItemPath: (tree: any[], level: number[], subItemsField?: string) => any[];

/**
 * @hidden
 *
 * Returns the notification message to display, if any.
 */
export declare const getLicenseMessage: (e: any) => string | undefined;

/**
 * @hidden
 */
export declare function getListeners(this: any): {};

/**
 * @hidden
 */
export declare function getNestedValue(fieldName: string, dataItem: any): any;

/**
 * @hidden
 */
export declare function getRef(comp: any, refName: string): any;

/**
 * @hidden
 */
export declare const getScrollbarWidth: () => number | false;

/**
 * @hidden
 */
export declare const getTabIndex: (tabIndex?: number | string, disabled?: boolean, useDefaultTabIndexWhenDisabled?: boolean) => number | undefined;

/**
 * @hidden
 */
export declare function getTemplate(this: any, { h: h, template: template, defaultRendering: defaultRendering, defaultSlots: defaultSlots, additionalProps: additionalProps, additionalListeners: additionalListeners, swapDefaultSlots: swapDefaultSlots }: any): any;

/**
 * @hidden
 */
export declare function getter(field: string): any;

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

/**
 * @hidden
 */
export declare function hasListener(this: any, eventName: string): boolean;

/** @hidden */
export declare const hasRelativeStackingContext: (elementSource?: HTMLElement) => boolean;

/**
 * @hidden
 */
export declare const Icon: DefineComponent<ExtractPropTypes<    {
name: StringConstructor;
icon: ObjectConstructor;
title: StringConstructor;
themeColor: {
type: StringConstructor;
};
size: {
type: StringConstructor;
};
flip: {
type: StringConstructor;
};
id: StringConstructor;
ariaLabel: StringConstructor;
viewBox: {
type: StringConstructor;
default: string;
};
tabIndex: NumberConstructor;
role: StringConstructor;
}>, {}, {}, {}, {
handleClick(e: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
click: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
name: StringConstructor;
icon: ObjectConstructor;
title: StringConstructor;
themeColor: {
type: StringConstructor;
};
size: {
type: StringConstructor;
};
flip: {
type: StringConstructor;
};
id: StringConstructor;
ariaLabel: StringConstructor;
viewBox: {
type: StringConstructor;
default: string;
};
tabIndex: NumberConstructor;
role: StringConstructor;
}>> & Readonly<{
onClick?: (...args: any[] | unknown[]) => any;
}>, {
viewBox: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface IconAll extends IconMethods, IconData, IconComputed, IconState {
}

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

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

/**
 * Specifies the icon flip direction.
 *
 * The possible values are:
 * * `default` (Default)&mdash;No flipping applied.
 * * `horizontal`&mdash;Flips the icon in horizontal direction.
 * * `vertical`&mdash;Flips the icon in vertical direction.
 * * `both`&mdash;Flips the icon in both horizontal and vertical directions.
 *
 */
export declare type IconFlip = 'default' | 'horizontal' | 'vertical' | 'both';

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

/**
 * @hidden
 */
export declare interface IconProps extends SvgIconProps {
    iconType?: string;
    name?: string;
}

/**
 * Specifies the size of the icon.
 *
 * The possible values are:
 * * `default` (Default)&mdash;Font-size: 16px; Width: 16px; Height: 16px.
 * * `xsmall`&mdash;Font-size: 12px; Width: 12px; Height: 12px.
 * * `small`&mdash;Font-size: 14px; Width: 14px; Height: 14px.
 * * `medium`&mdash;Font-size: 16px; Width: 16px; Height: 16px.
 * * `large`&mdash;Font-size: 20px; Width: 20px; Height: 20px.
 * * `xlarge`&mdash;Font-size: 24px; Width: 24px; Height: 24px.
 * * `xxlarge`&mdash;Font-size: 32px; Width: 32px; Height: 32px.
 * * `xxxlarge`&mdash;Font-size: 48px; Width: 48px; Height: 48px.
 *
 */
export declare type IconSize = 'default' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';

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

/**
 * Specifies the theme color of the Icon.
 *
 * The possible values are:
 * * `inherit` (Default)&mdash;Applies coloring based on the current color.
 * * `primary` &mdash;Applies coloring based on primary theme color.
 * * `secondary`&mdash;Applies coloring based on secondary theme color.
 * * `tertiary`&mdash; Applies coloring based on tertiary theme color.
 * * `info`&mdash;Applies coloring based on info theme color.
 * * `success`&mdash; Applies coloring based on success theme color.
 * * `warning`&mdash; Applies coloring based on warning theme color.
 * * `error`&mdash; Applies coloring based on error theme color.
 * * `dark`&mdash; Applies coloring based on dark theme color.
 * * `light`&mdash; Applies coloring based on light theme color.
 * * `inverse`&mdash; Applies coloring based on inverse theme color.
 *
 * If the property is not set, the icon inherits the color from its parent.
 *
 * You can use the `style` prop to apply custom color related properties to the icon.
 */
export declare type IconThemeColor = 'inherit' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';

/**
 * @hidden
 */
export declare const isObject: (value: any) => boolean;

/**
 * @hidden
 */
export declare function isRtl(element: Element | null): boolean;

/** @hidden */
export declare interface KendoThemeMaps {
    sizeMap: Record<Exclude<any, null>, string>;
    roundedMap: Record<Exclude<any, null>, string>;
}

/** @hidden */
export declare const kendoThemeMaps: KendoThemeMaps;

/**
 * @hidden
 */
export declare const Keys: {
    backspace: number;
    tab: number;
    enter: number;
    shift: number;
    esc: number;
    space: number;
    pageUp: number;
    pageDown: number;
    end: number;
    home: number;
    left: number;
    up: number;
    right: number;
    down: number;
    delete: number;
};

/**
 * @hidden
 */
export declare const lastFocusableChild: (element: any) => any;

/**
 * Creates a new array with the results of calling the provided callback function
 * on every element in the provided data tree.
 *
 * @param {any[]} tree - The data tree.
 * @param {string} subItemsField - The field which points to the subitems collection of each data item.
 * @param {(value: any) => any} callback - The callback function.
 * @returns {any[]} - The new data tree.
 */
export declare const mapTree: (tree: any[], subItemsField: string, callback: (value: any) => any) => any[];

/**
 * Creates a new array with the results of calling the provided callback function
 * on the element which match the `level` in the provided data tree.
 *
 * @param {any[]} tree - The data tree.
 * @param {number[]} level - An array of indexes of each parent and current item in the data tree.
 * @param {string} subItemsField - The field which points to the subitems collection of each data item.
 * @param {(value: any) => any} callback - The callback function.
 * @returns {any[]} - The new data tree.
 */
export declare const mapTreeItem: (tree: any[], level: number[], subItemsField: string, callback: (value: any) => any) => void;

/**
 * @hidden
 */
export declare class Navigation {
    selectors: string[];
    mouseEvents: {
        [type: string]: (target: HTMLElement, nav: Navigation, ev: any) => void;
    };
    keyboardEvents: {
        [type: string]: {
            [key: string]: (target: HTMLElement, nav: Navigation, ev: any) => void;
        };
    };
    tabIndex: number;
    root: any;
    rovingTabIndex?: boolean;
    constructor(options: {
        tabIndex: number;
        root: any;
        selectors: string[];
        rovingTabIndex?: boolean;
        mouseEvents?: {
            [type: string]: (target: HTMLElement, nav: Navigation, ev: any) => void;
        };
        keyboardEvents?: {
            [type: string]: {
                [key: string]: (target: HTMLElement, nav: Navigation, ev: any) => void;
            };
        };
    });
    get elements(): HTMLElement[];
    get first(): HTMLElement | null;
    get last(): HTMLElement | null;
    get current(): HTMLElement | null;
    focusNext(target: HTMLElement): void;
    focusPrevious(target: HTMLElement): void;
    triggerKeyboardEvent(ev: any): void;
    triggerMouseEvent(ev: any): void;
    focusElement(element: HTMLElement | null, previous: HTMLElement | null): void;
    update: () => void;
    private focusNextIndex;
}

/**
 * @hidden
 */
export declare const noop: () => void;

/**
 * @hidden
 */
export declare function setRef(comp: any, refName: string): any;

/**
 * @hidden
 */
export declare const setScrollbarWidth: () => boolean;

/**
 * @hidden
 */
export declare function setter(field: string): any;

/**
 * @hidden
 */
export declare function shouldShowValidationUI(packageMetadata: any): boolean;

/**
 * Specifies the SVG icon.
 */
export declare interface SVGIcon {
    /**
     * The unique name of the icon.
     */
    name: string;
    /**
     * The entire SVG content of the icon.
     */
    content: string;
    /**
     * The [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox)
     * definition that should be used for the icon.
     */
    viewBox: string;
}

/**
 * @hidden
 */
export declare const SvgIcon: DefineComponent<ExtractPropTypes<    {
name: StringConstructor;
icon: ObjectConstructor;
themeColor: {
type: StringConstructor;
};
size: {
type: StringConstructor;
};
flip: {
type: StringConstructor;
};
id: StringConstructor;
ariaLabel: StringConstructor;
title: StringConstructor;
viewBox: {
type: StringConstructor;
default: string;
};
tabIndex: NumberConstructor;
svgClassName: StringConstructor;
svgStyle: ObjectConstructor;
}>, {}, {}, {
wrapperClass(this: SvgIconAll): {
[x: string]: any;
[x: number]: any;
'k-icon': boolean;
'k-svg-icon': boolean;
'k-flip-h': boolean;
'k-flip-v': boolean;
};
}, {
handleClick(e: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
click: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
name: StringConstructor;
icon: ObjectConstructor;
themeColor: {
type: StringConstructor;
};
size: {
type: StringConstructor;
};
flip: {
type: StringConstructor;
};
id: StringConstructor;
ariaLabel: StringConstructor;
title: StringConstructor;
viewBox: {
type: StringConstructor;
default: string;
};
tabIndex: NumberConstructor;
svgClassName: StringConstructor;
svgStyle: ObjectConstructor;
}>> & Readonly<{
onClick?: (...args: any[] | unknown[]) => any;
}>, {
viewBox: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface SvgIconAll extends SvgIconMethods, SvgIconData, SvgIconComputed, SvgIconState {
}

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

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

/**
 * @hidden
 */
export declare interface SvgIconHandle {
    /**
     * The SvgIconHandle element.
     */
    element: HTMLSpanElement | null;
}

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

/**
 * Represents the props of the [Kendo UI for Vue SvgIcon component]({% slug overview_svgicon %}).
 */
export declare interface SvgIconProps extends BaseIconProps {
    /**
     * Represents the name of the icon.
     */
    name?: string;
    /**
     * Specifies the SVG icon.
     *
     * * The possible keys are:
     * * `name`&mdash;The unique name of the icon.
     * * `content`&mdash;The entire SVG content of the icon.
     * * `viewBox`&mdash;The viewBox definition that should be used for the icon.
     */
    icon?: SVGIcon;
    /**
     * Specifies the viewBox of the custom SVG icon.
     */
    viewBox?: string;
    /**
     * Specifies a list of CSS classes that will be added to the svg element.
     */
    svgClassName?: string;
    /**
     * Sets additional CSS styles to the svg element.
     */
    svgStyle?: object;
}

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

/**
 * @hidden
 */
export declare const templateDefinition: {
    type: (ObjectConstructor | BooleanConstructor | StringConstructor | FunctionConstructor)[];
    default: () => any;
};

/**
 * @hidden
 */
export declare function templateRendering(this: any, template: any, listeners: any): any;

/**
 * @hidden
 */
export declare function validatePackage(packageMetadata: any): void;

/**
 * @hidden
 */
export declare const WatermarkOverlay: DefineComponent<ExtractPropTypes<    {
message: {
type: StringConstructor;
default: any;
};
}>, {}, {
watermarkStyles: {
position: string;
width: string;
height: string;
top: number;
left: number;
right: number;
bottom: number;
opacity: number;
'z-index': number;
'pointer-events': string;
'background-image': string;
};
bannerStyles: {
display: string;
justifyContent: string;
alignItems: string;
position: string;
top: string;
right: string;
padding: string;
'border-radius': string;
'box-shadow': string;
'font-size': string;
'font-weight': number;
'line-height': string;
'background-color': string;
color: string;
'z-index': number;
};
bannerButtonStyles: {
display: string;
position: string;
border: string;
'border-radius': string;
padding: string;
'background-color': string;
transition: string;
outline: string;
cursor: string;
};
showBanner: boolean;
}, {}, {
onCloseBannerClick(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
message: {
type: StringConstructor;
default: any;
};
}>> & Readonly<{}>, {
message: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

export { }