import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
import './../color-handle';
import { LuzmoElement } from '../../utils/base';
import { ColorTypes } from '../../utils/reactive-controllers/color-controller';
/**
 * @element luzmo-color-area
 * @slot gradient - a custom gradient visually outlining the available color values
 * @fires input - The value of the Color Area has changed.
 * @fires change - An alteration to the value of the Color Area has been committed by the user.
 */
export declare class LuzmoColorArea extends LuzmoElement {
    static get styles(): CSSResultArray;
    dir: 'ltr' | 'rtl';
    disabled: boolean;
    focused: boolean;
    labelX: string;
    labelY: string;
    isLTR: boolean;
    private handle;
    private languageResolver;
    /**
     * A controller for managing color interactions within the ColorArea component.
     *
     * The `ColorController` is instantiated with the `manageAs` option set to `hsv`
     * because the ColorArea component is designed to manipulate the saturation (`s`)
     * and value (`v`) components of the HSV color model along the x and y axes,
     * respectively. In the HSV color model:
     *
     * - The `hue` (h) represents the color type and is typically controlled by a separate input.
     * - The `saturation` (s) represents the intensity of the color, ranging from 0% (gray) to 100% (full color).
     * - The `value` (v) represents the brightness of the color, ranging from 0% (black) to 100% (full brightness).
     *
     * In the ColorArea component:
     *
     * - The x-axis controls the saturation (`s`), allowing users to adjust the intensity of the color.
     * - The y-axis controls the value (`v`), allowing users to adjust the brightness of the color.
     *Add commentMore actions
     * By managing the color as `hsv`, the ColorController can efficiently handle the changes in saturation and value
     * as the user interacts with the ColorArea component.
     *
     * @private
     * @type {ColorController}
     * @memberof ColorArea
     *
     * @property {ColorArea} this - The instance of the ColorArea component.
     * @property {Object} options - Configuration options for the ColorController.
     * @property {string} options.manageAs - Specifies the color model to manage, in this case 'hsv'.
     */
    private colorController;
    get hue(): number;
    set hue(value: number);
    get value(): ColorTypes;
    get color(): ColorTypes;
    set color(color: ColorTypes);
    private activeAxis;
    get x(): number;
    set x(x: number);
    get y(): number;
    set y(y: number);
    step: number;
    inputX: HTMLInputElement;
    inputY: HTMLInputElement;
    private altered;
    private activeKeys;
    private _valueChanged;
    focus(focusOptions?: FocusOptions): void;
    private forwardFocus;
    private handleFocus;
    handleBlur(): void;
    private handleKeydown;
    private handleKeypress;
    private handleKeyup;
    private handleInput;
    private handleChange;
    private boundingClientRect;
    _pointerDown: boolean;
    private handlePointerdown;
    private handlePointermove;
    private handlePointerup;
    /**
     * Returns the value under the cursor
     * @param: PointerEvent on slider
     * @return: Slider value that correlates to the position under the pointer
     */
    private calculateHandlePosition;
    private handleAreaPointerdown;
    protected render(): TemplateResult;
    protected firstUpdated(changed: PropertyValues): void;
    /**
     * Overrides the `updated` method to handle changes in property values.
     *
     * @param changed - A map of changed properties with their previous values.
     *
     * This method performs the following actions:
     * - Updates the saturation (`s`) of the color if `x` has changed.
     * - Updates the value (`v`) of the color if `y` has changed.
     * - If the `focused` property has changed and is now true, it lazily binds
     * the `input[type="range"]` elements in shadow roots to prevent multiple
     * tab stops within the Color Area for certain browser settings (e.g., Webkit).
     */
    protected updated(changed: PropertyValues): void;
    private observer?;
    connectedCallback(): void;
    disconnectedCallback(): void;
}