/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 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; default: any; }; defaultChecked: { type: PropType; default: any; }; defaultValue: { type: PropType; default: any; }; modelValue: { type: PropType; default: any; }; dir: PropType; disabled: PropType; id: PropType; ariaLabelledBy: PropType; ariaDescribedBy: PropType; label: PropType; labelRender: PropType; labelPlacement: PropType; labelOptional: PropType; labelClass: PropType; name: PropType; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; rounded: { type: PropType<"small" | "medium" | "large" | "none">; validator: (value: string) => boolean; }; tabIndex: PropType; value: { type: PropType; default: any; }; validationMessage: PropType; required: PropType; valid: { type: PropType; default: any; }; validityStyles: { type: PropType; default: boolean; }; }>, { inputRef: Ref; 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: (value: boolean | null) => true; 'update:modelValue': (value: boolean | null) => true; change: (event: CheckboxChangeEvent) => true; focus: (event: CheckboxFocusEvent) => true; blur: (event: CheckboxBlurEvent) => true; }, string, PublicProps, Readonly; default: any; }; defaultChecked: { type: PropType; default: any; }; defaultValue: { type: PropType; default: any; }; modelValue: { type: PropType; default: any; }; dir: PropType; disabled: PropType; id: PropType; ariaLabelledBy: PropType; ariaDescribedBy: PropType; label: PropType; labelRender: PropType; labelPlacement: PropType; labelOptional: PropType; labelClass: PropType; name: PropType; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; rounded: { type: PropType<"small" | "medium" | "large" | "none">; validator: (value: string) => boolean; }; tabIndex: PropType; value: { type: PropType; default: any; }; validationMessage: PropType; required: PropType; valid: { type: PropType; default: any; }; validityStyles: { type: PropType; default: boolean; }; }>> & Readonly<{ onBlur?: (event: CheckboxBlurEvent) => any; onChange?: (event: CheckboxChangeEvent) => any; onFocus?: (event: CheckboxFocusEvent) => any; onChangemodel?: (value: boolean) => any; "onUpdate:modelValue"?: (value: boolean) => any; }>, { value: string | number | boolean | string[]; checked: boolean; modelValue: string | number | boolean | string[]; defaultValue: any; valid: boolean; validityStyles: boolean; defaultChecked: boolean; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * The arguments for the `onBlur` Checkbox event. */ export declare interface CheckboxBlurEvent { /** * The native FocusEvent from the DOM. */ event: FocusEvent; } /** * 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 { /** * The native FocusEvent from the DOM. */ event: FocusEvent; } /** * @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 * * @default undefined */ size?: 'small' | 'medium' | 'large'; /** * Configures the `rounded` style of the Checkbox. * * The available options are: * - none * - small * - medium * - large * * @default undefined */ rounded?: 'none' | 'small' | 'medium' | 'large'; /** * 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; modelRgbaValue: PropType; defaultValue: PropType; value: PropType; opacity: { type: PropType; default: boolean; }; backgroundColor: PropType; disabled: PropType; id: PropType; ariaLabelledBy: PropType; ariaDescribedBy: PropType; tabIndex: PropType; innerTabIndex: { type: PropType; default: any; }; size: PropType<"small" | "medium" | "large">; class: PropType; adaptive: PropType; }>, {}, { 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: (event: ColorGradientChangeEvent) => true; focus: (event: ColorGradientFocusEvent) => true; blur: (event: ColorGradientBlurEvent) => true; changemodel: (value: string) => true; 'update:modelValue': (value: string) => true; 'update:modelRgbaValue': (value: string) => true; keydown: (event: KeyboardEvent) => true; }, string, PublicProps, Readonly; modelRgbaValue: PropType; defaultValue: PropType; value: PropType; opacity: { type: PropType; default: boolean; }; backgroundColor: PropType; disabled: PropType; id: PropType; ariaLabelledBy: PropType; ariaDescribedBy: PropType; tabIndex: PropType; innerTabIndex: { type: PropType; default: any; }; size: PropType<"small" | "medium" | "large">; class: PropType; adaptive: PropType; }>> & Readonly<{ onBlur?: (event: ColorGradientBlurEvent) => any; onChange?: (event: ColorGradientChangeEvent) => any; onFocus?: (event: ColorGradientFocusEvent) => any; onKeydown?: (event: KeyboardEvent) => any; onChangemodel?: (value: string) => any; "onUpdate:modelValue"?: (value: string) => any; "onUpdate:modelRgbaValue"?: (value: string) => any; }>, { opacity: boolean; innerTabIndex: number; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * The arguments for the `onBlur` ColorGradient event. */ export declare interface ColorGradientBlurEvent { /** * The native FocusEvent from the DOM. */ event: FocusEvent; } /** * The arguments for the `onChange` ColorGradient event. */ export declare interface ColorGradientChangeEvent { /** * The current value of the ColorGradient. */ value: string; /** * The current value of the ColorGradient in RGBA format. */ rgbaValue: string; /** * The native Event from the DOM. */ event: Event; /** * The ColorGradient component instance. */ target?: any; } /** * The arguments for the `onFocus` ColorGradient event. */ export declare interface ColorGradientFocusEvent { /** * The native FocusEvent from the DOM. */ event: FocusEvent; } /** * 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` * * @default undefined */ size?: 'small' | 'medium' | 'large'; /** * @hidden * Internal prop that determines whether the ColorGradient is in adaptive state. */ adaptive?: boolean; } /** * @hidden */ export declare const ColorPalette: DefineComponent; default: string; }; columns: PropType; tileSize: { type: PropType; }; modelValue: PropType; modelRgbaValue: PropType; defaultValue: PropType; value: PropType; disabled: PropType; tabIndex: PropType; id: PropType; class: PropType; ariaLabelledBy: PropType; ariaDescribedBy: PropType; size: { type: PropType<"small" | "medium" | "large">; }; }>, {}, { 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: (event: KeyboardEvent) => true; focus: (event: ColorPaletteFocusEvent) => true; blur: (event: ColorPaletteBlurEvent) => true; changemodel: (value: string) => true; 'update:modelValue': (value: string) => true; 'update:modelRgbaValue': (value: string) => true; change: (event: ColorPaletteChangeEvent) => true; }, string, PublicProps, Readonly; default: string; }; columns: PropType; tileSize: { type: PropType; }; modelValue: PropType; modelRgbaValue: PropType; defaultValue: PropType; value: PropType; disabled: PropType; tabIndex: PropType; id: PropType; class: PropType; ariaLabelledBy: PropType; ariaDescribedBy: PropType; size: { type: PropType<"small" | "medium" | "large">; }; }>> & Readonly<{ onBlur?: (event: ColorPaletteBlurEvent) => any; onChange?: (event: ColorPaletteChangeEvent) => any; onFocus?: (event: ColorPaletteFocusEvent) => any; onKeydown?: (event: KeyboardEvent) => any; onChangemodel?: (value: string) => any; "onUpdate:modelValue"?: (value: string) => any; "onUpdate:modelRgbaValue"?: (value: string) => any; }>, { palette: string | string[]; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * The arguments for the `onBlur` ColorPalette event. */ export declare interface ColorPaletteBlurEvent { /** * The native FocusEvent from the DOM. */ event: FocusEvent; } /** * 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; /** * The native Event from the DOM. */ event: Event; /** * The ColorPalette component instance. */ component?: any; } /** * The arguments for the `onFocus` ColorPalette event. */ export declare interface ColorPaletteFocusEvent { /** * The native FocusEvent from the DOM. */ event: FocusEvent; } /** * 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` * * @default undefined */ size?: '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; modelRgbaValue: PropType; value: { type: PropType; default: any; }; defaultValue: PropType; disabled: PropType; dir: PropType; id: PropType; ariaLabelledBy: PropType; ariaDescribedBy: PropType; showClearButton: { type: PropType; default: boolean; }; showPreview: { type: PropType; default: boolean; }; showButtons: { type: PropType; default: boolean; }; paletteSettings: { type: PropType; default: () => { palette: string; }; }; valid: { type: PropType; default: boolean; }; tabIndex: { type: PropType; default: number; }; title: PropType; icon: PropType; svgIcon: PropType; iconClassName: PropType; popupSettings: { type: PropType; default: () => {}; }; gradientSettings: { type: PropType; default: () => { opacity: boolean; }; }; flatColorPickerSettings: { type: PropType; default: () => {}; }; open: { type: PropType; default: any; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; rounded: { type: PropType<"small" | "medium" | "large" | "full" | "none">; validator: (value: string) => boolean; }; fillMode: { type: PropType<"flat" | "solid" | "outline">; validator: (value: string) => boolean; }; view: { type: PropType; default: string; validator: (value: any) => any; }; selectedView: { type: PropType; default: any; }; adaptive: { type: PropType; default: boolean; }; adaptiveTitle: { type: PropType; }; }>, {}, { 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: () => true; close: () => true; changemodel: (value: string) => true; 'update:modelValue': (value: string) => true; 'update:modelRgbaValue': (value: string) => true; activecolorclick: (event: ColorPickerActiveColorClick) => true; focus: (event: ColorPickerFocusEvent) => true; blur: (event: ColorPickerBlurEvent) => true; change: (event: ColorPickerChangeEvent) => true; viewchange: (event: FlatColorPickerViewChangeEvent) => true; }, string, PublicProps, Readonly; modelRgbaValue: PropType; value: { type: PropType; default: any; }; defaultValue: PropType; disabled: PropType; dir: PropType; id: PropType; ariaLabelledBy: PropType; ariaDescribedBy: PropType; showClearButton: { type: PropType; default: boolean; }; showPreview: { type: PropType; default: boolean; }; showButtons: { type: PropType; default: boolean; }; paletteSettings: { type: PropType; default: () => { palette: string; }; }; valid: { type: PropType; default: boolean; }; tabIndex: { type: PropType; default: number; }; title: PropType; icon: PropType; svgIcon: PropType; iconClassName: PropType; popupSettings: { type: PropType; default: () => {}; }; gradientSettings: { type: PropType; default: () => { opacity: boolean; }; }; flatColorPickerSettings: { type: PropType; default: () => {}; }; open: { type: PropType; default: any; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; rounded: { type: PropType<"small" | "medium" | "large" | "full" | "none">; validator: (value: string) => boolean; }; fillMode: { type: PropType<"flat" | "solid" | "outline">; validator: (value: string) => boolean; }; view: { type: PropType; default: string; validator: (value: any) => any; }; selectedView: { type: PropType; default: any; }; adaptive: { type: PropType; default: boolean; }; adaptiveTitle: { type: PropType; }; }>> & Readonly<{ onBlur?: (event: ColorPickerBlurEvent) => any; onChange?: (event: ColorPickerChangeEvent) => any; onClose?: () => any; onFocus?: (event: ColorPickerFocusEvent) => any; onChangemodel?: (value: string) => any; "onUpdate:modelValue"?: (value: string) => any; "onUpdate:modelRgbaValue"?: (value: string) => any; onOpen?: () => any; onViewchange?: (event: FlatColorPickerViewChangeEvent) => any; onActivecolorclick?: (event: ColorPickerActiveColorClick) => any; }>, { value: string; tabIndex: number; view: string; adaptive: boolean; valid: boolean; showClearButton: boolean; open: boolean; popupSettings: ColorPickerPopupSettings_2; 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. */ export declare interface ColorPickerActiveColorClick { /** * The current value of the ColorPicker. */ value: string; /** * The native Event from the DOM. */ event: Event; /** * The ColorPicker component instance. */ target?: any; } /** * The arguments for the `onBlur` ColorPicker event. */ export declare interface ColorPickerBlurEvent { /** * The native FocusEvent from the DOM. */ event: FocusEvent; } /** * 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; /** * The event from the child component (ColorPalette or FlatColorPicker). */ event: any; /** * The ColorPicker component instance. */ target?: any; } /** * The arguments for the `onFocus` ColorPicker event. */ export declare interface ColorPickerFocusEvent { /** * The native FocusEvent from the DOM. */ event: FocusEvent; } /** * 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; /** * 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; } /** * 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. */ 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 * * @default undefined */ size?: 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the ColorPicker. * * The available options are: * - none * - small * - medium * - large * - full * * @default undefined */ rounded?: 'none' | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `fillMode` of the ColorPicker. * * The available options are: * - solid * - outline * - flat * * @default undefined */ fillMode?: 'solid' | 'flat' | 'outline'; /** * 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; modelRgbaValue: PropType; value: PropType; prevValue: PropType; tabIndex: PropType; disabled: PropType; view: { type: PropType; default: string; validator: (value: any) => boolean; }; selectedView: { type: PropType; default: any; }; header: PropType; footer: PropType; showClearButton: { type: PropType; default: boolean; }; showPreview: { type: PropType; default: boolean; }; showButtons: { type: PropType; default: boolean; }; gradientSettings: { type: PropType; default: () => { opacity: boolean; }; }; paletteSettings: { type: PropType; default: () => { palette: string; }; }; size: { type: PropType<"small" | "medium" | "large">; }; adaptive: PropType; }>, {}, { 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: FocusEvent): void; onBlur(event: FocusEvent): void; onFocusout(event: FocusEvent): void; }, ComponentOptionsMixin, ComponentOptionsMixin, { viewchange: (event: FlatColorPickerViewChangeEvent) => true; changemodel: (value: string) => true; 'update:modelValue': (value: string) => true; 'update:modelRgbaValue': (value: string) => true; focus: (event: FlatColorPickerFocusEvent) => true; blur: (event: FlatColorPickerBlurEvent) => true; focusout: (event: FlatColorPickerFocusoutEvent) => true; keydown: (event: KeyboardEvent) => true; change: (event: ColorPickerChangeEvent) => true; }, string, PublicProps, Readonly; modelRgbaValue: PropType; value: PropType; prevValue: PropType; tabIndex: PropType; disabled: PropType; view: { type: PropType; default: string; validator: (value: any) => boolean; }; selectedView: { type: PropType; default: any; }; header: PropType; footer: PropType; showClearButton: { type: PropType; default: boolean; }; showPreview: { type: PropType; default: boolean; }; showButtons: { type: PropType; default: boolean; }; gradientSettings: { type: PropType; default: () => { opacity: boolean; }; }; paletteSettings: { type: PropType; default: () => { palette: string; }; }; size: { type: PropType<"small" | "medium" | "large">; }; adaptive: PropType; }>> & Readonly<{ onBlur?: (event: FlatColorPickerBlurEvent) => any; onChange?: (event: ColorPickerChangeEvent) => any; onFocus?: (event: FlatColorPickerFocusEvent) => any; onFocusout?: (event: FlatColorPickerFocusoutEvent) => any; onKeydown?: (event: KeyboardEvent) => any; onChangemodel?: (value: string) => any; "onUpdate:modelValue"?: (value: string) => any; "onUpdate:modelRgbaValue"?: (value: string) => any; onViewchange?: (event: FlatColorPickerViewChangeEvent) => any; }>, { view: string; showClearButton: boolean; selectedView: number; showPreview: boolean; showButtons: boolean; gradientSettings: ColorGradientProps_2; paletteSettings: ColorPickerPaletteSettings; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * The arguments for the `onBlur` event of the FlatColorPicker. */ export declare interface FlatColorPickerBlurEvent { /** * The native browser blur event. */ event: FocusEvent; } /** * The arguments for the `onFocus` event of the FlatColorPicker. */ export declare interface FlatColorPickerFocusEvent { /** * The native browser focus event. */ event: FocusEvent; } /** * The arguments for the `onFocusout` event of the FlatColorPicker. */ export declare interface FlatColorPickerFocusoutEvent { /** * The native browser focusout event. */ event: FocusEvent; } /** * @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` * * @default undefined */ size?: '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; default: any; }; disabled: { type: PropType; default: any; }; defaultValue: { type: PropType; default: string; }; value: { type: PropType; }; label: { type: PropType; }; placeholder: { type: PropType; }; required: { type: PropType; default: boolean; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; rounded: { type: PropType<"small" | "medium" | "large" | "full" | "none">; validator: (value: string) => boolean; }; fillMode: { type: PropType<"flat" | "solid" | "outline">; validator: (value: string) => boolean; }; dir: { type: PropType; }; id: PropType; valid: { type: PropType; default: any; }; validate: { type: PropType; }; validationMessage: { type: PropType; }; validityStyles: { type: PropType; default: boolean; }; inputClass: PropType; tabIndex: PropType; ariaLabel: PropType; ariaLabelledBy: PropType; ariaDescribedBy: PropType; }>, { inputRef: Ref; }, { 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: FocusEvent): void; emitBlur(e: FocusEvent): 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: (event: any) => true; change: (event: any) => true; changemodel: (value: string | number) => true; 'update:modelValue': (value: string | number) => true; focus: (event: InputFocusEvent) => true; blur: (event: InputBlurEvent) => true; keyup: (event: KeyboardEvent) => true; keydown: (event: KeyboardEvent) => true; keypress: (event: KeyboardEvent) => true; }, string, PublicProps, Readonly; default: any; }; disabled: { type: PropType; default: any; }; defaultValue: { type: PropType; default: string; }; value: { type: PropType; }; label: { type: PropType; }; placeholder: { type: PropType; }; required: { type: PropType; default: boolean; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; rounded: { type: PropType<"small" | "medium" | "large" | "full" | "none">; validator: (value: string) => boolean; }; fillMode: { type: PropType<"flat" | "solid" | "outline">; validator: (value: string) => boolean; }; dir: { type: PropType; }; id: PropType; valid: { type: PropType; default: any; }; validate: { type: PropType; }; validationMessage: { type: PropType; }; validityStyles: { type: PropType; default: boolean; }; inputClass: PropType; tabIndex: PropType; ariaLabel: PropType; ariaLabelledBy: PropType; ariaDescribedBy: PropType; }>> & Readonly<{ onInput?: (event: any) => any; onBlur?: (event: InputBlurEvent) => any; onChange?: (event: any) => any; onFocus?: (event: InputFocusEvent) => any; onKeydown?: (event: KeyboardEvent) => any; onKeypress?: (event: KeyboardEvent) => any; onKeyup?: (event: KeyboardEvent) => any; onChangemodel?: (value: string | number) => any; "onUpdate:modelValue"?: (value: string | number) => any; }>, { required: boolean; disabled: boolean; modelValue: string | number; defaultValue: string | number | string[]; valid: boolean; validityStyles: boolean; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * The arguments for the `onBlur` event of the Input. */ export declare interface InputBlurEvent { /** * The native browser blur event. */ event: FocusEvent; } /** * The arguments for the `onFocus` event of the Input. */ export declare interface InputFocusEvent { /** * The native browser focus event. */ event: FocusEvent; } /** * 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 * * @default undefined */ size?: 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the Input. * * The available options are: * - none * - small * - medium * - large * - full * * @default undefined */ rounded?: 'none' | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `fillMode` of the Input. * * The available options are: * - solid * - outline * - flat * * @default undefined */ fillMode?: 'solid' | 'flat' | 'outline'; 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?: (event: any) => void; /** * Fires when the input is focused. */ onFocus?: (event: any) => void; /** * Fires when the input is blurred. */ onBlur?: (event: any) => void; /** * Fires when the 'keyup' input event is triggered. */ onKeyup?: (event: any) => void; /** * Fires when the 'keydown' input event is triggered. */ onKeydown?: (event: any) => void; /** * Fires when the 'keypress' input event is triggered. */ onKeypress?: (event: any) => void; /** * Specifies the placeholder of an `input` element. Used to define if the input is empty. */ placeholder?: string; /** * Defines a string prop that controls the input icon. * * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component. */ iconName?: string; /** * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component. * * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component. */ inputPrefix?: boolean | string | object | Function; /** * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component. * * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component. */ inputSuffix?: boolean | string | object | Function; /** * Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'. * * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component. */ showValidationIcon?: boolean; /** * Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'. * * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component. */ showLoadingIcon?: boolean; /** * * Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'. * * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component. */ showClearButton?: boolean; /** * Defines additional class to the wrapper element. * * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component. */ wrapperClass?: string; /** * Defines tabindex to the input element. */ tabIndex?: number; /** * Defines additional class to the input element. */ inputClass?: string; /** * Defines a string value that labels an interactive element. */ ariaLabel?: string; /** * Identifies the element(s) which will label the component. */ ariaDescribedBy?: string; /** * Defines a string value that labels an interactive element. */ ariaLabelledBy?: string; /** * Defines the built-in [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength) property of the text inputs. * * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `minlength`. Camel-case and kebap-case won't work in this scenario. */ minlength?: string; /** * Defines the built-in [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength) property of the text inputs. * * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `maxlength`. Camel-case and kebap-case won't work in this scenario. */ maxlength?: string; } /** * Represents the Kendo UI for Vue InputSeparator component. It can be used as a separator * between horizontal icons in prefix and suffix templates. * * ```jsx * * ``` */ export declare const InputSeparator: DefineComponent InputSeparatorOrientation; default: InputSeparatorOrientation; }; }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly InputSeparatorOrientation; default: InputSeparatorOrientation; }; }>> & Readonly<{}>, { orientation: InputSeparatorOrientation; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * Specifies the orientation direction of the InputSeparator. * * The possible values are: * * `vertical` (Default) — InputSeparator is displayed vertically. * * `horizontal` — InputSeparator is displayed horizontally. */ export declare type InputSeparatorOrientation = 'horizontal' | 'vertical'; /** * @hidden */ export declare const MaskedTextBox: DefineComponent; default: string; }; modelValue: PropType; modelRawValue: PropType; value: PropType; defaultValue: PropType; placeholder: PropType; title: PropType; dir: PropType; id: PropType; ariaLabelledBy: PropType; ariaDescribedBy: PropType; tabIndex: PropType; accessKey: PropType; disabled: PropType; readonly: PropType; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; rounded: { type: PropType<"small" | "medium" | "large" | "full" | "none">; validator: (value: string) => boolean; }; fillMode: { type: PropType<"flat" | "solid" | "outline">; validator: (value: string) => boolean; }; prompt: { type: PropType; default: string; }; promptPlaceholder: { type: PropType; default: string; }; includeLiterals: { type: PropType; default: boolean; }; maskValidation: { type: PropType; default: boolean; }; mask: PropType; rules: { type: PropType<{ [key: string]: RegExp; }>; default: () => { [key: string]: RegExp; }; }; selection: PropType<{ start: number; end: number; }>; name: PropType; label: PropType; validationMessage: PropType; required: { type: PropType; default: boolean; }; valid: { type: PropType; default: any; }; validityStyles: { type: PropType; default: boolean; }; iconName: PropType; inputPrefix: { type: (ObjectConstructor | BooleanConstructor | StringConstructor | FunctionConstructor)[]; default: () => any; }; inputSuffix: { type: (ObjectConstructor | BooleanConstructor | StringConstructor | FunctionConstructor)[]; default: () => any; }; showValidationIcon: PropType; showLoadingIcon: PropType; showClearButton: PropType; inputClass: PropType; wrapperClass: PropType; inputAttributes: PropType; }>, { inputRef: Ref; }, { currentValue: any; currentFocused: boolean; inputValue: any; currentSelection: any[]; }, { computedRules(): any; spanClassNames(): { [x: number]: any; 'k-floating-label-container': boolean; 'k-focus': any; 'k-empty': boolean; 'k-invalid': boolean; 'k-rtl': boolean; 'k-loading': any; }; wrapperSpanClass(): { [x: string]: any; [x: number]: any; 'k-maskedtextbox': boolean; 'k-input': boolean; 'k-invalid': boolean; 'k-required': any; 'k-disabled': any; 'k-loading': any; }; inputInnerClass(): { [x: number]: any; 'k-input-inner': boolean; }; }, { focus(): void; computedValue(): any; rawValue(): string; validity(): FormComponentValidity; pasteHandler(event: any): void; clearClick(event: any): void; onChangeHandler(event: any): void; focusHandler(event: FocusEvent): void; blurHandler(event: FocusEvent): void; triggerOnChange(maskedValue: string, event: any): void; updateService(extra?: any): void; setValidity(): void; }, ComponentOptionsMixin, ComponentOptionsMixin, { change: (event: any) => true; focus: (event: MaskedTextBoxFocusEvent) => true; blur: (event: MaskedTextBoxBlurEvent) => true; 'update:modelValue': (value: string) => true; 'update:modelRawValue': (value: string) => true; changemodel: (value: string) => true; }, string, PublicProps, Readonly; default: string; }; modelValue: PropType; modelRawValue: PropType; value: PropType; defaultValue: PropType; placeholder: PropType; title: PropType; dir: PropType; id: PropType; ariaLabelledBy: PropType; ariaDescribedBy: PropType; tabIndex: PropType; accessKey: PropType; disabled: PropType; readonly: PropType; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; rounded: { type: PropType<"small" | "medium" | "large" | "full" | "none">; validator: (value: string) => boolean; }; fillMode: { type: PropType<"flat" | "solid" | "outline">; validator: (value: string) => boolean; }; prompt: { type: PropType; default: string; }; promptPlaceholder: { type: PropType; default: string; }; includeLiterals: { type: PropType; default: boolean; }; maskValidation: { type: PropType; default: boolean; }; mask: PropType; rules: { type: PropType<{ [key: string]: RegExp; }>; default: () => { [key: string]: RegExp; }; }; selection: PropType<{ start: number; end: number; }>; name: PropType; label: PropType; validationMessage: PropType; required: { type: PropType; default: boolean; }; valid: { type: PropType; default: any; }; validityStyles: { type: PropType; default: boolean; }; iconName: PropType; inputPrefix: { type: (ObjectConstructor | BooleanConstructor | StringConstructor | FunctionConstructor)[]; default: () => any; }; inputSuffix: { type: (ObjectConstructor | BooleanConstructor | StringConstructor | FunctionConstructor)[]; default: () => any; }; showValidationIcon: PropType; showLoadingIcon: PropType; showClearButton: PropType; inputClass: PropType; wrapperClass: PropType; inputAttributes: PropType; }>> & Readonly<{ onBlur?: (event: MaskedTextBoxBlurEvent) => any; onChange?: (event: any) => any; onFocus?: (event: MaskedTextBoxFocusEvent) => any; onChangemodel?: (value: string) => any; "onUpdate:modelValue"?: (value: string) => any; "onUpdate:modelRawValue"?: (value: string) => any; }>, { type: string; required: boolean; valid: boolean; validityStyles: boolean; inputPrefix: string | boolean | Function | Record; inputSuffix: string | boolean | Function | Record; prompt: string; promptPlaceholder: string; rules: { [key: string]: RegExp; }; includeLiterals: boolean; maskValidation: boolean; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * The arguments for the `onBlur` event of the MaskedTextBox. */ export declare interface MaskedTextBoxBlurEvent { /** * The native browser blur event. */ event: FocusEvent; } /** * The arguments for the `change` event of the MaskedTextBox. */ export declare interface MaskedTextBoxChangeEvent extends MaskedTextBoxEvent { /** * Specifies the start of the selection which will be set to the MaskedTextBox when it is updated. */ selectionStart: number; /** * Specifies the end of the selection which will be set to the MaskedTextBox when it is updated. */ selectionEnd: number; /** * The current value of the component. */ value: any; } /** * The arguments for a MaskedTextBox event. */ export declare interface MaskedTextBoxEvent { /** * A native DOM event. */ event: Event; /** * An event target. */ target: any; } /** * The arguments for the `onFocus` event of the MaskedTextBox. */ export declare interface MaskedTextBoxFocusEvent { /** * The native browser focus event. */ event: FocusEvent; } /** * Represents the props of the [Kendo UI for Vue MaskedTextBox component]({% slug overview_maskedtextbox %}). */ export declare interface MaskedTextBoxProps extends FormComponentProps { /** * Specifies the value of the MaskedTextBox. */ value?: string; /** * Specifies the initial value. Leaves the subsequent updates uncontrolled. */ defaultValue?: string; /** * Specifies the input placeholder. */ placeholder?: string; /** * Sets the title of the `input` element of the MaskedTextBox. */ title?: string; /** * Represents the `dir` HTML attribute. */ dir?: string; /** * Configures the `size` of the MaskedTextBox. * * The available options are: * - small * - medium * - large * * @default undefined */ size?: 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the MaskedTextBox. * * The available options are: * - none * - small * - medium * - large * - full * * @default undefined */ rounded?: 'none' | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `fillMode` of the MaskedTextBox. * * The available options are: * - solid * - outline * - flat * * @default undefined */ fillMode?: 'solid' | 'flat' | 'outline'; /** * Sets the `tabIndex` property of the MaskedTextBox. */ tabIndex?: number; /** * Specifies the `accessKey` of the MaskedTextBox. */ accessKey?: string; /** * Specifies the width of the MaskedTextBox. */ width?: number | string; /** * Determines whether the MaskedTextBox is disabled. */ disabled?: boolean; /** * Renders a floating label for the MaskedTextBox. */ label?: string; /** * Sets the `id` of the `input` DOM element. */ 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; /** * Determines whether the MaskedTextBox is in its read-only state. */ readonly?: boolean; /** * Represents a prompt character for the masked value. Defaults to `_`. */ prompt?: string; /** * Indicates a character which represents an empty position in the raw value. Defaults to ` `. */ promptPlaceholder?: string; /** * Indicates whether to include literals in the raw value. Defaults to `false`. */ includeLiterals?: boolean; /** * Determines whether the built-in mask validator is enforced when a form is validated. Defaults to `true`. */ maskValidation?: boolean; /** * Represents the current mask. If no mask is set, the component behaves as a standard `type="text"` input. */ mask?: string; /** * Represents the RegExp-based mask validation array. */ rules?: { [key: string]: RegExp; }; /** * Represents the beginning and ending of the selected portion of the input content that will be applied the next time when the MaskedTextBox is rendered. */ selection?: { start: number; end: number; }; /** * Determines the event handler that will be fired when the user edits the value. */ onChange?: (event: MaskedTextBoxChangeEvent) => void; /** * Fires each time the user focuses the MaskedTextBox. */ onFocus?: (event: MaskedTextBoxEvent) => void; /** * Fires each time the MaskedTextBox gets blurred. */ onBlur?: (event: MaskedTextBoxEvent) => void; /** * v-model raw value */ modelRawValue?: string; /** * v-model value */ modelValue?: string; /** * The type of the input - 'text' by default */ type?: string; /** * Defines a string prop that controls the input icon. This property works only with the Kendo UI for Vue FontIcons. * Check the [Icons]({% slug icons %}) article for more information about how the Font Icon can be loaded to your project. */ iconName?: String; /** * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component. */ inputPrefix?: Boolean | String | Object | Function; /** * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component. */ inputSuffix?: Boolean | String | Object | Function; /** * Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'. */ showValidationIcon?: Boolean; /** * Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'. */ showLoadingIcon?: Boolean; /** * Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'. */ showClearButton?: Boolean; /** * Defines additional class to the inner input element. */ inputClass?: String; /** * Defines additional class to the wrapper element. */ wrapperClass?: String; /** * Sets the built-in HTML attributes of the inner focusable input element. * Attributes which are essential for certain component functionalities cannot be changed. */ inputAttributes?: Object; } /** * @hidden */ export declare const NumericTextBox: DefineComponent; value: PropType; defaultValue: PropType; step: { type: PropType; default: number; }; format: PropType; tabIndex: PropType; accessKey: PropType; title: PropType; placeholder: PropType; min: PropType; max: PropType; spinners: { type: PropType; default: boolean; }; disabled: { type: PropType; default: boolean; }; dir: PropType; name: PropType; label: PropType; validationMessage: PropType; validityStyles: { type: PropType; default: boolean; }; valid: { type: PropType; default: any; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; rounded: { type: PropType<"small" | "medium" | "large" | "full" | "none">; validator: (value: string) => boolean; }; fillMode: { type: PropType<"flat" | "solid" | "outline">; validator: (value: string) => boolean; }; required: { type: PropType; default: boolean; }; id: PropType; ariaLabel: PropType; iconName: PropType; inputPrefix: PropType; inputSuffix: PropType; showValidationIcon: PropType; showLoadingIcon: PropType; showClearButton: PropType; inputClass: PropType; inputType: { type: PropType; default: string; }; wrapperClass: PropType; inputAttributes: PropType; }>, { inputRef: Ref; elementWrapperRef: Ref; kendoLocalizationService: {}; kendoIntlService: {}; }, { hasMounted: boolean; isInvalid: boolean; isEmpty: boolean; currentValue: number; valueDuringOnChange: number; currentLooseValue: string; selectionStart: number; selectionEnd: number; decimalSelect: boolean; focused: boolean; forceUpdate: boolean; }, { computedValue(): number | undefined; looseValue(): string; spanClassNames(): { [x: number]: any; 'k-floating-label-container': boolean; 'k-focus': any; 'k-empty': boolean; 'k-invalid': boolean; 'k-rtl': boolean; }; wrapperClassNames(): { [x: string]: any; [x: number]: any; 'k-input': boolean; 'k-numerictextbox': boolean; 'k-invalid': boolean; 'k-required': any; 'k-disabled': any; 'k-loading': any; }; inputInnerClass(): { [x: number]: any; 'k-input-inner': boolean; }; }, { validity(): FormComponentValidity; clearClick(event: any): void; focus(): void; emitFocus(e: FocusEvent): void; emitBlur(e: FocusEvent): void; handleFocus(_: any): void; handleBlur(_: any): void; setValidity(): void; getCurrentState(): { eventValue: number; prevLooseValue: any; currentLooseValue: any; selectionStart: any; selectionEnd: any; decimalSelect: boolean; valueIsCorrected: boolean; valueIsOutOfRange: boolean; isPaste: any; focused: any; }; parseNumber(text: string): number; elementChange(event: any): void; triggerChange(event: any, newState: NumericTextBoxData): void; onPasteHandler(_event: any): void; increase(event: any): void; decrease(event: any): void; wheel(event: any): void; keyDown(event: any): void; spinnersWrapperMouseDown(e: any): void; }, ComponentOptionsMixin, ComponentOptionsMixin, { change: (event: NumericTextBoxChangeEvent) => true; changemodel: (value: number | null) => true; 'update:modelValue': (value: number | null) => true; focus: (event: NumericTextBoxFocusEvent) => true; blur: (event: NumericTextBoxBlurEvent) => true; }, string, PublicProps, Readonly; value: PropType; defaultValue: PropType; step: { type: PropType; default: number; }; format: PropType; tabIndex: PropType; accessKey: PropType; title: PropType; placeholder: PropType; min: PropType; max: PropType; spinners: { type: PropType; default: boolean; }; disabled: { type: PropType; default: boolean; }; dir: PropType; name: PropType; label: PropType; validationMessage: PropType; validityStyles: { type: PropType; default: boolean; }; valid: { type: PropType; default: any; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; rounded: { type: PropType<"small" | "medium" | "large" | "full" | "none">; validator: (value: string) => boolean; }; fillMode: { type: PropType<"flat" | "solid" | "outline">; validator: (value: string) => boolean; }; required: { type: PropType; default: boolean; }; id: PropType; ariaLabel: PropType; iconName: PropType; inputPrefix: PropType; inputSuffix: PropType; showValidationIcon: PropType; showLoadingIcon: PropType; showClearButton: PropType; inputClass: PropType; inputType: { type: PropType; default: string; }; wrapperClass: PropType; inputAttributes: PropType; }>> & Readonly<{ onBlur?: (event: NumericTextBoxBlurEvent) => any; onChange?: (event: NumericTextBoxChangeEvent) => any; onFocus?: (event: NumericTextBoxFocusEvent) => any; onChangemodel?: (value: number) => any; "onUpdate:modelValue"?: (value: number) => any; }>, { required: boolean; disabled: boolean; valid: boolean; validityStyles: boolean; step: number; spinners: boolean; inputType: string; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * The arguments for the `onBlur` event of the NumericTextBox. */ export declare interface NumericTextBoxBlurEvent { /** * The native browser blur event. */ event: FocusEvent; } /** * The arguments for the `change` event of the NumericTextBox. */ export declare interface NumericTextBoxChangeEvent { /** * The current value of the NumericTextBox. */ value: number | null; /** * The native event. */ event: any; } /** * @hidden */ export declare interface NumericTextBoxComputed { [key: string]: any; wrapperClassNames: any; computedValue?: number; looseValue?: string; spanClassNames: any; } /** * @hidden */ declare interface NumericTextBoxData { eventValue: number | null | undefined; prevLooseValue: string | undefined; currentLooseValue: string | undefined; selectionStart: number | undefined; selectionEnd: number | undefined; decimalSelect: boolean; valueIsCorrected: boolean; valueIsOutOfRange: boolean; focused: boolean; isPaste: boolean; } /** * The arguments for the `onFocus` event of the NumericTextBox. */ export declare interface NumericTextBoxFocusEvent { /** * The native browser focus event. */ event: FocusEvent; } /** * @hidden */ export declare const RadioButton: DefineComponent; checked: PropType; disabled: PropType; className: PropType; content: PropType; dataItem: PropType; id: PropType; label: PropType; labelRender: PropType; item: PropType; labelPlacement: PropType; name: PropType; index: PropType; tag: { type: PropType; default: string; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; tabIndex: PropType; value: PropType; valid: { type: PropType; default: any; }; role: PropType; }>, { inputRef: Ref; }, {}, { inputClassName(): object; }, { focusElement(): void; handleChange(event: any): void; handleFocus(event: FocusEvent): void; handleBlur(event: FocusEvent): void; }, ComponentOptionsMixin, ComponentOptionsMixin, { change: (event: RadioButtonChangeEvent) => true; focus: (event: RadioButtonFocusEvent) => true; blur: (event: RadioButtonBlurEvent) => true; }, string, PublicProps, Readonly; checked: PropType; disabled: PropType; className: PropType; content: PropType; dataItem: PropType; id: PropType; label: PropType; labelRender: PropType; item: PropType; labelPlacement: PropType; name: PropType; index: PropType; tag: { type: PropType; default: string; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; tabIndex: PropType; value: PropType; valid: { type: PropType; default: any; }; role: PropType; }>> & Readonly<{ onBlur?: (event: RadioButtonBlurEvent) => any; onChange?: (event: RadioButtonChangeEvent) => any; onFocus?: (event: RadioButtonFocusEvent) => any; }>, { valid: boolean; tag: string; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * The arguments for the `onBlur` RadioButton event. */ export declare interface RadioButtonBlurEvent { /** * The native browser blur event. */ event: FocusEvent; } /** * The arguments for the `onChange` RadioButton event. */ export declare interface RadioButtonChangeEvent { /** * The value of the selected RadioButton. */ value: any; } /** * The arguments for the `onFocus` RadioButton event. */ export declare interface RadioButtonFocusEvent { /** * The native browser focus event. */ event: FocusEvent; } /** * Represents the props of the [Kendo UI for Vue RadioButton component]({% slug overview_radiobutton %}). * Extends the [native input props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement). */ export declare interface RadioButtonProps { /** * 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; /** * Specifies if the Radio button is checked. */ checked?: boolean; /** * Specifies the class applied to the input element. */ className?: string; /** * Specifies if the Radio button is disabled. */ disabled?: boolean; /** * @hidden * Used in RadioGroup scenarios with a custom template to pass dataItem data to the template */ dataItem?: object; /** * Specifies the current index of the Radio button. */ index?: number; /** * Sets the `id` of the Radio button. */ id?: string; /** * Sets the label of the Radio button ([see example]({% slug labels_radiobutton %})). */ label?: string; /** * Sets the label render template of the Radio button component. * Accepts a slot name, a `render` function, or a Vue component. */ labelRender?: any; /** * Sets the item content template of the Radio button component. * Accepts a slot name, a `render` function, or a Vue component. */ content?: any; /** * Sets the item render template of the Radio button component. * Accepts a slot name, a `render` function, or a Vue component. */ item?: any; /** * Sets the label position of the Radio button ([see example]({% slug labels_radiobutton %})). * Accepts two options: `before` or `after`. Defaults to `after`. */ labelPlacement?: string; /** * Sets the `name` property of the Radio button. */ name?: string; /** * Sets the `tag` property of the Radio button wrapping element. */ tag?: string; /** * Configures the `size` of the RadioButton. * * The available options are: * - small * - medium * - large * * @default undefined */ size?: 'small' | 'medium' | 'large'; /** * Sets the `tabIndex` property of the Radio button. * Defaults to `0`. */ tabIndex?: number; /** * Overrides the validity state of the component. * If `valid` is set, the `required` property will be ignored. */ valid?: boolean; /** * Sets the value to be submitted. */ value?: any; /** * Represents the `role` HTML attribute. */ role?: string; /** * The event handler that will be fired when the changes the selected value. */ onChange?: (event: RadioButtonChangeEvent) => void; /** * The event handler that will be fired when RadioButton is focused. */ onFocus?: (event: RadioButtonFocusEvent) => void; /** * The event handler that will be fired when RadioButton is blurred. */ onBlur?: (event: RadioButtonBlurEvent) => void; } /** * @hidden */ export declare const RadioGroup: DefineComponent any; }; name: StringConstructor; modelValue: (ObjectConstructor | StringConstructor | NumberConstructor)[]; value: (ObjectConstructor | StringConstructor | NumberConstructor)[]; valid: { type: BooleanConstructor; default: any; }; }>, { inputRef: Ref; }, { rtl: boolean; stateChecked: any; }, { radioGroupClasses(): any; checkedRadioValue(): any; currentDir(): any; }, { focusElement(): void; handleChange(event: RadioButtonChangeEvent): void; handleFocus(event: RadioButtonFocusEvent): void; handleBlur(event: RadioButtonBlurEvent): void; }, ComponentOptionsMixin, ComponentOptionsMixin, { changemodel: (value: any) => true; 'update:modelValue': (value: any) => true; change: (event: RadioGroupChangeEvent) => true; focus: (event: RadioGroupFocusEvent) => true; blur: (event: RadioGroupBlurEvent) => true; }, string, PublicProps, Readonly any; }; name: StringConstructor; modelValue: (ObjectConstructor | StringConstructor | NumberConstructor)[]; value: (ObjectConstructor | StringConstructor | NumberConstructor)[]; valid: { type: BooleanConstructor; default: any; }; }>> & Readonly<{ onBlur?: (event: RadioGroupBlurEvent) => any; onChange?: (event: RadioGroupChangeEvent) => any; onFocus?: (event: RadioGroupFocusEvent) => any; onChangemodel?: (value: any) => any; "onUpdate:modelValue"?: (value: any) => any; }>, { item: string; disabled: boolean; valid: boolean; layout: string; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * The arguments for the `onBlur` event of the RadioGroup. */ export declare interface RadioGroupBlurEvent { /** * The native browser blur event. */ event: FocusEvent; } /** * The arguments for the `onChange` RadioGroup event. */ export declare interface RadioGroupChangeEvent { /** * The value of the selected RadioButton. */ value: any; } /** * The arguments for the `onFocus` RadioGroup event. */ export declare interface RadioGroupFocusEvent { /** * The native browser focus event. */ event: FocusEvent; } /** * Represents the props of the [Kendo UI for Vue RadioGroup component]({% slug overview_radiobutton %}). */ export declare interface RadioGroupProps { /** * Identifies the element(s) which will describe the component, similar to HTML * [aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute) * 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 collection of radio buttons that will * be rendered in the RadioGroup ([see example]({% slug overview_radiobutton %})). */ dataItems?: Array; /** * Sets the default checked state of a radio button when used in * uncontrolled mode ([see example]({% slug overview_radiobutton %})). * The `checked` property is passed to the underlying `input` element. */ defaultValue?: any; /** * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL. */ dir?: string; /** * Disable all radio buttons ([see example]({% slug disabled_radiobutton %})). */ disabled?: boolean; /** * Overrides the default component responsible for visualizing a single item. * * The default element is `li` with a [RadioButton]({% slug api_inputs_radiobuttonprops %}) as `children`. */ item?: any; /** * Sets the label position of the radio buttons. * Accepts two options: `before` or `after`. Defaults to `after`. */ labelPlacement?: string; /** * Specifies the radio group layout 'horizontal' or 'vertical'. DEfault is 'horizontal'. */ layout?: string; /** * Specifies the `name` property of the `input` DOM elements. */ name?: string; /** * The event handler that will be fired when the changes the selected value. */ onChange?: (event: RadioGroupChangeEvent) => void; /** * The event handler that will be fired when Radio button is focused. */ onFocus?: (event: RadioGroupFocusEvent) => void; /** * @hidden */ modelValue?: string | number | null; /** * Sets the default checked state of a radio * button when used in controlled mode ([see example]({% slug controlled_radiogroup %})). * The `checked` property is passed to the underlying `input` element. */ value?: string | number | null; /** * Overrides the validity state of the component. * If `valid` is set, the `required` property will be ignored. */ valid?: boolean; } /** * The range object representing the value of the RangeSlider. */ declare type Range_2 = { /** * The start of the range. */ start: number; /** * The end of the range. */ end: number; }; export { Range_2 as Range } /** * Represents the [Kendo UI for Vue Native RangeSlider component]({% slug overview_rangeslider %}). * Accepts properties of type [RangeSliderProps]({% slug api_inputs_rangesliderprops %}). * Obtaining the `ref` returns an object of type [RangeSliderHandle]({% slug api_inputs_rangesliderhandle %}). */ export declare const RangeSlider: DefineComponent boolean; }; defaultValue: { type: ObjectConstructor; default: () => { start: number; end: number; }; validator: (value: any) => boolean; }; step: { type: NumberConstructor; default: number; }; min: { type: NumberConstructor; required: true; }; max: { type: NumberConstructor; required: true; }; vertical: BooleanConstructor; disabled: BooleanConstructor; dir: { type: StringConstructor; default: string; validator: (value: any) => any; }; startTabIndex: NumberConstructor; endTabIndex: NumberConstructor; }>, { inputRef: Ref; kendoLocalizationService: {}; }, { currentValue: Record; currentDrag: string; currentDir: string; }, { computedValue(): any; percentStart(): number; percentEnd(): number; sliderItemsStyle(): { paddingTop: number; height: string; } | { paddingTop?: undefined; height?: undefined; }; trackStyles(): { marginTop: string; marginBottom: string; marginLeft?: undefined; marginRight?: undefined; } | { marginLeft: string; marginRight: string; marginTop?: undefined; marginBottom?: undefined; }; }, { dispatchStateValue(args: any): void; focus(): void; handleChange(newValue: any, event: any | DraggableDragEvent): void; calcNewDistance(event: any): any; calcKey(payload: any): "start" | "end"; handleStartKeyDown(event: any): void; handleEndKeyDown(event: any): void; handleTrackPress(event: any): void; handleTrackDrag(event: any): void; handleTrackRelease(event: any): void; }, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly boolean; }; defaultValue: { type: ObjectConstructor; default: () => { start: number; end: number; }; validator: (value: any) => boolean; }; step: { type: NumberConstructor; default: number; }; min: { type: NumberConstructor; required: true; }; max: { type: NumberConstructor; required: true; }; vertical: BooleanConstructor; disabled: BooleanConstructor; dir: { type: StringConstructor; default: string; validator: (value: any) => any; }; startTabIndex: NumberConstructor; endTabIndex: NumberConstructor; }>> & Readonly<{}>, { vertical: boolean; disabled: boolean; defaultValue: Record; dir: string; step: number; }, {}, {}, {}, string, () => { kendoMin: any; kendoMax: any; kendoVertical: any; }, true, {}, any>; /** * Represent the return type of RangeSliderChangeEvent. */ export declare interface RangeSliderChangeEvent { /** * The value from type Range - `start` and `end`. */ value: Range_2; /** * The target of the RangeSliderChangeEvent from RangeSliderHandle. */ target: RangeSliderHandle; /** * The event of the RangeSliderChangeEvent. */ event: any | DraggableDragEvent; } /** * @hidden */ export declare interface RangeSliderComputed { [key: string]: any; computedValue: any; percentStart: number; percentEnd: number; sliderItemsStyle: object; trackStyles: object; } /** * Represents the target(element and props) of the RangeSliderChangeEvent. */ export declare interface RangeSliderHandle { /** * The current element or `null` if there is no one. */ element: HTMLDivElement | null; /** * The props values of the RangeSlider. */ props: RangeSliderProps; /** * The focus event callback. */ focus: () => void; } /** * Represents the properties of [RangeSlider](% slug api_inputs_rangeslider %) component. */ export declare interface RangeSliderProps extends FormComponentProps { /** * Sets the `id` property of the top div element of the RangeSlider. */ id?: string; /** * The flexible values of type Range - `start and `end`. */ value?: Range_2; /** * The default set values of type Range - `start` and `end`. */ defaultValue?: Range_2; /** * Triggered after value change - gets outside access to the element, new values and the event type. */ onChange?: (event: RangeSliderChangeEvent) => void; /** * The step by which the value is increment/decrement. */ step?: number; /** * The minimum possible value of the RangeSlider. */ min: number; /** * The maximum possible value of the RangeSlider. */ max: number; /** * The RangeSlider orientation if true - vertical, else - horizontal. */ vertical?: boolean; /** * Determines the disabled mode of the RangeSlider, if true - disabled. */ disabled?: boolean; /** * The RangeSlider direction `ltr` or `rtl`. */ dir?: Direction | string; /** * Sets the `tabIndex` attribute to the `start` drag handle. */ startTabIndex?: number; /** * Sets the `tabIndex` attribute to the `end` drag handle. */ endTabIndex?: number; /** * 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; } /** * @hidden */ export declare const Rating: DefineComponent; default: number; }; max: { type: PropType; default: number; }; step: { type: PropType; default: number; }; item: { type: PropType; }; precision: { type: PropType<"item" | "half">; default: string; validator: (value: 'item' | 'half') => any; }; selection: { type: PropType<"single" | "continues">; default: string; validator: (value: 'continues' | 'single') => any; }; value: PropType; icon: PropType; svgIconOutline: PropType; svgIcon: PropType; tabIndex: PropType; disabled: PropType; readonly: PropType; id: PropType; half: PropType; defaultValue: PropType; label: PropType; }>, { inputRef: Ref; }, { focused: boolean; currentValue: any; currentHovered: any; }, { base(): number; computedValue(): number; }, { handleFocus(event: FocusEvent): void; handleBlur(event: FocusEvent): void; handleChange(newValue: number, event: PointerEvent): void; handleKeyDown(event: KeyboardEvent): void; handleItemClick(eventData: RatingItemMouseEvent): void; handleMouseMove(eventData: RatingItemMouseEvent): void; handleMouseLeave(eventData: RatingItemMouseEvent): void; dispatchValue(action: RatingActionDispatch): void; dispatchHover(action: RatingActionDispatch): void; }, ComponentOptionsMixin, ComponentOptionsMixin, { change: (event: RatingChangeEvent) => true; keydown: (event: RatingKeyboardEvent) => true; focus: (event: RatingFocusEvent) => true; blur: (event: RatingBlurEvent) => true; click: (event: RatingItemMouseEvent) => true; mouseleave: (event: RatingItemMouseEvent) => true; mousemove: (event: RatingItemMouseEvent) => true; }, string, PublicProps, Readonly; default: number; }; max: { type: PropType; default: number; }; step: { type: PropType; default: number; }; item: { type: PropType; }; precision: { type: PropType<"item" | "half">; default: string; validator: (value: 'item' | 'half') => any; }; selection: { type: PropType<"single" | "continues">; default: string; validator: (value: 'continues' | 'single') => any; }; value: PropType; icon: PropType; svgIconOutline: PropType; svgIcon: PropType; tabIndex: PropType; disabled: PropType; readonly: PropType; id: PropType; half: PropType; defaultValue: PropType; label: PropType; }>> & Readonly<{ onClick?: (event: RatingItemMouseEvent) => any; onBlur?: (event: RatingBlurEvent) => any; onChange?: (event: RatingChangeEvent) => any; onFocus?: (event: RatingFocusEvent) => any; onKeydown?: (event: RatingKeyboardEvent) => any; onMouseleave?: (event: RatingItemMouseEvent) => any; onMousemove?: (event: RatingItemMouseEvent) => any; }>, { selection: "single" | "continues"; step: number; min: number; max: number; precision: "item" | "half"; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * @hidden */ declare enum RATING_ACTION { select = "select", deselect = "deselect", increase = "increase", decrease = "decrease", min = "min", max = "max", reset = "reset" } /** * @hidden */ declare type RatingActionDispatch = { type: RATING_ACTION; payload?: number; event?: any; }; /** * The arguments for the `onBlur` Rating event. */ export declare interface RatingBlurEvent { /** * The native FocusEvent from the DOM. */ event: FocusEvent; } /** * Represents the return type of RatingChangeEvent. */ declare interface RatingChangeEvent { /** * The event of the RatingChangeEvent. */ event: PointerEvent; /** * The target of the RatingChangeEvent. */ target: HTMLSpanElement; /** * The current Rating value. */ value: number; } /** * The arguments for the `onFocus` Rating event. */ export declare interface RatingFocusEvent { /** * The native FocusEvent from the DOM. */ event: FocusEvent; } /** * Represents the return type of the RatingItemMouseEvent. */ declare interface RatingItemMouseEvent { /** * The event of the RatingItemMouseEvent. */ event: MouseEvent; /** * The target of the RatingItemMouseEvent. */ target: Element; /** * @hidden */ value?: number | null; } /** * Represents the return type of the RatingKeyboardEvent. */ declare interface RatingKeyboardEvent { /** * The current Rating value. */ value: number; /** * The event of the RatingKeyboardEvent. */ event: KeyboardEvent; } /** * @hidden */ declare interface RGBA { r?: number; g?: number; b?: number; a?: number; } /** * @hidden */ export declare const Signature: DefineComponent; default: number; }; smooth: PropType; popupScale: { type: PropType; default: number; }; exportScale: { type: PropType; default: number; }; modelValue: PropType; name: PropType; value: PropType; tabIndex: PropType; dir: PropType; ariaDescribedBy: PropType; ariaLabelledBy: PropType; ariaLabel: PropType; hideLine: PropType; open: { type: PropType; default: any; }; readOnly: PropType; disabled: PropType; validationMessage: PropType; maximizable: { type: PropType; default: boolean; }; color: PropType; backgroundColor: PropType; validityStyles: { type: PropType; default: boolean; }; required: { type: PropType; default: boolean; }; valid: { type: PropType; default: any; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; rounded: { type: PropType<"small" | "medium" | "large" | "full" | "none">; validator: (value: string) => boolean; }; fillMode: { type: PropType<"flat" | "solid" | "outline">; validator: (value: string) => boolean; }; }>, { inputRef: Ref; }, { focused: boolean; isDrawing: boolean; currentValue: any; popupValue: any; currentOpen: boolean; }, { wrapperClass(): any; openWrapperClass(): { [x: string]: any; 'k-input': boolean; 'k-signature': boolean; 'k-signature-maximized': boolean; 'k-invalid': boolean; 'k-required': any; 'k-disabled': any; 'k-focus': any; }; computedValue(): any; computedOpen(): any; computedColor(): any; computedBgColor(): any; }, { setRefs(): void; onOverlayClick(): void; onValueChange(nextValue?: string): void; onDialogChange(e: SignatureChangeEvent): void; reset(): void; clear(): void; loadImage(value: string): void; onDialogClose(event: any): void; exportImage(exportSize: { width: number; height: number; }): any; validityGetter(): { customError: boolean; valid: any; valueMissing: boolean; }; focusElement(): void; getImperativeHandle(): SignatureHandle; onFocus(event: any): void; onBlur(event: any): void; onMaximizeClick: (event: any) => Promise; onMinimizeClick(event: any): void; onClear(): void; elementSize(): { width: any; height: any; }; popupSize(): { width: number; height: number; }; onDraw(): void; onDrawEnd(): void; }, ComponentOptionsMixin, ComponentOptionsMixin, { change: (event: SignatureChangeEvent) => true; focus: (event: SignatureFocusEvent) => true; blur: (event: SignatureBlurEvent) => true; open: (event: SignatureOpenEvent) => true; close: (event: SignatureCloseEvent) => true; changemodel: (value: string) => true; 'update:modelValue': (value: string) => true; }, string, PublicProps, Readonly; default: number; }; smooth: PropType; popupScale: { type: PropType; default: number; }; exportScale: { type: PropType; default: number; }; modelValue: PropType; name: PropType; value: PropType; tabIndex: PropType; dir: PropType; ariaDescribedBy: PropType; ariaLabelledBy: PropType; ariaLabel: PropType; hideLine: PropType; open: { type: PropType; default: any; }; readOnly: PropType; disabled: PropType; validationMessage: PropType; maximizable: { type: PropType; default: boolean; }; color: PropType; backgroundColor: PropType; validityStyles: { type: PropType; default: boolean; }; required: { type: PropType; default: boolean; }; valid: { type: PropType; default: any; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; rounded: { type: PropType<"small" | "medium" | "large" | "full" | "none">; validator: (value: string) => boolean; }; fillMode: { type: PropType<"flat" | "solid" | "outline">; validator: (value: string) => boolean; }; }>> & Readonly<{ onBlur?: (event: SignatureBlurEvent) => any; onChange?: (event: SignatureChangeEvent) => any; onClose?: (event: SignatureCloseEvent) => any; onFocus?: (event: SignatureFocusEvent) => any; onChangemodel?: (value: string) => any; "onUpdate:modelValue"?: (value: string) => any; onOpen?: (event: SignatureOpenEvent) => any; }>, { required: boolean; valid: boolean; validityStyles: boolean; open: boolean; strokeWidth: number; popupScale: number; exportScale: number; maximizable: boolean; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * The arguments for the `onBlur` Signature event. */ export declare interface SignatureBlurEvent { } /** * The arguments for the `change` event of the Signature. */ export declare interface SignatureChangeEvent { /** * The current value of the Signature. */ value: string; } /** * The arguments for the `onClose` Signature event. */ export declare interface SignatureCloseEvent { } /** * The arguments for the `onFocus` Signature event. */ export declare interface SignatureFocusEvent { } /** * The Signature ref. */ export declare interface SignatureHandle { /** * The Signature element. */ element: HTMLInputElement | null; /** * Focus the Signature. */ focus: () => void; /** * Gets the `name` property of the Signature. */ name: string | undefined; /** * Gets the value of the Signature. */ value: number | null; /** * @hidden */ props: SignatureProps; /** * @hidden */ validityStyles: boolean; /** * @hidden */ required: boolean; /** * @hidden */ color: string; /** * @hidden */ backgroundColor: string; } /** * The arguments for the `onOpen` Signature event. */ export declare interface SignatureOpenEvent { } /** * Represents the props of the [Kendo UI for Vue Signature component]({% slug overview_signature %}). */ export declare interface SignatureProps extends FormComponentProps { /** * Specifies the value of the Signature. * * The value is an image encoded as a [Data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs). */ value?: string; /** * Specifies the v-model. */ modelValue?: string; /** * Sets the `tabIndex` property of the Signature. */ tabIndex?: number; /** * Sets the `id` of the Signature DOM element. */ id?: string; /** * Represents the `dir` HTML attribute. */ dir?: string; /** * Specifies the name of the Signature input. */ name?: 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 accessible label of the component. */ ariaLabel?: string; /** * Determines whether the Signature is in its read-only state. */ readOnly?: boolean; /** * Determines whether the Signature is in its disabled state. */ disabled?: boolean; /** * Configures the `size` of the Signature. * * The available options are: * - small * - medium * - large * * @default undefined */ size?: 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the Signature. * * The available options are: * - none * - small * - medium * - large * * @default undefined */ rounded?: 'none' | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `fillMode` of the Signature. * * The available options are: * - solid * - outline * - flat * * @default undefined */ fillMode?: 'solid' | 'flat' | 'outline'; /** * The stroke color of the signature. * * Accepts CSS color names and hex values. * * The default value is determined by the theme `$kendo-input-text` variable. */ color?: string; /** * The background color of the signature. * * Accepts CSS color names and hex values. * * The default value is determined by the theme `$kendo-input-bg` variable. */ backgroundColor?: string; /** * The stroke width of the signature. * * @default 1 */ strokeWidth?: number; /** * A flag indicating whether to smooth out signature lines. * * @default false */ smooth?: boolean; /** * A flag indicating if the signature can be maximized. * * @default true */ maximizable?: boolean; /** * Sets the open and close state of the Signature. */ open?: boolean; /** * The scale factor for the popup. * * The Signature width and height will be multiplied by the scale when showing the popup. * * @default 3 */ popupScale?: number; /** * The scale factor for the exported image. * * The Signature width and height will be multiplied by the scale when converting the signature to an image. * * @default 2 */ exportScale?: number; /** * A flag indicating whether the dotted line should be displayed in the background. * * @default false */ hideLine?: boolean; /** * Represents the input element `style` HTML attribute. */ inputStyle?: object; /** * Determines the event handler that will be fired when the user edits the value. */ onChange?: (event: SignatureChangeEvent) => void; /** * The event handler that will be fired when Signature is focused. */ onFocus?: (event: SignatureFocusEvent) => void; /** * The event handler that will be fired when Signature is blurred. */ onBlur?: (event: SignatureBlurEvent) => void; /** * The event handler that will be fired when Signature popup is open. */ onOpen?: (event: SignatureOpenEvent) => void; /** * The event handler that will be fired when Signature popup is closed. */ onClose?: (event: SignatureCloseEvent) => void; /** @hidden */ maximized?: boolean; /** * The validation message of the component. */ validationMessage?: string; /** * The validity styles. Defaults to 'true'. */ validityStyles?: boolean; /** * The required state of the component. */ required?: boolean; } /** * @hidden */ export declare const Slider: DefineComponent; default: any; }; defaultValue: { type: PropType; default: any; }; name: PropType; buttons: PropType; tabIndex: PropType; disabled: PropType; dir: PropType; step: PropType; min: { type: PropType; required: true; }; max: { type: PropType; required: true; }; value: PropType; vertical: PropType; id: PropType; ariaLabelledBy: PropType; ariaDescribedBy: PropType; ariaLabel: PropType; }>, { inputRef: Ref; kendoLocalizationService: {}; }, { currentValue: any; currentFocused: boolean; currentDir: string; }, { computedValue(): number; sliderTrack(): any; }, { focus(): void; isLabel(target: any): boolean; onFocus(event: any): void; onBlur(event: any): void; onKeyDown(e: any): void; decrement(e: any): void; increment(e: any): void; dragStart(e: any): void; dragOver(e: any): void; drag(e: any): void; change(e: any, value: number): void; }, ComponentOptionsMixin, ComponentOptionsMixin, { changemodel: (value: number) => true; 'update:modelValue': (value: number) => true; change: (event: SliderChangeEvent) => true; blur: (event: SliderBlurEvent) => true; focus: (event: SliderFocusEvent) => true; }, string, PublicProps, Readonly; default: any; }; defaultValue: { type: PropType; default: any; }; name: PropType; buttons: PropType; tabIndex: PropType; disabled: PropType; dir: PropType; step: PropType; min: { type: PropType; required: true; }; max: { type: PropType; required: true; }; value: PropType; vertical: PropType; id: PropType; ariaLabelledBy: PropType; ariaDescribedBy: PropType; ariaLabel: PropType; }>> & Readonly<{ onBlur?: (event: SliderBlurEvent) => any; onChange?: (event: SliderChangeEvent) => any; onFocus?: (event: SliderFocusEvent) => any; onChangemodel?: (value: number) => any; "onUpdate:modelValue"?: (value: number) => any; }>, { modelValue: number; defaultValue: number; }, {}, {}, {}, string, () => { kendoMin: any; kendoMax: any; kendoVertical: any; }, true, {}, any>; /** * @hidden */ export declare const SLIDER_LABEL_ATTRIBUTE = "data-slider-label"; /** * The arguments for the `onBlur` Slider event. */ export declare interface SliderBlurEvent { /** * The native FocusEvent from the DOM. */ event: FocusEvent; } /** * The arguments for the `change` Slider event. */ export declare interface SliderChangeEvent { /** * The current value of the Slider. */ value: number; /** * The native event. */ event: any; } /** * The arguments for the `onFocus` Slider event. */ export declare interface SliderFocusEvent { /** * The native FocusEvent from the DOM. */ event: FocusEvent; } /** * Represents the Kendo UI for Vue Native SliderLabel component. * ### props [SliderLabelProps]({% slug api_inputs_sliderlabelprops %}) * The props of the SliderLabel component. */ export declare const SliderLabel: DefineComponent, {}, { currentDir: string; }, {}, { onClick(event: any): void; }, ComponentOptionsMixin, ComponentOptionsMixin, { click: any; }, string, PublicProps, Readonly> & Readonly<{ onClick?: (...args: any[] | unknown[]) => any; }>, { vertical: boolean; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * Represents the props of the Kendo UI for Vue SliderLabel component. */ export declare interface SliderLabelProps { /** * The position in relative to the start of the SliderLabel component. */ position: number; /** * The onClick event of the SliderLabel component. */ onClick?: (event: any) => void; /** * The title of the SliderLabel component. */ title?: string; /** * @hidden */ vertical?: boolean; } /** * Represents the props of the [Kendo UI for Vue Slider component]({% slug overview_slider %}). */ export declare interface SliderProps extends FormComponentProps { /** * The value of the Slider. */ value?: number; /** * @hidden */ modelValue?: number; /** * The default value of the Slider. */ defaultValue?: number; /** * The minimum value of the Slider. */ min: number; /** * The maximum value of the Slider. */ max: number; /** * Specifies the step of the value increase and decrease. */ step?: number; /** * Determines the event handler that will be fired when the user edits the value. */ onChange?: (event: SliderChangeEvent) => void; /** * Renders the arrow side buttons of the Slider if set to true. */ buttons?: boolean; /** * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) * of the Slider. */ tabIndex?: number; /** * Determines whether the Slider is disabled. * */ disabled?: boolean; /** * If `vertical` is set to `true`, the orientation of the Slider changes from horizontal to vertical * ([see example]({% slug orientation_slider %})). */ vertical?: 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; /** * Represents the `dir` HTML attribute. */ dir?: string; /** * Specifies the aria-label attribute of the Slider. */ ariaLabel?: string; } /** * Represents the [Kendo UI for Vue Native Switch component]({% slug overview_switch %}). * Accepts properties of type [SwitchProps]({% slug api_inputs_switchprops %}). */ export declare const Switch: DefineComponent boolean; }; trackRounded: { type: StringConstructor; validator: (value: string) => boolean; }; thumbRounded: { type: StringConstructor; validator: (value: string) => boolean; }; dir: StringConstructor; id: StringConstructor; ariaLabelledBy: StringConstructor; ariaDescribedBy: StringConstructor; offLabel: { type: StringConstructor; default: string; }; onLabel: { type: StringConstructor; default: string; }; required: { type: BooleanConstructor; default: boolean; }; tabIndex: NumberConstructor; valid: BooleanConstructor; validityStyles: { type: BooleanConstructor; default: boolean; }; validationMessage: StringConstructor; value: { type: (BooleanConstructor | StringConstructor | NumberConstructor)[]; default: any; }; modelValue: { type: BooleanConstructor; default: any; }; }>, {}, { currentChecked: boolean; valueDuringOnChange: any; focused: boolean; currentDir: any; }, { computedValue(): any; switchClassName(): { [x: string]: any; 'k-switch': boolean; 'k-switch-on': any; 'k-switch-off': boolean; 'k-focus': any; 'k-disabled': any; 'k-invalid': boolean; }; switchTrackClass(): { [x: string]: any; 'k-switch-track': boolean; }; switchThumbClass(): { [x: string]: any; 'k-switch-thumb': boolean; }; }, { focus(): void; element(): HTMLSpanElement | null; validity(): FormComponentValidity; setValidity(): void; limit(offset: number, drag: HTMLSpanElement, wrapper: HTMLSpanElement): number; toggle(value: boolean, event: any): void; handleClick(event: any): void; handleKeyDown(event: any): void; handleWrapperFocus(event: any): void; handleWrapperBlur(event: any): void; }, ComponentOptionsMixin, ComponentOptionsMixin, { change: (event: SwitchChangeEvent) => true; changemodel: (value: boolean) => true; 'update:modelValue': (value: boolean) => true; focus: (event: SwitchFocusEvent) => true; blur: (event: SwitchBlurEvent) => true; }, string, PublicProps, Readonly boolean; }; trackRounded: { type: StringConstructor; validator: (value: string) => boolean; }; thumbRounded: { type: StringConstructor; validator: (value: string) => boolean; }; dir: StringConstructor; id: StringConstructor; ariaLabelledBy: StringConstructor; ariaDescribedBy: StringConstructor; offLabel: { type: StringConstructor; default: string; }; onLabel: { type: StringConstructor; default: string; }; required: { type: BooleanConstructor; default: boolean; }; tabIndex: NumberConstructor; valid: BooleanConstructor; validityStyles: { type: BooleanConstructor; default: boolean; }; validationMessage: StringConstructor; value: { type: (BooleanConstructor | StringConstructor | NumberConstructor)[]; default: any; }; modelValue: { type: BooleanConstructor; default: any; }; }>> & Readonly<{ onBlur?: (event: SwitchBlurEvent) => any; onChange?: (event: SwitchChangeEvent) => any; onFocus?: (event: SwitchFocusEvent) => any; onChangemodel?: (value: boolean) => any; "onUpdate:modelValue"?: (value: boolean) => any; }>, { required: boolean; value: string | number | boolean; disabled: boolean; checked: boolean; modelValue: boolean; valid: boolean; validityStyles: boolean; defaultChecked: boolean; offLabel: string; onLabel: string; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * The arguments for the `onBlur` Switch event. */ export declare interface SwitchBlurEvent { /** * The native FocusEvent from the DOM. */ event: FocusEvent; } /** * The arguments for the `onChange` Switch event. */ export declare interface SwitchChangeEvent { /** * The new value of the Switch. */ value: boolean; } /** * The arguments for the `onFocus` Switch event. */ export declare interface SwitchFocusEvent { /** * The native FocusEvent from the DOM. */ event: FocusEvent; } /** * Represents the props of the [Kendo UI for Vue Switch component]({% slug overview_switch %}). */ export declare interface SwitchProps extends ToggleBaseProps, FormComponentProps { /** * Specifies the `name` of the Switch. */ name?: string; /** * Specifies the `accessKey` of the Switch. */ accessKey?: string; /** * Sets the current value of the Switch ([see example]({% slug controlled_switch %})). */ checked?: boolean; /** * Sets the `className` of the wrapping element of the Switch. */ className?: string; /** * Sets the value of the Switch when it is initially displayed ([see example]({% slug default_state %})). */ defaultChecked?: boolean; /** * Sets the default value of the Switch. */ defaultValue?: any; /** * Disables the Switch when set to `true` ([see example]({% slug disabled_switch %})). */ disabled?: boolean; /** * Sets the `dir` property of the wrapping element of the Switch. */ dir?: string; /** * Sets the `id` of the Switch. */ id?: string; /** * Configures the `size` of the Switch. * * The available options are: * - small * - medium * - large * * @default undefined */ size?: 'small' | 'medium' | 'large'; /** * Configures the `trackRounded` of the Switch. * * The available options are: * - none * - small * - medium * - large * - full * * @default undefined */ trackRounded?: 'none' | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `thumbRounded` of the Switch. * * The available options are: * - none * - small * - medium * - large * - full * * @default undefined */ thumbRounded?: 'none' | 'small' | 'medium' | 'large' | 'full'; /** * 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; /** * Changes the **Off** label([see example]({% slug labels_switch %})). */ offLabel?: string; /** * Fires each time the Switch gets blurred. */ onBlur?: (event: any) => void; /** * Fires each time the user selects a new value ([see example]({% slug controlled_switch %})). */ onChange?: (event: SwitchChangeEvent) => void; /** * Fires each time the Switch component gets focused. */ onFocus?: (event: any) => void; /** * Changes the **On** label ([see example]({% slug labels_switch %})). */ onLabel?: string; /** * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component. */ tabIndex?: number; /** * Sets the value of the Switch. It can either be of the primitive (string, number, boolean) or of the complex (array) type. */ value?: string | number | string[] | boolean | null; modelValue?: string | number | string[] | boolean | null; } /** * @hidden */ declare interface TableCell { row: number; col: number; } /** * Represents the [Kendo UI for Vue Native TextArea component]({% slug overview_textarea %}). * * Accepts properties of type [TextAreaProps]({% slug api_inputs_textareaprops %}). * * * ```jsx * * * ``` */ export declare const TextArea: DefineComponent; ariaDescribedBy: PropType; ariaLabelledBy: PropType; autoSize: PropType; modelValue: { type: PropType; default: any; }; defaultValue: PropType; dir: PropType; disabled: PropType; readOnly: PropType; rows: PropType; id: PropType; name: PropType; validationMessage: PropType; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; rounded: { type: PropType<"small" | "medium" | "large" | "full" | "none">; validator: (value: string) => boolean; }; fillMode: { type: PropType<"flat" | "solid" | "outline">; validator: (value: string) => boolean; }; required: PropType; placeholder: PropType; tabIndex: PropType; valid: { type: PropType; default: any; }; value: PropType; validityStyles: { type: PropType; default: boolean; }; iconName: PropType; inputPrefix: PropType; inputSuffix: PropType; showValidationIcon: PropType; showLoadingIcon: PropType; showClearButton: PropType; inputClass: PropType; wrapperClass: PropType; flow: { type: PropType; default: string; validator: (value: any) => any; }; resizable: { type: PropType; default: string; validator: (value: any) => any; }; inputAttributes: PropType; }>, {}, { currentValue: string | number | string[]; textAreaHeight: string; currentDir: string; }, { resizableClass(): "k-resize-none" | "k-resize-y" | "k-resize-x" | "k-resize"; rootClassName(): { [x: string]: any; [x: number]: any; 'k-input': boolean; 'k-textarea': boolean; 'k-disabled': any; 'k-invalid': boolean; 'k-required': any; 'k-loading': any; '!k-flex-col': boolean; '!k-flex-row': boolean; }; inputInnerClass(): { [x: number]: any; 'k-input-inner': boolean; '!k-resize-none': boolean; '!k-overflow-auto': boolean; 'k-flex': boolean; }; prefixRenderClass(): { 'k-input-prefix': boolean; '!k-align-items-start': boolean; 'k-input-prefix-horizontal': boolean; 'k-input-prefix-vertical': boolean; }; suffixRenderClass(): { 'k-input-suffix': boolean; '!k-align-items-start': boolean; 'k-input-suffix-horizontal': boolean; 'k-input-suffix-vertical': boolean; }; suffixIconWrapClass(): { 'k-flex-wrap': boolean; '!k-align-items-start': boolean; }; computedValue(): any; isValid(): any; }, { setValidity(): void; clearClick(event: any): void; focus(): void; emitUpdate(event: any, eventName: string, value: any): void; handleChange(event: any): void; handleInput(event: any): void; handleFocus(event: any): void; handleBlur(event: any): void; }, ComponentOptionsMixin, ComponentOptionsMixin, { input: (event: Event) => true; change: (event: TextAreaChangeEvent) => true; changemodel: (value: string | string[] | number) => true; 'update:modelValue': (value: string | string[] | number) => true; focus: (event: TextAreaFocusEvent) => true; blur: (event: TextAreaBlurEvent) => true; }, string, PublicProps, Readonly; ariaDescribedBy: PropType; ariaLabelledBy: PropType; autoSize: PropType; modelValue: { type: PropType; default: any; }; defaultValue: PropType; dir: PropType; disabled: PropType; readOnly: PropType; rows: PropType; id: PropType; name: PropType; validationMessage: PropType; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; rounded: { type: PropType<"small" | "medium" | "large" | "full" | "none">; validator: (value: string) => boolean; }; fillMode: { type: PropType<"flat" | "solid" | "outline">; validator: (value: string) => boolean; }; required: PropType; placeholder: PropType; tabIndex: PropType; valid: { type: PropType; default: any; }; value: PropType; validityStyles: { type: PropType; default: boolean; }; iconName: PropType; inputPrefix: PropType; inputSuffix: PropType; showValidationIcon: PropType; showLoadingIcon: PropType; showClearButton: PropType; inputClass: PropType; wrapperClass: PropType; flow: { type: PropType; default: string; validator: (value: any) => any; }; resizable: { type: PropType; default: string; validator: (value: any) => any; }; inputAttributes: PropType; }>> & Readonly<{ onInput?: (event: Event) => any; onBlur?: (event: TextAreaBlurEvent) => any; onChange?: (event: TextAreaChangeEvent) => any; onFocus?: (event: TextAreaFocusEvent) => any; onChangemodel?: (value: string | number | string[]) => any; "onUpdate:modelValue"?: (value: string | number | string[]) => any; }>, { flow: string; modelValue: string | number | string[]; valid: boolean; validityStyles: boolean; resizable: string; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * The arguments for the `onBlur` TextArea event. */ declare interface TextAreaBlurEvent { /** * The native FocusEvent from the DOM. */ event: FocusEvent; /** * The TextArea component instance. */ component?: any; /** * The name attribute of the textarea element. */ name?: string; } /** * The arguments for the `onChange` TextArea event. */ export declare interface TextAreaChangeEvent { /** * The new value of the TextArea. */ value: string; } /** * Specifies the flow direction of the TextArea sections. * * The possible values are: * * `vertical`(Default) —TextArea sections are placed from top to bottom. * * `horizontal`—TextArea sections are placed from left to right in `ltr`, and from right to left in `rtl` mode. */ declare type TextAreaFlow = 'horizontal' | 'vertical'; /** * The arguments for the `onFocus` TextArea event. */ export declare interface TextAreaFocusEvent { /** * The native FocusEvent from the DOM. */ event: FocusEvent; /** * The TextArea component instance. */ component?: any; /** * The name attribute of the textarea element. */ name?: string; } /** * Represents the props of the [Kendo UI for Vue TextArea component]({% slug overview_textarea %}). */ export declare interface TextAreaProps extends FormComponentProps { /** * 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; /** * Identifies the title of the TextArea component. */ title?: string; /** * Defines the built-in [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength) property of the text inputs. * * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `minlength`. Camel-case and kebap-case won't work in this scenario. */ minlength?: string; /** * Defines the built-in [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength) property of the text inputs. * * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `maxlength`. Camel-case and kebap-case won't work in this scenario. */ maxlength?: string; /** * Specifies if the textarea element will resize its height automatically ([see example]({% slug sizing_textarea %})). * Defaults to `false`. */ autoSize?: boolean; modelValue?: string | string[] | number; /** * Specifies a list of CSS classes that will be added to the TextArea. */ className?: string; /** * The default value of the TextArea ([see example]({% slug default_textarea %})). */ defaultValue?: string | string[] | number; /** * Represents the `dir` HTML attribute. */ dir?: string; /** * Specifies if the TextArea is disabled ([see example]({% slug disabled_textarea %})). */ disabled?: boolean; /** * Sets the read-only state of the TextArea. */ readOnly?: boolean; /** * Specifies an exact height size for the TextArea to take ([see example]({% slug sizing_textarea %})). */ rows?: number; /** * Sets the `id` of the TextArea. */ id?: string; /** * Specifies the `name` property of the `textarea` DOM element. */ name?: string; /** * The hint that is displayed when the TextArea is empty. */ placeholder?: string; /** * Sets the `tabIndex` property of the TextArea. * Defaults to `0`. */ tabIndex?: number; /** * Configures the `size` of the NumericTextBox. * * The available options are: * - small * - medium * - large * * @default undefined */ size?: 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the NumericTextBox. * * The available options are: * - none * - small * - medium * - large * - full * * @default undefined */ rounded?: 'none' | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `fillMode` of the NumericTextBox. * * The available options are: * - solid * - outline * - flat * * @default undefined */ fillMode?: 'solid' | 'flat' | 'outline'; /** * Sets the value to be submitted ([see example]({% slug controlled_textarea %})). */ value?: string | string[] | number; /** * If set to `false`, no visual representation of the invalid state of the component will be applied. * * @default true */ validityStyles?: boolean; /** * Defines a string prop that controls the input icon. This property works only with the Kendo UI for Vue FontIcons. * Check the [Icons]({% slug icons %}) article for more information about how the Font Icon can be loaded to your project. */ iconName?: string; /** * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component. */ inputPrefix?: boolean | string | Object | Function; /** * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component. */ inputSuffix?: boolean | string | Object | Function; /** * Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'. */ showValidationIcon?: boolean; /** * Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'. */ showLoadingIcon?: boolean; /** * Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'. */ showClearButton?: boolean; /** * Defines additional class to the wrapper element. */ wrapperClass?: string; /** * Defines the flow direction of the TextArea sections. */ flow?: TextAreaFlow | string; /** * Defines the way the TextArea will resize. */ resizable?: TextAreaResize | string; /** * Defines additional class to the input element. */ inputClass?: string; /** * Sets the built-in HTML attributes of the inner focusable input element. * Attributes which are essential for certain component functionalities cannot be changed. */ inputAttributes?: Object; /** * The event handler that will be fired when the changes the selected value. */ onChange?: (event: TextAreaChangeEvent) => void; /** * The event handler that will be fired when TextArea is focused. */ onFocus?: (event: TextAreaFocusEvent) => void; /** * The event handler that will be fired when TextArea is blurred. */ onBlur?: (event: TextAreaBlurEvent) => void; } /** * Specifies the resize direction of the TextArea sections. * * The possible values are: * `vertical`(Default) —TextArea can be resized only vertically. * `horizontal`—TextArea can be resized only horizontally. * `both`—TextArea can be resized both vertically and horizontally. * `none`—TextArea can not be manually resized. */ export declare type TextAreaResize = 'both' | 'horizontal' | 'vertical' | 'none'; /** * Specifies the enum options for resize direction of the TextArea sections. */ export declare enum TextAreaResizeEnum { /** * `both`—TextArea can be resized both vertically and horizontally. */ both = "both", /** * `horizontal`—TextArea can be resized only horizontally. */ horizontal = "horizontal", /** * `vertical`(Default) —TextArea can be resized only vertically. */ vertical = "vertical", /** * `none`—TextArea can not be manually resized. */ none = "none" } /** * @hidden */ export declare const TextBox: DefineComponent; default: any; }; disabled: { type: PropType; default: any; }; defaultValue: { type: PropType; default: string; }; value: { type: PropType; }; label: { type: PropType; }; placeholder: { type: PropType; }; required: { type: PropType; default: boolean; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; rounded: { type: PropType<"small" | "medium" | "large" | "full" | "none">; validator: (value: string) => boolean; }; fillMode: { type: PropType<"flat" | "solid" | "outline">; validator: (value: string) => boolean; }; dir: { type: PropType; }; id: StringConstructor; valid: { type: PropType; default: any; }; validate: { type: PropType; }; validationMessage: { type: PropType; }; validityStyles: { type: PropType; default: boolean; }; iconName: PropType; inputPrefix: PropType; prefix: PropType; inputSuffix: PropType; suffix: PropType; showValidationIcon: PropType; showLoadingIcon: PropType; showClearButton: PropType; inputClass: PropType; wrapperClass: PropType; tabIndex: PropType; role: PropType; title: PropType; ariaLabel: PropType; inputAttributes: PropType; }>, { inputRef: Ref; }, { 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: number]: any; 'k-input-inner': boolean; }; 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; badTextBox: 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; inputWrapperClass(): { [x: string]: any; [x: number]: any; 'k-textbox': boolean; 'k-input': boolean; 'k-invalid': boolean; 'k-required': any; 'k-disabled': any; }; }, ComponentOptionsMixin, ComponentOptionsMixin, { input: (event: Event) => true; change: (event: TextBoxChangeEvent) => true; changemodel: (value: string | number) => true; 'update:modelValue': (value: string | number) => true; focus: (event: TextBoxFocusEvent) => true; blur: (event: TextBoxBlurEvent) => true; keyup: (event: KeyboardEvent) => true; keydown: (event: KeyboardEvent) => true; keypress: (event: KeyboardEvent) => true; }, string, PublicProps, Readonly; default: any; }; disabled: { type: PropType; default: any; }; defaultValue: { type: PropType; default: string; }; value: { type: PropType; }; label: { type: PropType; }; placeholder: { type: PropType; }; required: { type: PropType; default: boolean; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; rounded: { type: PropType<"small" | "medium" | "large" | "full" | "none">; validator: (value: string) => boolean; }; fillMode: { type: PropType<"flat" | "solid" | "outline">; validator: (value: string) => boolean; }; dir: { type: PropType; }; id: StringConstructor; valid: { type: PropType; default: any; }; validate: { type: PropType; }; validationMessage: { type: PropType; }; validityStyles: { type: PropType; default: boolean; }; iconName: PropType; inputPrefix: PropType; prefix: PropType; inputSuffix: PropType; suffix: PropType; showValidationIcon: PropType; showLoadingIcon: PropType; showClearButton: PropType; inputClass: PropType; wrapperClass: PropType; tabIndex: PropType; role: PropType; title: PropType; ariaLabel: PropType; inputAttributes: PropType; }>> & Readonly<{ onInput?: (event: Event) => any; onBlur?: (event: TextBoxBlurEvent) => any; onChange?: (event: TextBoxChangeEvent) => any; onFocus?: (event: TextBoxFocusEvent) => any; onKeydown?: (event: KeyboardEvent) => any; onKeypress?: (event: KeyboardEvent) => any; onKeyup?: (event: KeyboardEvent) => any; onChangemodel?: (value: string | number) => any; "onUpdate:modelValue"?: (value: string | number) => any; }>, { required: boolean; disabled: boolean; modelValue: string | number; defaultValue: string | number | string[]; valid: boolean; validityStyles: boolean; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * The arguments for the `onBlur` TextBox event. */ export declare interface TextBoxBlurEvent { /** * The native FocusEvent from the DOM. */ event: FocusEvent; } export declare interface TextBoxChangeEvent { /** * A reference to the native event. */ event: any; /** * The name of the event that is triggred. The value of this prop is `change`. */ eventName: string; /** * The current value of the TextBox. */ value: string | string[] | number; } /** * The arguments for the `onFocus` TextBox event. */ export declare interface TextBoxFocusEvent { /** * The native FocusEvent from the DOM. */ event: FocusEvent; } /** * Represents the props of the [Kendo UI for Vue TextBox component]({% slug overview_textbox %}). * Extends the [native input props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextBoxElement). */ export declare interface TextBoxProps extends FormComponentProps { /** * Renders a floating label for the TextBox 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 TextBox. * * The available options are: * - small * - medium * - large * * @default undefined */ size?: 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the TextBox. * * The available options are: * - none * - small * - medium * - large * - full * * @default undefined */ rounded?: 'none' | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `fillMode` of the TextBox. * * The available options are: * - solid * - outline * - flat * * @default undefined */ fillMode?: 'solid' | 'flat' | 'outline'; dir?: string; /** * Fires when the `change` event of the input is triggered. */ onChange?: (event: TextBoxChangeEvent) => void; /** * Fires when the `input` event of the input is triggered. */ onTextBox?: (event: any) => void; /** * Fires when the input is focused. */ onFocus?: (event: any) => void; /** * Fires when the input is blurred. */ onBlur?: (event: any) => void; /** * Fires when the 'keyup' input event is triggered. */ onKeyup?: (event: any) => void; /** * Fires when the 'keydown' input event is triggered. */ onKeydown?: (event: any) => void; /** * Fires when the 'keypress' input event is triggered. */ onKeypress?: (event: any) => void; /** * Specifies the placeholder of an `input` element. Used to define if the input is empty. */ placeholder?: string; /** * Defines a string prop that controls the input icon. This property works only with the Kendo UI for Vue FontIcons. * Check the [Icons]({% slug icons %}) article for more information about how the Font Icon can be loaded to your project. */ iconName?: string; /** * * @obsolete Use `prefix` instead. * * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component. */ inputPrefix?: boolean | string | Object | Function; /** * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component. */ prefix?: boolean | string | Object | Function; /** * * @obsolete Use `suffix` instead. * * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component. */ inputSuffix?: boolean | string | Object | Function; /** * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component. */ suffix?: boolean | string | Object | Function; /** * Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'. */ showValidationIcon?: boolean; /** * Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'. */ showLoadingIcon?: boolean; /** * Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'. */ showClearButton?: boolean; /** * Defines additional class to the wrapper element. */ wrapperClass?: string; /** * Defines additional class to the input element. */ inputClass?: string; /** * Defines the built-in [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength) property of the text inputs. * * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `minlength`. Camel-case and kebap-case won't work in this scenario. */ minlength?: string; /** * Defines the built-in [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength) property of the text inputs. * * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `maxlength`. Camel-case and kebap-case won't work in this scenario. */ maxlength?: string; /** * Defines the built-in [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) property of the input element inside the TextBox. */ tabIndex?: number; /** * Defines the role of the input element inside the TextBox. */ role?: string; /** * Defines the built-in [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) property of the input element inside the TextBox. */ title?: string; /** * Defines the built-in [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) property of the input element inside the TextBox. */ ariaLabel?: string; /** * Sets the built-in HTML attributes of the inner focusable input element. * Attributes which are essential for certain component functionalities cannot be changed. */ inputAttributes?: Object; } /** * Specifies the size of a color cell. * * The possible values are: * * (Default) `number = 24` * * `{ width: number, height: number }` */ declare type TileSize_2 = { width: number; height: number; }; /** * The props passed to the Checkbox and Switch components. */ declare interface ToggleBaseProps { value?: any; checked?: any; defaultChecked?: any; } export { }