import { IEventEmitter } from '@breadstone/mosaik-elements';
import type { IColorChangedEventDetail, IColorFormatChangedEventDetail } from '../../../events';
import type { ColorEditorFormat } from '../../../Types/ColorEditorFormat';
import { CustomElement } from '../../Abstracts/CustomElement';
import type { IColorEditorInputsElementProps } from './IColorEditorInputsElementProps';
declare const ColorEditorInputsElement_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) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Sizeable").ISizeableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
/**
 * Color Editor Inputs - Input fields for editing color values in various formats.
 *
 * @description
 * The Color Editor Inputs component provides text input fields for editing color values
 * in different formats (HEX, RGB, HSL, HSV). Users can toggle between formats using
 * a format switcher button. The component automatically validates and converts values
 * between formats.
 *
 * @name ColorEditorInputs
 * @element mosaik-color-editor-inputs
 * @category Media
 *
 * @csspart input - The text input fields
 * @csspart input-group - Container for each input field and its label
 * @csspart next - The next part.
 * @csspart previous - The previous part.
 *
 * @cssprop {String} --color-editor-inputs-background-color - The editor inputs background color CSS custom property.
 * @cssprop {String} --color-editor-inputs-border-color - The editor inputs border color CSS custom property.
 * @cssprop {String} --color-editor-inputs-border-radius - The editor inputs border radius CSS custom property.
 * @cssprop {String} --color-editor-inputs-border-style - The editor inputs border style CSS custom property.
 * @cssprop {String} --color-editor-inputs-border-width - The editor inputs border width CSS custom property.
 * @cssprop {String} --color-editor-inputs-font-family - The editor inputs font family CSS custom property.
 * @cssprop {String} --color-editor-inputs-font-letter-spacing - The editor inputs font letter spacing CSS custom property.
 * @cssprop {String} --color-editor-inputs-font-line-height - The editor inputs font line height CSS custom property.
 * @cssprop {String} --color-editor-inputs-font-size - The editor inputs font size CSS custom property.
 * @cssprop {String} --color-editor-inputs-font-text-decoration - The editor inputs font text decoration CSS custom property.
 * @cssprop {String} --color-editor-inputs-font-text-transform - The editor inputs font text transform CSS custom property.
 * @cssprop {String} --color-editor-inputs-font-weight - The editor inputs font weight CSS custom property.
 * @cssprop {String} --color-editor-inputs-foreground-color - The editor inputs foreground color CSS custom property.
 * @cssprop {String} --color-editor-inputs-gap - The editor inputs gap CSS custom property.
 * @cssprop {String} --color-editor-inputs-height - The editor inputs height CSS custom property.
 * @cssprop {String} --color-editor-inputs-input-background-color - The editor inputs input background color CSS custom property.
 * @cssprop {String} --color-editor-inputs-input-border-color - The editor inputs input border color CSS custom property.
 * @cssprop {String} --color-editor-inputs-input-border-radius - The editor inputs input border radius CSS custom property.
 * @cssprop {String} --color-editor-inputs-input-border-width - The editor inputs input border width CSS custom property.
 * @cssprop {String} --color-editor-inputs-input-height - The editor inputs input height CSS custom property.
 * @cssprop {String} --color-editor-inputs-label-color - The editor inputs label color CSS custom property.
 * @cssprop {String} --color-editor-inputs-label-font-size - The editor inputs label font size CSS custom property.
 * @cssprop {String} --color-editor-inputs-padding-bottom - The editor inputs padding bottom CSS custom property.
 * @cssprop {String} --color-editor-inputs-padding-left - The editor inputs padding left CSS custom property.
 * @cssprop {String} --color-editor-inputs-padding-right - The editor inputs padding right CSS custom property.
 * @cssprop {String} --color-editor-inputs-padding-top - The editor inputs padding top CSS custom property.
 * @cssprop {String} --color-editor-inputs-shadow - The editor inputs shadow CSS custom property.
 * @cssprop {String} --color-editor-inputs-shadow-blur - The editor inputs shadow blur CSS custom property.
 * @cssprop {String} --color-editor-inputs-shadow-color - The editor inputs shadow color CSS custom property.
 * @cssprop {String} --color-editor-inputs-shadow-offset-x - The editor inputs shadow offset x CSS custom property.
 * @cssprop {String} --color-editor-inputs-shadow-offset-y - The editor inputs shadow offset y CSS custom property.
 * @cssprop {String} --color-editor-inputs-shadow-spread - The editor inputs shadow spread CSS custom property.
 * @cssprop {String} --color-editor-inputs-transition-duration - The editor inputs transition duration CSS custom property.
 * @cssprop {String} --color-editor-inputs-transition-mode - The editor inputs transition mode CSS custom property.
 * @cssprop {String} --color-editor-inputs-transition-property - The editor inputs transition property CSS custom property.
 * @cssprop {String} --color-editor-inputs-translate - The editor inputs translate CSS custom property.
 * @cssprop {String} --color-editor-inputs-width - The editor inputs width CSS custom property.
 *
 * @fires colorChanged {ColorChangedEvent} - Fired when the color value changes via user input
 * @fires colorFormatChanged {ColorFormatChangedEvent} - Fired when the color format is changed
 *
 * @dependency mosaik-button - The Button element.
 * @dependency mosaik-button-group - The Button Group element.
 * @dependency mosaik-numberbox - The Numberbox element.
 * @dependency mosaik-textbox - The Textbox element.
 *
 * @example
 * Basic usage:
 * ```html
 * <mosaik-color-editor-inputs></mosaik-color-editor-inputs>
 * ```
 *
 * @example
 * With initial color and format:
 * ```html
 * <mosaik-color-editor-inputs color="#ff0000" format="rgb"></mosaik-color-editor-inputs>
 * ```
 *
 * @public
 */
