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

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { ColorGradientProps } from './interfaces/ColorGradientProps';
import { ColorPickerPaletteSettings as ColorPickerPaletteSettings_2 } from '..';
import { ColorPickerPopupSettings as ColorPickerPopupSettings_2 } from '..';
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { DefineComponent } from 'vue';
import { DraggableDragEvent } from '@progress/kendo-vue-common';
import { ExtractPropTypes } from 'vue';
import { FlatColorPickerProps as FlatColorPickerProps_2 } from './FlatColorPicker';
import { FormComponentProps } from '@progress/kendo-vue-common';
import { FormComponentValidity } from '@progress/kendo-vue-common';
import { NumberFormatOptions } from '@progress/kendo-vue-intl';
import { PopupAnimation } from '@progress/kendo-vue-popup';
import { PropType } from 'vue';
import { PublicProps } from 'vue';
import { Ref } from 'vue';
import { SVGIcon } from '@progress/kendo-vue-common';
import { TileSize } from './models/tile-size';

/**
 * @hidden
 */
export declare const Checkbox: DefineComponent<ExtractPropTypes<    {
checked: {
type: PropType<boolean>;
default: any;
};
defaultChecked: {
type: PropType<boolean>;
default: any;
};
defaultValue: {
type: PropType<any>;
default: any;
};
modelValue: {
type: PropType<string | number | boolean | string[]>;
default: any;
};
dir: PropType<string>;
disabled: PropType<boolean>;
id: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
label: PropType<string | HTMLElement>;
labelRender: PropType<any>;
labelPlacement: PropType<string>;
labelOptional: PropType<boolean>;
labelClass: PropType<string>;
name: PropType<string>;
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
tabIndex: PropType<number>;
value: {
type: PropType<string | number | boolean | string[]>;
default: any;
};
validationMessage: PropType<string>;
required: PropType<boolean>;
valid: {
type: PropType<boolean>;
default: any;
};
validityStyles: {
type: PropType<boolean>;
default: boolean;
};
}>, {
inputRef: Ref<any, any>;
kendoLocalizationService: {};
}, {
valueDuringOnChange: any;
currentDir: string;
currentChecked: any;
currentValue: any;
}, {
valueIsBooleanOrNull(): boolean;
isCheckedControlled(): boolean;
isValueControlled(): any;
computedValue(): any;
computedChecked(): any;
useValueAsChecked(): any;
checkedProp(): any;
valueProp(): any;
indeterminateProp(): boolean;
isValid(): any;
labelComputedClass(): {
[x: number]: any;
'k-checkbox-label': boolean;
};
}, {
setValidity(): void;
localizeMessage(message: string): string;
focusElement(): void;
setValue(e: any, val: boolean): void;
onChangeHandler(e: any): void;
onKeyDownHandler(e: any): void;
onBlurHandler(e: any): void;
onFocusHandler(e: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
changemodel: any;
'update:modelValue': any;
change: any;
focus: any;
blur: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
checked: {
type: PropType<boolean>;
default: any;
};
defaultChecked: {
type: PropType<boolean>;
default: any;
};
defaultValue: {
type: PropType<any>;
default: any;
};
modelValue: {
type: PropType<string | number | boolean | string[]>;
default: any;
};
dir: PropType<string>;
disabled: PropType<boolean>;
id: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
label: PropType<string | HTMLElement>;
labelRender: PropType<any>;
labelPlacement: PropType<string>;
labelOptional: PropType<boolean>;
labelClass: PropType<string>;
name: PropType<string>;
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
tabIndex: PropType<number>;
value: {
type: PropType<string | number | boolean | string[]>;
default: any;
};
validationMessage: PropType<string>;
required: PropType<boolean>;
valid: {
type: PropType<boolean>;
default: any;
};
validityStyles: {
type: PropType<boolean>;
default: boolean;
};
}>> & Readonly<{
onBlur?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onChangemodel?: (...args: any[] | unknown[]) => any;
"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
}>, {
value: string | number | boolean | string[];
size: string;
modelValue: string | number | boolean | string[];
defaultValue: any;
rounded: string;
valid: boolean;
validityStyles: boolean;
checked: boolean;
defaultChecked: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * The arguments for the `onChange` Checkbox event.
 */
export declare interface CheckboxChangeEvent {
    /**
     * The new value of the Checkbox.
     */
    value: boolean;
}

/**
 * @hidden
 */
export declare interface CheckboxComputed {
    [key: string]: any;
    valueIsBooleanOrNull: boolean;
    isCheckedControlled: boolean;
    isValueControlled: boolean;
    computedValue: any;
    computedChecked?: boolean;
    useValueAsChecked: boolean;
    checkedProp?: any;
    valueProp: any;
    indeterminateProp: any;
    isValid: boolean;
}

/**
 * The arguments for the `onFocus` Checkbox event.
 */
export declare interface CheckboxFocusEvent {
}

/**
 * @hidden
 */
export declare interface CheckboxHandle {
    element: any;
    focus: any;
}

/**
 * Represents the props of the [Kendo UI for Vue Checkbox component]({% slug overview_checkbox %}).
 */
export declare interface CheckboxProps extends ToggleBaseProps, FormComponentProps {
    /**
     * Sets the checked state of the Checkbox.
     * Set to null to enable the indeterminate state of the Checkbox ([see example]({% slug overview_checkbox %})).
     */
    checked?: boolean | null;
    /**
     * @hidden
     */
    modelValue?: string | number | string[] | boolean | null;
    /**
     * If the type is different than boolean and the `checked` property is provided it's
     *  passed to the underlying `input` element.
     * If set to boolean and the `checked` property is omitted sets the checked state of the Checkbox.
     * Set null to enable the indeterminate state of the Checkbox ([see example]({% slug overview_checkbox %})).
     */
    value?: string | number | string[] | boolean | null;
    /**
     * Sets the default value of checked attribute when used in
     *  uncontrolled mode ([see example]({% slug default_state %})).
     */
    defaultChecked?: boolean;
    /**
     * The default value of the Checkbox.
     */
    defaultValue?: any;
    /**
     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
     */
    dir?: string;
    /**
     * Sets the disabled state of the Checkbox
     * ([see example]({% slug disabled_checkbox %})).
     */
    disabled?: boolean;
    /**
     * Sets the `id` of the Checkbox.
     */
    id?: string;
    /**
     * Configures the `size` of the Checkbox.
     *
     * The available options are:
     * - small
     * - medium
     * - large
     * - null&mdash;Does not set a size `className`.
     *
     * @default `medium`
     */
    size?: null | 'small' | 'medium' | 'large' | string;
    /**
     * Configures the `rounded` style of the Checkbox.
     *
     * The available options are:
     * - small
     * - medium
     * - large
     * - null&mdash;Does not set a rounded `className`.
     *
     * @default `medium`
     */
    rounded?: null | 'small' | 'medium' | 'large' | string;
    /**
     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
     * For example these elements could contain error or hint message.
     */
    ariaDescribedBy?: string;
    /**
     * Identifies the element(s) which will label the component.
     */
    ariaLabelledBy?: string;
    /**
     * Sets the label of the Checkbox component ([see example]({% slug labels_checkbox %})).
     */
    label?: string | HTMLElement;
    /**
     * Sets the label render template of the Checkbox component.
     *  Accepts a slot name, a `render` function, or a Vue component.
     */
    labelRender?: any;
    /**
     * Sets the label position of the Checkbox component 'before' | 'after' ([see example]({% slug labels_checkbox %})).
     */
    labelPlacement?: string;
    /**
     * Sets the optional text after the label of the Checkbox component.
     */
    labelOptional?: boolean;
    /**
     * Sets the `class` of the label element of the Checkbox.
     */
    labelClass?: string;
    /**
     * The event handler that will be fired when the user edits the value.
     */
    onChange?: (event: CheckboxChangeEvent) => void;
    /**
     * The event handler that will be fired when Checkbox is focused.
     */
    onFocus?: (event: CheckboxFocusEvent) => void;
    /**
     * Sets the `tabIndex` property of the Checkbox.
     * Defaults to `0`.
     */
    tabIndex?: number;
}

/**
 * @hidden
 */
export declare const ColorGradient: DefineComponent<ExtractPropTypes<    {
modelValue: PropType<string>;
modelRgbaValue: PropType<string>;
defaultValue: PropType<string>;
value: PropType<string>;
opacity: {
type: PropType<boolean>;
default: boolean;
};
backgroundColor: PropType<string>;
disabled: PropType<boolean>;
id: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
tabIndex: PropType<number>;
innerTabIndex: {
type: PropType<number>;
default: any;
};
size: PropType<"small" | "medium" | "large">;
class: PropType<string>;
adaptive: PropType<boolean>;
}>, {}, {
currentValue: any;
currentBgColor: any;
isFirstRender: boolean;
currentHsva: any;
currentRgba: any;
currentHex: any;
focused: boolean;
}, {
valueSet(): any;
computedValue(): any;
hsva(): any;
rgba(): any;
hex(): any;
computedBgColor(): any;
computedTabIndex(): any;
}, {
onKeyDownHandler(e: any): void;
onHexChange(hex: string, value: string, event: any): void;
onRgbaChange(rgba: RGBA, event: NumericTextBoxChangeEvent): void;
onAlphaSliderChange(event: SliderChangeEvent): void;
onHueSliderChange(event: SliderChangeEvent): void;
onDrag(e: DraggableDragEvent): void;
onRelease(): void;
onGradientWrapperClick(event: any): void;
move(e: any, prop: any, d: any): void;
dragKeyDown(e: any): void;
changePosition(event: any): void;
handleHsvaChange(hsva: HSVA, event: any): void;
dispatchChangeEvent(value: string, event: any, hex: string, rgbaValue: string): void;
onFocus(event: any): void;
onBlur(event: any): void;
setAlphaSliderBackground(backgroundColor: string): void;
getGradientRectMetrics(): {
top: any;
right: any;
bottom: any;
left: any;
width: any;
height: any;
x: any;
y: any;
};
focus(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
change: any;
focus: any;
blur: any;
changemodel: any;
'update:modelValue': any;
'update:modelRgbaValue': any;
keydown: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
modelValue: PropType<string>;
modelRgbaValue: PropType<string>;
defaultValue: PropType<string>;
value: PropType<string>;
opacity: {
type: PropType<boolean>;
default: boolean;
};
backgroundColor: PropType<string>;
disabled: PropType<boolean>;
id: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
tabIndex: PropType<number>;
innerTabIndex: {
type: PropType<number>;
default: any;
};
size: PropType<"small" | "medium" | "large">;
class: PropType<string>;
adaptive: PropType<boolean>;
}>> & Readonly<{
onBlur?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
onChangemodel?: (...args: any[] | unknown[]) => any;
"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
"onUpdate:modelRgbaValue"?: (...args: any[] | unknown[]) => any;
}>, {
opacity: boolean;
innerTabIndex: number;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * The arguments for the `onChange` ColorGradient event.
 */
declare interface ColorGradientChangeEvent {
    /**
     * The current value of the ColorGradient.
     */
    value: string;
    /**
     * The current value of the ColorGradient in RGBA format.
     */
    rgbaValue: string;
}

/**
 * Represents the props of the [Kendo UI for Vue ColorGradient component]({% slug overview_colorgradient %}).
 */
declare interface ColorGradientProps_2 {
    /**
     * The model value of the ColorGradient.
     */
    modelValue?: string;
    /**
     * The model rgba value of the ColorGradient.
     */
    modelRgbaValue?: string;
    /**
     * The default value of the ColorGradient.
     */
    defaultValue?: string;
    /**
     * The value of the ColorGradient.
     */
    value?: string;
    /**
     * Determines the event handler that will be fired when the user edits the value.
     */
    onChange?: (event: ColorGradientChangeEvent) => void;
    /**
     * Represents the focus event.
     */
    onFocus?: (event: any) => void;
    /**
     * Determines whether the alpha slider and the alpha input will be displayed. Defaults to `true`.
     */
    opacity?: boolean;
    /**
     * Enables the color contrast tool.
     * Sets the background color that will be compared to the selected value.
     * The tool will calculate the contrast ratio between two colors.
     * Currently, only the RGBA format is supported.
     */
    backgroundColor?: string;
    /**
     * Determines whether the ColorGradient is disabled
     * ([more information and example]({% slug disabled_colorgradient %})).
     *
     */
    disabled?: boolean;
    /**
     * Sets the `tabIndex` property of the ColorGradient.
     */
    tabIndex?: number;
    /**
     * Sets tabindex of the inner components of the ColorGradient.
     */
    innerTabIndex?: number;
    /**
     * Specifies the id of the component.
     */
    id?: string;
    /**
     * Sets additional CSS classes to the ColorGradient.
     */
    class?: string;
    /**
     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
     * For example these elements could contain error or hint message.
     */
    ariaDescribedBy?: string;
    /**
     * Identifies the element(s) which will label the component.
     */
    ariaLabelledBy?: string;
    /**
     * Configures the `size` of the ColorGradient.
     *
     * The available options are:
     * - `small`
     * - `medium`
     * - `large`
     * - `null`&mdash;This option removes the the built-in size styles of the ColorGradient. Allows for custom `padding`.
     *
     * @default `medium`
     */
    size?: null | 'small' | 'medium' | 'large';
    /**
     * @hidden
     * Internal prop that determines whether the ColorGradient is in adaptive state.
     */
    adaptive?: boolean;
}

/**
 * @hidden
 */
export declare const ColorPalette: DefineComponent<ExtractPropTypes<    {
palette: {
type: PropType<string | string[]>;
default: string;
};
columns: PropType<number>;
tileSize: {
type: PropType<number | TileSize>;
};
modelValue: PropType<string>;
modelRgbaValue: PropType<string>;
defaultValue: PropType<string>;
value: PropType<string>;
disabled: PropType<boolean>;
tabIndex: PropType<number>;
id: PropType<string>;
class: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
size: {
type: PropType<"small" | "medium" | "large">;
default: string;
};
}>, {}, {
focusedColor: string;
currentValue: any;
}, {
focusedColorCooridanates(): TableCell | undefined;
isUncontrolled(): boolean;
selectedColor(): any;
}, {
focus(): void;
onKeyDown(event: any): void;
onColorClick(color: string, event: any): void;
onFocus(event: any): void;
onBlur(event: any): void;
handleCellNavigation(event: any, horizontalStep: number, verticalStep: number): void;
handleEnter(event: any): void;
dispatchChangeEvent(value: string, event: any): void;
getPaletteInfo(): {
colors: any;
columns: any;
};
createCellId(cellCoords: TableCell): string;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
keydown: any;
focus: any;
blur: any;
changemodel: any;
'update:modelValue': any;
'update:modelRgbaValue': any;
change: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
palette: {
type: PropType<string | string[]>;
default: string;
};
columns: PropType<number>;
tileSize: {
type: PropType<number | TileSize>;
};
modelValue: PropType<string>;
modelRgbaValue: PropType<string>;
defaultValue: PropType<string>;
value: PropType<string>;
disabled: PropType<boolean>;
tabIndex: PropType<number>;
id: PropType<string>;
class: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
size: {
type: PropType<"small" | "medium" | "large">;
default: string;
};
}>> & Readonly<{
onBlur?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
onChangemodel?: (...args: any[] | unknown[]) => any;
"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
"onUpdate:modelRgbaValue"?: (...args: any[] | unknown[]) => any;
}>, {
size: "small" | "medium" | "large";
palette: string | string[];
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * The arguments for the `onChange` ColorPalette event.
 */
export declare interface ColorPaletteChangeEvent {
    /**
     * The current value of the ColorPalette.
     */
    value: string;
    /**
     * The current value of the ColorPalette in RGBA format.
     */
    rgbaValue: string;
}

/**
 * Represents the props of the [KendoVue ColorPalette component]({% slug overview_colorpalette %}).
 */
export declare interface ColorPaletteProps {
    /**
     * The color palette that will be displayed.
     *
     * The supported values are:
     * * The name of the predefined palette preset (for example, `office`, `basic`, and `apex`).
     * * A string array.
     */
    palette?: string[] | string;
    /**
     * Specifies the number of columns that will be displayed.
     * Defaults to `10`.
     */
    columns?: number;
    /**
     * Specifies the size of a color cell in px.
     * Defaults to `24`.
     */
    tileSize?: number | TileSize_2;
    /**
     * The default value of the ColorPalette.
     */
    defaultValue?: string;
    /**
     * The value of the ColorPalette.
     */
    value?: string;
    /**
     * The model value of the ColorPalette.
     */
    modelValue?: string;
    /**
     * The model rgba value of the ColorPalette.
     */
    modelRgbaValue?: string;
    /**
     * Determines whether the ColorPalette is disabled
     * ([more information and example]({% slug disabled_colorpalette %})).
     */
    disabled?: boolean;
    /**
     * Sets the `tabIndex` property of the ColorPalette.
     */
    tabIndex?: number;
    /**
     * Specifies the id of the component.
     */
    id?: string;
    /**
     * Sets additional CSS classes to the ColorPalette.
     */
    class?: string;
    /**
     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
     * For example these elements could contain error or hint message.
     */
    ariaDescribedBy?: string;
    /**
     * Identifies the element(s) which will label the component.
     */
    ariaLabelledBy?: string;
    /**
     * Configures the `size` of the ColorPalette.
     *
     * The available options are:
     * - `small`
     * - `medium`
     * - `large`
     * - `null`&mdash;This option removes the the built-in size styles of the ColorPalette. To set a tile size use the `tileSize` property.
     *
     * @default `medium`
     */
    size?: null | 'small' | 'medium' | 'large';
    /**
     * Determines the event handler that will be fired when the user edits the value.
     */
    onChange?: (event: ColorPaletteChangeEvent) => void;
    /**
     * Represent the focus event of the ColorPalette.
     */
    onFocus?: (event: FocusEvent) => void;
}

/**
 * @hidden
 */
export declare const ColorPicker: DefineComponent<ExtractPropTypes<    {
modelValue: PropType<string>;
modelRgbaValue: PropType<string>;
value: {
type: PropType<string>;
default: any;
};
defaultValue: PropType<string>;
disabled: PropType<boolean>;
dir: PropType<string>;
id: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
showClearButton: {
type: PropType<boolean>;
default: boolean;
};
showPreview: {
type: PropType<boolean>;
default: boolean;
};
showButtons: {
type: PropType<boolean>;
default: boolean;
};
paletteSettings: {
type: PropType<ColorPickerPaletteSettings_2>;
default: () => {
palette: string;
};
};
valid: {
type: PropType<boolean>;
default: boolean;
};
tabIndex: {
type: PropType<number>;
default: number;
};
title: PropType<string>;
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
iconClassName: PropType<string>;
popupSettings: {
type: PropType<ColorPickerPopupSettings_2>;
default: () => {};
};
gradientSettings: {
type: PropType<ColorGradientProps>;
default: () => {
opacity: boolean;
};
};
flatColorPickerSettings: {
type: PropType<FlatColorPickerProps_2>;
default: () => {};
};
open: {
type: PropType<boolean>;
default: any;
};
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
view: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
selectedView: {
type: PropType<number>;
default: any;
};
adaptive: {
type: PropType<boolean>;
default: boolean;
};
adaptiveTitle: {
type: PropType<string>;
};
}>, {}, {
focused: boolean;
currentValue: string;
currentOpen: boolean;
flatcolorpickerRef: any;
windowWidth: number;
observer: any;
}, {
isValueControlled(): boolean;
isOpenControlled(): boolean;
computedValue(): any;
computedOpen(): any;
wrapperClassName(): {
[x: string]: any;
'k-picker': boolean;
'k-colorpicker': boolean;
'k-icon-picker': boolean;
'k-invalid': boolean;
'k-disabled': any;
'k-focus': any;
};
animationStyles(): {
top: number;
width: string;
height: string;
};
classNameAdaptive(): string;
adaptiveState(): boolean;
}, {
calculateMedia(entries: ResizeObserverEntry[]): void;
focusElement(): void;
setOpen(nextOpen: boolean, isBlur?: boolean): void;
onButtonKeyDown(event: any): void;
onKeyDownHandler(event: any): void;
onOpenHandler(): void;
onClickHandler(): void;
onActiveColorClickHandler(event: any): void;
isViewFocused(): boolean;
onButtonBlur(event: any): void;
onFocusHandler(event: any): void;
onBlurTimeout(): void;
onBlurHandler(): void;
onViewChange(event: any): void;
onChangeHandler(event: ColorPaletteChangeEvent, isPalette?: boolean): void;
onFlatChangeHandler(event: FlatColorPickerViewChangeEvent): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
open: any;
close: any;
changemodel: any;
'update:modelValue': any;
'update:modelRgbaValue': any;
activecolorclick: any;
focus: any;
blur: any;
change: any;
viewchange: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
modelValue: PropType<string>;
modelRgbaValue: PropType<string>;
value: {
type: PropType<string>;
default: any;
};
defaultValue: PropType<string>;
disabled: PropType<boolean>;
dir: PropType<string>;
id: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
showClearButton: {
type: PropType<boolean>;
default: boolean;
};
showPreview: {
type: PropType<boolean>;
default: boolean;
};
showButtons: {
type: PropType<boolean>;
default: boolean;
};
paletteSettings: {
type: PropType<ColorPickerPaletteSettings_2>;
default: () => {
palette: string;
};
};
valid: {
type: PropType<boolean>;
default: boolean;
};
tabIndex: {
type: PropType<number>;
default: number;
};
title: PropType<string>;
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
iconClassName: PropType<string>;
popupSettings: {
type: PropType<ColorPickerPopupSettings_2>;
default: () => {};
};
gradientSettings: {
type: PropType<ColorGradientProps>;
default: () => {
opacity: boolean;
};
};
flatColorPickerSettings: {
type: PropType<FlatColorPickerProps_2>;
default: () => {};
};
open: {
type: PropType<boolean>;
default: any;
};
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
view: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
selectedView: {
type: PropType<number>;
default: any;
};
adaptive: {
type: PropType<boolean>;
default: boolean;
};
adaptiveTitle: {
type: PropType<string>;
};
}>> & Readonly<{
onBlur?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onClose?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onChangemodel?: (...args: any[] | unknown[]) => any;
"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
"onUpdate:modelRgbaValue"?: (...args: any[] | unknown[]) => any;
onOpen?: (...args: any[] | unknown[]) => any;
onViewchange?: (...args: any[] | unknown[]) => any;
onActivecolorclick?: (...args: any[] | unknown[]) => any;
}>, {
value: string;
tabIndex: number;
size: string;
view: string;
rounded: string;
fillMode: string;
valid: boolean;
showClearButton: boolean;
open: boolean;
popupSettings: ColorPickerPopupSettings_2;
adaptive: boolean;
selectedView: number;
showPreview: boolean;
showButtons: boolean;
gradientSettings: ColorGradientProps;
paletteSettings: ColorPickerPaletteSettings_2;
flatColorPickerSettings: FlatColorPickerProps_2;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * The arguments for the `onActiveColorClick` ColorPicker event.
 */
declare interface ColorPickerActiveColorClick {
    /**
     * The current value of the ColorPicker.
     */
    value: string;
    /**
     * A native DOM event.
     */
    event: any;
}

/**
 * The arguments for the `onBlur` ColorPicker event.
 */
export declare interface ColorPickerBlurEvent {
    /**
     * A native DOM event.
     */
    event: any;
}

/**
 * The arguments for the `onChange` ColorPicker event.
 */
export declare interface ColorPickerChangeEvent {
    /**
     * The current value of the ColorPicker.
     */
    value: string;
    /**
     * The current value of the ColorPicker in RGBA format.
     */
    rgbaValue: string;
    /**
     * A native DOM event.
     */
    event: any;
}

/**
 * The arguments for the `onFocus` ColorPicker event.
 */
export declare interface ColorPickerFocusEvent {
    /**
     * A native DOM event.
     */
    event: any;
}

/**
 * The settings of the ColorPalette that is nested inside the popup of the ColorPicker
 * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-customizing-the-palette-popup)).
 */
export declare interface ColorPickerPaletteSettings {
    /**
     * Specifies the set of colors.
     * Provides a set of predefined palette presets (for example, `office`, `basic`, and `apex`)
     * and enables you to implement a custom color palette.
     * Defaults to the `office` preset.
     *
     * The supported values are:
     * * The name of the predefined palette preset (for example, `office`, `basic`, and `apex`).
     * * A string with comma-separated colors.
     * * A string array.
     */
    palette?: string | Array<string>;
    /**
     * Specifies the number of columns that will be displayed.
     * Defaults to `10`.
     */
    columns?: number;
    /**
     * Specifies the size of a color cell.
     *
     * The possible values are:
     * * (Default) `24`
     * * `{ width: number, height: number }`
     */
    tileSize?: number | TileSize_2;
}

/**
 * The settings of the popup container of the ColorPicker.
 */
export declare interface ColorPickerPopupSettings {
    /**
     * Controls the popup animation. By default, the open and close animations are enabled.
     */
    animate?: boolean | PopupAnimation;
    /**
     * Specifies a list of CSS classes that will be added to the Popup element.
     */
    className?: string | Array<string>;
}

/**
 * Represents the props of the [Kendo UI for Vue ColorPicker component]({% slug overview_colorpicker %}).
 */
export declare interface ColorPickerProps {
    /**
     * The default value of the ColorPicker
     * ([see example]({% slug default_value_colorpicker %})).
     */
    defaultValue?: string;
    /**
     * Specifies the model value of the ColorPicker.
     */
    modelValue?: string;
    /**
     * The model rgba value of the ColorPicker.
     */
    modelRgbaValue?: string;
    /**
     * Specifies the value of the ColorPicker.
     */
    value?: string;
    /**
     * Overrides the validity state of the component.
     * If `valid` is set, the `required` property will be ignored.
     *
     * This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
     */
    valid?: boolean;
    /**
     * Sets the disabled state of the ColorPicker
     * ([see example]({% slug disabled_colorpicker %})).
     */
    disabled?: boolean;
    /**
     * Sets the `tabIndex` property of the ColorPicker.
     * Defaults to `0`.
     */
    tabIndex?: number;
    /**
     * Sets the `title` property of the ColorPicker.
     */
    title?: string;
    /**
     * Sets the ColorPicker selected view index. The default is `0`.
     */
    selectedView?: number;
    /**
     * Sets the view which the ColorPicker will render in the popup
     * ([see example]({% slug combinedview_colorpicker %})).
     */
    view?: ColorPickerView | string;
    /**
     * Represents the `dir` HTML attribute.
     */
    dir?: string;
    /**
     * Specifies whether clear button will be rendered in the header.
     */
    showClearButton?: boolean;
    /**
     * Specifies whether preview and revert color boxes will be rendered in the header.
     */
    showPreview?: boolean;
    /**
     * Specifies whether action buttons will be rendered in the footer.
     */
    showButtons?: boolean;
    /**
     * Defines the name of an [existing icon in the Kendo UI for Vue theme]({% slug icons %}).
     * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-displaying-kendo-ui-icons)).
     */
    icon?: string;
    /**
     * Defines an SVGIcon to be rendered within the ColorPicker button.
     */
    svgIcon?: SVGIcon;
    /**
     * The class name which displays an icon in the ColorPicker button
     * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-displaying-custom-icons)).
     */
    iconClassName?: string;
    /**
     * Configures the ColorPalette that is displayed in the ColorPicker popup
     * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-customizing-the-palette-popup)).
     */
    paletteSettings?: ColorPickerPaletteSettings;
    /**
     * Configures the ColorGradient that is displayed in the ColorPicker popup.
     */
    gradientSettings?: ColorGradientProps_2;
    /**
     * Configures the FlatColorPicker that is displayed in the ColorPicker popup.
     */
    flatColorPickerSettings?: FlatColorPickerProps;
    /**
     * Configures the popup of the ColorPicker.
     */
    popupSettings?: ColorPickerPopupSettings;
    /**
     * Sets the open and close state of the ColorPicker.
     */
    open?: boolean;
    /**
     * Specifies the id of the component.
     */
    id?: string;
    /**
     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
     * For example these elements could contain error or hint message.
     */
    ariaDescribedBy?: string;
    /**
     * Identifies the element(s) which will label the component.
     */
    ariaLabelledBy?: string;
    /**
     * The event handler that will be fired when the user edits the value.
     */
    onChange?: (event: ColorPickerChangeEvent) => void;
    /**
     * The event handler that will be fired when ColorPicker is focused.
     */
    onFocus?: (event: ColorPickerFocusEvent) => void;
    /**
     * The event handler that will be fired when ColorPicker is blurred.
     */
    onBlur?: (event: ColorPickerBlurEvent) => void;
    /**
     * The event handler that will be fired when the left side of the ColorPicker is clicked.
     */
    onActivecolorclick?: (event: ColorPickerActiveColorClick) => void;
    /**
     * Configures the `size` of the ColorPicker.
     *
     * The available options are:
     * - small
     * - medium
     * - large
     * - null&mdash;Does not set a size `className`.
     *
     * @default `medium`
     */
    size?: null | 'small' | 'medium' | 'large' | string;
    /**
     * Configures the `roundness` of the ColorPicker.
     *
     * The available options are:
     * - small
     * - medium
     * - large
     * - full
     * - null&mdash;Does not set a rounded `className`.
     *
     * @default `medium`
     */
    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
    /**
     * Configures the `fillMode` of the ColorPicker.
     *
     * The available options are:
     * - solid
     * - outline
     * - flat
     * - null&mdash;Does not set a fillMode `className`.
     *
     * @default `solid`
     */
    fillMode?: null | 'solid' | 'flat' | 'outline' | string;
    /**
     * Providing different rendering of the popup element based on the screen dimensions.
     */
    adaptive?: boolean;
    /**
     * Specifies the text that is rendered as title in the adaptive popup.
     */
    adaptiveTitle?: string;
}

/**
 * Specifies the view which the ColorPicker will render in the popup
 * ([see example]({% slug combinedview_colorpicker %})).
 *
 * The possible values are:
 * * (Default) `palette`
 * * `gradient`
 * * `combo`
 */
declare type ColorPickerView = 'gradient' | 'palette' | 'combo';

declare type Direction = 'ltr' | 'rtl';

/**
 * @hidden
 */
export declare const FlatColorPicker: DefineComponent<ExtractPropTypes<    {
modelValue: PropType<string>;
modelRgbaValue: PropType<string>;
value: PropType<string>;
prevValue: PropType<string>;
tabIndex: PropType<number>;
disabled: PropType<boolean>;
view: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
selectedView: {
type: PropType<number>;
default: any;
};
header: PropType<any>;
footer: PropType<any>;
showClearButton: {
type: PropType<boolean>;
default: boolean;
};
showPreview: {
type: PropType<boolean>;
default: boolean;
};
showButtons: {
type: PropType<boolean>;
default: boolean;
};
gradientSettings: {
type: PropType<ColorGradientProps_2>;
default: () => {
opacity: boolean;
};
};
paletteSettings: {
type: PropType<ColorPickerPaletteSettings>;
default: () => {
palette: string;
};
};
size: {
type: PropType<"small" | "medium" | "large">;
default: string;
};
adaptive: PropType<boolean>;
}>, {}, {
currentView: string;
colorValue: string | Function;
currentPrevColor: string | Function;
focused: boolean;
}, {
isColorGradient(): boolean;
computedColor(): any;
computedPrevColor(): any;
previewClass(): {
'k-coloreditor-preview-color': boolean;
'k-color-preview': boolean;
'k-no-color': boolean;
};
currentClass(): {
'k-coloreditor-current-color': boolean;
'k-color-preview': boolean;
'k-no-color': boolean;
};
computedTabIndex(): 0 | -1;
}, {
focus(): void;
onKeyDownHandler(e: any): void;
handleViewChange(event: any, viewType: any): void;
handleResetColor(): void;
handleColorChange(event: any): void;
handlePaletteColorChange(event: any): void;
triggerChange(event: any): void;
innerKeyDown(event: any): void;
gradientKeyDown(event: any): void;
handleButtonKeydown(e: any): void;
handleCancelBtnClick(): void;
handlePrevColorClick(): void;
onFocus(event: any): void;
onBlur(event: any): void;
onFocusout(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
viewchange: any;
changemodel: any;
'update:modelValue': any;
'update:modelRgbaValue': any;
focus: any;
blur: any;
focusout: any;
keydown: any;
change: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
modelValue: PropType<string>;
modelRgbaValue: PropType<string>;
value: PropType<string>;
prevValue: PropType<string>;
tabIndex: PropType<number>;
disabled: PropType<boolean>;
view: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
selectedView: {
type: PropType<number>;
default: any;
};
header: PropType<any>;
footer: PropType<any>;
showClearButton: {
type: PropType<boolean>;
default: boolean;
};
showPreview: {
type: PropType<boolean>;
default: boolean;
};
showButtons: {
type: PropType<boolean>;
default: boolean;
};
gradientSettings: {
type: PropType<ColorGradientProps_2>;
default: () => {
opacity: boolean;
};
};
paletteSettings: {
type: PropType<ColorPickerPaletteSettings>;
default: () => {
palette: string;
};
};
size: {
type: PropType<"small" | "medium" | "large">;
default: string;
};
adaptive: PropType<boolean>;
}>> & Readonly<{
onBlur?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onFocusout?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
onChangemodel?: (...args: any[] | unknown[]) => any;
"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
"onUpdate:modelRgbaValue"?: (...args: any[] | unknown[]) => any;
onViewchange?: (...args: any[] | unknown[]) => any;
}>, {
size: "small" | "medium" | "large";
view: string;
showClearButton: boolean;
selectedView: number;
showPreview: boolean;
showButtons: boolean;
gradientSettings: ColorGradientProps_2;
paletteSettings: ColorPickerPaletteSettings;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface FlatColorPickerHandle {
    /**
     * The current element or `null` if there is none.
     */
    element: HTMLDivElement | null;
    /**
     * The props values of the FlatColorPicker.
     */
    props: FlatColorPickerProps;
    /**
     * The focus event callback.
     */
    focus: () => void;
}

/**
 * Represents the properties of [FlatColorPicker](% slug api_inputs_flatcolorpickerprops %) component.
 */
export declare interface FlatColorPickerProps {
    /**
     * Sets the `id` property of the top `div` element of the FlatColorPicker.
     */
    id?: string;
    /**
     * Sets the color model value.
     */
    modelValue?: string;
    /**
     * The model rgba value of the FlatColorPicker.
     */
    modelRgbaValue?: string;
    /**
     * Sets the color value.
     */
    value?: string;
    /**
     * Sets the previous color value.
     */
    prevValue?: string;
    /**
     * Sets the `tabIndex` property of the FlatColorPicker.
     */
    tabIndex?: number;
    /**
     * Determines whether the FlatColorPicker is disabled.
     */
    disabled?: boolean;
    /**
     * Sets the FlatColorPicker view. The default is `combo`.
     */
    view?: 'combo' | 'gradient' | 'palette' | string;
    /**
     * Sets the FlatColorPicker selected view index. The default is `0`.
     */
    selectedView?: number;
    /**
     * Sets custom header component.
     */
    header?: any;
    /**
     * Sets custom footer component.
     */
    footer?: any;
    /**
     * Specifies whether clear button will be rendered in the header.
     */
    showClearButton?: boolean;
    /**
     * Specifies whether preview and revert color boxes will be rendered in the header.
     */
    showPreview?: boolean;
    /**
     * Specifies whether action buttons will be rendered in the footer.
     */
    showButtons?: boolean;
    /**
     * Configures the ColorPalette that is displayed in the ColorPicker popup.
     */
    paletteSettings?: ColorPickerPaletteSettings;
    /**
     * Configures the ColorGradient that is displayed in the ColorPicker popup.
     */
    gradientSettings?: ColorGradientProps_2;
    /**
     * Configures the `size` of the FlatColorPicker.
     *
     * The available options are:
     * - `small`
     * - `medium`
     * - `large`
     * - `null`&mdash;This option removes the the built-in size styles of the FlatColorPicker. Allows for custom `padding`.
     *
     * @default `medium`
     */
    size?: null | 'small' | 'medium' | 'large';
    /**
     * The event handler that will be fired when the view is changed.
     */
    onViewchange?: (event: FlatColorPickerViewChangeEvent) => void;
    /**
     * The event handler that will be fired when the user edits the value.
     */
    onChange?: (event: ColorPickerChangeEvent) => void;
    /**
     * @hidden
     * Internal prop that determines whether the ColorGradient is in adaptive state.
     */
    adaptive?: boolean;
}

/**
 * The arguments for the `onChange` ColorPicker event.
 */
declare interface FlatColorPickerViewChangeEvent {
    /**
     * The current value of the ColorPicker.
     */
    value: string;
    /**
     * The viewType of the selected view.
     */
    viewType: 'gradient' | 'palette';
}

export { FormComponentValidity }

/**
 * @hidden
 */
declare interface HSVA {
    h?: number;
    s?: number;
    v?: number;
    a?: number;
}

/**
 * @hidden
 */
export declare const Input: DefineComponent<ExtractPropTypes<    {
modelValue: {
type: PropType<string | number>;
default: any;
};
disabled: {
type: PropType<boolean>;
default: any;
};
defaultValue: {
type: PropType<string | number | string[]>;
default: string;
};
value: {
type: PropType<string | number | string[]>;
};
label: {
type: PropType<string>;
};
placeholder: {
type: PropType<string>;
};
required: {
type: PropType<boolean>;
default: boolean;
};
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
dir: {
type: PropType<string>;
};
id: PropType<string>;
valid: {
type: PropType<boolean>;
default: any;
};
validate: {
type: PropType<boolean>;
};
validationMessage: {
type: PropType<string>;
};
validityStyles: {
type: PropType<boolean>;
default: boolean;
};
inputClass: PropType<string>;
tabIndex: PropType<number>;
ariaLabel: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
}>, {
inputRef: Ref<any, any>;
}, {
hasMounted: boolean;
autofill: boolean;
currentValue: string | number | string[];
valueDuringOnChange: string;
focused: boolean;
}, {
spanClassNames(): {
'k-floating-label-container': boolean;
'k-focus': any;
'k-empty': boolean;
'k-autofill': any;
'k-invalid': boolean;
'k-rtl': boolean;
};
inputInnerClass(): {
[x: string]: any;
[x: number]: any;
'k-input': boolean;
'k-invalid': boolean;
'k-required': any;
'k-disabled': any;
};
computedValue(): any;
}, {
updateValidClass(): void;
emitFocus(e: any): void;
emitBlur(e: any): void;
handleKeydown(e: any): void;
handleKeyup(e: any): void;
handleKeypress(e: any): void;
clearClick(event: any): void;
focus(): void;
validity(): {
customError: boolean;
valid: any;
badInput: any;
patternMismatch: any;
rangeOverflow: any;
rangeUnderflow: any;
stepMismatch: any;
tooLong: any;
tooShort: any;
typeMismatch: any;
valueMissing: any;
};
isInvalid(state: Object): boolean;
setValidity(): void;
handleInput(event: any): void;
handleChange(event: any): void;
emitUpdate(event: any, eventName: string, value: any): void;
handleAutoFill(e: any): void;
handleAutoFillEnd(e: any): void;
name: () => any;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
input: any;
change: any;
changemodel: any;
'update:modelValue': any;
focus: any;
blur: any;
keyup: any;
keydown: any;
keypress: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
modelValue: {
type: PropType<string | number>;
default: any;
};
disabled: {
type: PropType<boolean>;
default: any;
};
defaultValue: {
type: PropType<string | number | string[]>;
default: string;
};
value: {
type: PropType<string | number | string[]>;
};
label: {
type: PropType<string>;
};
placeholder: {
type: PropType<string>;
};
required: {
type: PropType<boolean>;
default: boolean;
};
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
dir: {
type: PropType<string>;
};
id: PropType<string>;
valid: {
type: PropType<boolean>;
default: any;
};
validate: {
type: PropType<boolean>;
};
validationMessage: {
type: PropType<string>;
};
validityStyles: {
type: PropType<boolean>;
default: boolean;
};
inputClass: PropType<string>;
tabIndex: PropType<number>;
ariaLabel: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaDescribedBy: PropType<string>;
}>> & Readonly<{
onInput?: (...args: any[] | unknown[]) => any;
onBlur?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
onKeypress?: (...args: any[] | unknown[]) => any;
onKeyup?: (...args: any[] | unknown[]) => any;
onChangemodel?: (...args: any[] | unknown[]) => any;
"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
}>, {
required: boolean;
size: string;
modelValue: string | number;
defaultValue: string | number | string[];
disabled: boolean;
rounded: string;
fillMode: string;
valid: boolean;
validityStyles: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * Represents the props of the [KendoVue Input component]({% slug overview_textbox %}).
 * Extends the [native input props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement).
 */
export declare interface InputProps extends FormComponentProps {
    /**
     * Renders a floating label for the Input component.
     */
    id?: string;
    label?: string;
    value?: string | string[] | number;
    modelValue?: string | number;
    defaultValue?: string | string[] | number | undefined;
    disabled?: boolean;
    validate?: boolean;
    /**
     * Configures the `size` of the Input.
     *
     * The available options are:
     * - small
     * - medium
     * - large
     * - null&mdash;Does not set a size `class`.
     *
     * @default `medium`
     */
    size?: null | 'small' | 'medium' | 'large' | string;
    /**
     * Configures the `roundness` of the Input.
     *
     * The available options are:
     * - small
     * - medium
     * - large
     * - full
     * - null&mdash;Does not set a rounded `class`.
     *
     * @default `medium`
     */
    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
    /**
     * Configures the `fillMode` of the Input.
     *
     * The available options are:
     * - solid
     * - outline
     * - flat
     * - null&mdash;Does not set a fillMode `class`.
     *
     * @default `solid`
     */
    fillMode?: null | 'solid' | 'flat' | 'outline' | string;
    dir?: string;
    /**
     * Fires when the `change` event of the input is triggered.
     */
    onChange?: (event: any) => void;
    /**
     * Fires when the `input` event of the input is triggered.
     */
    onInput?: (eve