import { EventEmitter } from '../../stencil-public-runtime';
import { FormComponent } from '../form/form.types';
import type { CustomColorSwatch } from './color-picker.types';
/**
 * This component enables you to select a swatch from out color palette, simply
 * by clicking on it. You can then copy the css variable name of the chosen color
 * and use it where desired.
 *
 * The color picker can also show you a preview of any valid color name or color value.
 *
 * :::note
 * Make sure to read our [guidelines about usage of colors](#/DesignGuidelines/color-system.md/) from our palette.
 * :::
 *
 * @exampleComponent limel-example-color-picker-basic
 * @exampleComponent limel-example-color-picker-custom-palette
 * @exampleComponent limel-example-color-picker-manual-input
 * @exampleComponent limel-example-color-picker-composite
 */
export declare class ColorPicker implements FormComponent {
    /**
     * Name or code of the chosen color
     */
    value: string;
    /**
     * The label of the input field
     */
    label: string;
    /**
     * Helper text of the input field
     */
    helperText: string;
    /**
     * Displayed as tooltips when picker is hovered.
     */
    tooltipLabel: string;
    /**
     * Set to `true` if a value is required
     */
    required: boolean;
    /**
     * Set to `true` to disable the field.
     * Use `disabled` to indicate that the field can normally be interacted
     * with, but is currently disabled. This tells the user that if certain
     * requirements are met, the field may become enabled again.
     */
    disabled: boolean;
    /**
     * Set to `true` to make the field read-only.
     * Use `readonly` when the field is only there to present the data it holds,
     * and will not become possible for the current user to edit.
     */
    readonly: boolean;
    /**
     * Set to `true` to indicate that the current value of the input field is
     * invalid.
     */
    invalid: boolean;
    /**
     * The placeholder text shown inside the input field,
     * when the field is focused and empty.
     */
    placeholder: string;
    /**
     * Set to `false` to disallow custom color values to be typed into the input field.
     * Setting this to `false` does not completely disable the color picker.
     * It will only allow users to pick from the provided color palette.
     */
    manualInput: boolean;
    /**
     * An array of either color value strings, or objects with a `name` and a `value`,
     * which replaces the default palette. Any valid CSS color format is accepted as value
     * (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).
     */
    palette?: Array<string | CustomColorSwatch>;
    /**
     * Defines the number of columns in the color swatch grid.
     * If not provided, it will default to the number of colors in the palette;
     * but stops at a maximum of 25 columns.
     */
    paletteColumnCount?: number;
    /**
     * Emits chosen value to the parent component
     */
    change: EventEmitter<string>;
    private isOpen;
    disconnectedCallback(): void;
    componentDidRender(): void;
    private contentElement?;
    private shouldFocus;
    render(): any;
    private renderTooltip;
    private renderPickerPalette;
    private renderPickerTrigger;
    private setColorPickerPaletteElement;
    private openPopover;
    private onPopoverClose;
    private handleChange;
}
//# sourceMappingURL=color-picker.d.ts.map