export declare class ColorEditorInputsElement extends ColorEditorInputsElement_base implements IColorEditorInputsElementProps {
    private static readonly _formatCycle;
    private readonly _colorChanged;
    private readonly _colorFormatChanged;
    private _color;
    private _format;
    private _showAlpha;
    /**
     * Constructs a new instance of the ColorEditorInputsElement class.
     *
     * @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 value.
     *
     * @public
     * @attr
     */
    get color(): string;
    set color(value: string);
    /**
     * Gets or sets the color format to display.
     *
     * @public
     * @attr
     */
    get format(): ColorEditorFormat;
    set format(value: ColorEditorFormat);
    /**
     * Gets or sets whether to show the alpha input.
     *
     * @public
     */
    get showAlpha(): boolean;
    set showAlpha(value: boolean);
    /**
     * Called when the color value changes via user input.
     * Provides reference to `IColorChangedEventDetail` as event detail.
     *
     * @public
     * @readonly
     * @eventProperty
     */
    get colorChanged(): IEventEmitter<IColorChangedEventDetail>;
    /**
     * Called when the color format is changed.
     * Provides reference to `IColorFormatChangedEventDetail` as event detail.
     *
     * @public
     * @readonly
     * @eventProperty
     */
    get colorFormatChanged(): IEventEmitter<IColorFormatChangedEventDetail>;
    /**
     * Navigates to the previous color format in the cycle.
     *
     * @public
     */
    previousFormat(): void;
    /**
     * Navigates to the next color format in the cycle.
     *
     * @public
     */
    nextFormat(): void;
    /**
     * Handles HEX input changes.
     *
     * @private
     */
    onHexChange(event: Event): void;
    /**
     * Handles alpha input changes.
     *
     * @private
     */
    onAlphaChange(event: Event): void;
    /**
     * Handles RGB input changes.
     *
     * @private
     */
    onRgbChange(event: Event, channel: 'r' | 'g' | 'b'): void;
    /**
     * Handles HSL input changes.
     *
     * @private
     */
    onHslChange(event: Event, channel: 'h' | 's' | 'l'): void;
    /**
     * Handles HSV input changes.
     *
     * @private
     */
    onHsvChange(event: Event, channel: 'h' | 's' | 'v'): void;
    /**
     * Handles LAB input changes.
     *
     * @private
     */
    onLabChange(event: Event, channel: 'l' | 'a' | 'b'): void;
    /**
     * Handles LCH input changes.
     *
     * @private
     */
    onLchChange(event: Event, channel: 'l' | 'c' | 'h'): void;
    /**
     * Handles OKLAB input changes.
     *
     * @private
     */
    onOklabChange(event: Event, channel: 'l' | 'a' | 'b'): void;
    /**
     * Handles OKLCH input changes.
     *
     * @private
     */
    onOklchChange(event: Event, channel: 'l' | 'c' | 'h'): void;
}
/**
 * @public
 */
export declare namespace ColorEditorInputsElement {
    type Props = IColorEditorInputsElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-color-editor-inputs': ColorEditorInputsElement;
    }
}
export {};
//# sourceMappingURL=ColorEditorInputsElement.d.ts.map