/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { ColorPickerChangeEvent } from '..';
import { FlatColorPickerViewChangeEvent } from './interfaces/FlatColorPickerViewChangeEvent';
import { FlatColorPickerFocusEvent } from './interfaces/FlatColorPickerFocusEvent';
import { FlatColorPickerBlurEvent } from './interfaces/FlatColorPickerBlurEvent';
import { FlatColorPickerFocusoutEvent } from './interfaces/FlatColorPickerFocusoutEvent';
import { ColorGradientProps } from './interfaces/ColorGradientProps';
import { ColorPickerPaletteSettings } from './interfaces/ColorPickerPaletteSettings';
import { PropType } from 'vue';
/**
 * Represents the properties of [FlatColorPicker](% slug api_inputs_flatcolorpickerprops %) component.
 */
export 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;
    /**
     * 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;
}
/**
 * @hidden
 */
export 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;
}
/**
 * @hidden
 */
declare const FlatColorPicker: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
    modelValue: PropType<string>;
    modelRgbaValue: PropType<string>;
    value: PropType<string>;
    prevValue: PropType<string>;
    tabIndex: PropType<number>;
    disabled: PropType<boolean>;
    view: {
        type: PropType<string>;
        default: string;
        validator: (value: any) => boolean;
    };
    selectedView: {
        type: PropType<number>;
        default: any;
    };
    header: PropType<any>;
    footer: PropType<any>;
    showClearButton: {
        type: PropType<boolean>;
        default: boolean;
    };
    showPreview: {
        type: PropType<boolean>;
        default: boolean;
    };
    showButtons: {
        type: PropType<boolean>;
        default: boolean;
    };
    gradientSettings: {
        type: PropType<ColorGradientProps>;
        default: () => {
            opacity: boolean;
        };
    };
    paletteSettings: {
        type: PropType<ColorPickerPaletteSettings>;
        default: () => {
            palette: string;
        };
    };
    size: {
        type: PropType<"small" | "medium" | "large">;
    };
    adaptive: PropType<boolean>;
}>, {}, {
    currentView: string;
    colorValue: string | Function;
    currentPrevColor: string | Function;
    focused: boolean;
}, {
    isColorGradient(): boolean;
    computedColor(): any;
    computedPrevColor(): any;
    previewClass(): {
        'k-coloreditor-preview-color': boolean;
        'k-color-preview': boolean;
        'k-no-color': boolean;
    };
    currentClass(): {
        'k-coloreditor-current-color': boolean;
        'k-color-preview': boolean;
        'k-no-color': boolean;
    };
    computedTabIndex(): 0 | -1;
}, {
    focus(): void;
    onKeyDownHandler(e: any): void;
    handleViewChange(event: any, viewType: any): void;
    handleResetColor(): void;
    handleColorChange(event: any): void;
    handlePaletteColorChange(event: any): void;
    triggerChange(event: any): void;
    innerKeyDown(event: any): void;
    gradientKeyDown(event: any): void;
    handleButtonKeydown(e: any): void;
    handleCancelBtnClick(): void;
    handlePrevColorClick(): void;
    onFocus(event: FocusEvent): void;
    onBlur(event: FocusEvent): void;
    onFocusout(event: FocusEvent): void;
}, import('vue').ComponentOptionsMixin, import('vue').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, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
    modelValue: PropType<string>;
    modelRgbaValue: PropType<string>;
    value: PropType<string>;
    prevValue: PropType<string>;
    tabIndex: PropType<number>;
    disabled: PropType<boolean>;
    view: {
        type: PropType<string>;
        default: string;
        validator: (value: any) => boolean;
    };
    selectedView: {
        type: PropType<number>;
        default: any;
    };
    header: PropType<any>;
    footer: PropType<any>;
    showClearButton: {
        type: PropType<boolean>;
        default: boolean;
    };
    showPreview: {
        type: PropType<boolean>;
        default: boolean;
    };
    showButtons: {
        type: PropType<boolean>;
        default: boolean;
    };
    gradientSettings: {
        type: PropType<ColorGradientProps>;
        default: () => {
            opacity: boolean;
        };
    };
    paletteSettings: {
        type: PropType<ColorPickerPaletteSettings>;
        default: () => {
            palette: string;
        };
    };
    size: {
        type: PropType<"small" | "medium" | "large">;
    };
    adaptive: PropType<boolean>;
}>> & 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;
    paletteSettings: ColorPickerPaletteSettings;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
export { FlatColorPicker };