import { CustomElement } from '../../Abstracts/CustomElement';
import type { IColorAreaElementProps } from './IColorAreaElementProps';
declare const ColorAreaElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Focusable").IFocusableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
/**
 * Color Area - A user interface component for displaying a colored region or background.
 *
 * @element mosaik-color-area
 *
 * @description
 * The Color Area component is designed to represent a specific area of a user interface filled with a particular color.
 * It is often used to create visual distinctions, highlight sections, or provide background colors for elements.
 * Color Areas are commonly employed to enhance the overall visual aesthetics of a user interface and improve readability.
 *
 * @category Media
 *
 * @example
 * Basic usage:
 * ```html
 * <mosaik-color-area></mosaik-color-area>
 * ```
 *
 * @example
 * With an initial color value:
 * ```html
 * <mosaik-color-area color="#ff0000"></mosaik-color-area>
 * ```
 *
 * @public
 */
export declare class ColorAreaElement extends ColorAreaElement_base implements IColorAreaElementProps {
    private readonly _resizeController;
    private readonly _colorController;
    private readonly _thumb;
    private readonly _inputX;
    private readonly _inputY;
    private _color;
    private _x;
    private _y;
    private _step;
    private _altered;
    _boundingClientRect: DOMRect;
    private _pointerDown;
    private _valueChanged;
    private _activeAxis;
    private readonly _activeKeys;
    /**
     * @public
     */
    constructor();
    /**
     * Returns the `is` property.
     * The `is` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is(): string;
    /**
     * Gets or sets the `color` property.
     *
     * @public
     * @attr
     */
    get color(): string;
    set color(value: string);
    /**
     * Gets or sets the `x` property.
     *
     * @private
     * @template
     */
    get x(): number;
    set x(value: number);
    /**
     * Gets or sets the `y` property.
     *
     * @private
     * @template
     */
    get y(): number;
    set y(value: number);
    /**
     * Gets or sets the `hue` property.
     *
     * @private
     * @template
     */
    get hue(): number;
    set hue(value: number);
    /**
     * Gets or sets the `step` property.
     *
     * @private
     * @template
     */
    get step(): number;
    set step(value: number);
    /**
     * @public
     * @override
     */
    connectedCallback(): void;
    /**
     * @protected
     * @override
     */
    protected onApplyTemplate(): void;
    private forwardFocus;
    private handleFocus;
    private handleBlur;
    private handleKeydown;
    private handleKeypress;
    private handleKeyup;
    private handleInput;
    private handleChange;
    private handlePointerdown;
    private handlePointermove;
    private handlePointerup;
    handleAreaPointerdown(event: PointerEvent): void;
    /**
     * Returns the value under the cursor
     * @param: PointerEvent on slider
     * @return: Slider value that correlates to the position under the pointer
     */
    private calculateHandlePosition;
}
/**
* @public
*/
export declare namespace ColorAreaElement {
    type Props = IColorAreaElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-color-area': ColorAreaElement;
    }
}
export {};
//# sourceMappingURL=ColorAreaElement.d.ts.map