/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { ColorPickerBlurEvent } from './ColorPickerBlurEvent';
import { ColorPickerFocusEvent } from './ColorPickerFocusEvent';
import { ColorPickerChangeEvent } from './ColorPickerChangeEvent';
import { ColorPickerActiveColorClick } from './ColorPickerActiveColorClick';
import { ColorPickerPopupSettings } from './ColorPickerPopupSettings';
import { ColorPickerPaletteSettings } from './ColorPickerPaletteSettings';
import { ColorPickerView } from './ColorPickerView';
import { ColorGradientProps } from './ColorGradientProps';
import { FlatColorPickerProps } from '../FlatColorPicker';
import { SVGIcon } from '@progress/kendo-vue-common';
/**
 * Represents the props of the [Kendo UI for Vue ColorPicker component]({% slug overview_colorpicker %}).
 */
export 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;
    /**
     * 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;
}