import { IEventEmitter } from '@breadstone/mosaik-elements';
import type { IPaletteAddEventDetail, IPaletteChangedEventDetail, IPaletteSelectEventDetail } from '../../../events';
import { CustomElement } from '../../Abstracts/CustomElement';
import type { IColorEditorPaletteElementProps } from './IColorEditorPaletteElementProps';
import { IColorPalette } from './IColorPalette';
declare const ColorEditorPaletteElement_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 Editor Palette - A component for displaying and selecting colors from predefined palettes.
 *
 * @description
 * The Color Editor Palette component displays a grid of color swatches from one or more
 * predefined palettes. Users can select colors from the palette and optionally add custom
 * colors to a user palette. The component supports switching between multiple palettes
 * via a panel interface.
 *
 * @name ColorEditorPalette
 * @element mosaik-color-editor-palette
 * @category Media
 *
 * @csspart add-button - The button to add current color to custom palette
 * @csspart color-item - Individual color swatch buttons
 * @csspart colors - The container for color swatches
 * @csspart header - The header row containing title and switcher
 * @csspart panel - The palette selector panel
 * @csspart panel-close - The panel-close part.
 * @csspart panel-header - The panel-header part.
 * @csspart panel-item - The panel-item part.
 * @csspart panel-item-color - The panel-item-color part.
 * @csspart panel-item-colors - The panel-item-colors part.
 * @csspart panel-item-more - The "+N" text showing remaining colors count
 * @csspart panel-item-name - The panel-item-name part.
 * @csspart panel-list - The panel-list part.
 * @csspart panel-title - The panel-title part.
 * @csspart switcher - The button to open palette selector panel
 * @csspart title - The palette name display
 *
 * @cssprop {String} --color-editor-palette-background-color - The editor palette background color CSS custom property.
 * @cssprop {String} --color-editor-palette-border-color - The editor palette border color CSS custom property.
 * @cssprop {String} --color-editor-palette-border-radius - The editor palette border radius CSS custom property.
 * @cssprop {String} --color-editor-palette-border-style - The editor palette border style CSS custom property.
 * @cssprop {String} --color-editor-palette-border-width - The editor palette border width CSS custom property.
 * @cssprop {String} --color-editor-palette-checkerboard-size - The editor palette checkerboard size CSS custom property.
 * @cssprop {String} --color-editor-palette-color-item-border-color - The editor palette color item border color CSS custom property.
 * @cssprop {String} --color-editor-palette-color-item-border-radius - The editor palette color item border radius CSS custom property.
 * @cssprop {String} --color-editor-palette-color-item-border-width - The editor palette color item border width CSS custom property.
 * @cssprop {String} --color-editor-palette-color-item-size - The editor palette color item size CSS custom property.
 * @cssprop {String} --color-editor-palette-font-family - The editor palette font family CSS custom property.
 * @cssprop {String} --color-editor-palette-font-letter-spacing - The editor palette font letter spacing CSS custom property.
 * @cssprop {String} --color-editor-palette-font-line-height - The editor palette font line height CSS custom property.
 * @cssprop {String} --color-editor-palette-font-size - The editor palette font size CSS custom property.
 * @cssprop {String} --color-editor-palette-font-text-decoration - The editor palette font text decoration CSS custom property.
 * @cssprop {String} --color-editor-palette-font-text-transform - The editor palette font text transform CSS custom property.
 * @cssprop {String} --color-editor-palette-font-weight - The editor palette font weight CSS custom property.
 * @cssprop {String} --color-editor-palette-foreground-color - The editor palette foreground color CSS custom property.
 * @cssprop {String} --color-editor-palette-gap - The editor palette gap CSS custom property.
 * @cssprop {String} --color-editor-palette-height - The editor palette height CSS custom property.
 * @cssprop {String} --color-editor-palette-padding-bottom - The editor palette padding bottom CSS custom property.
 * @cssprop {String} --color-editor-palette-padding-left - The editor palette padding left CSS custom property.
 * @cssprop {String} --color-editor-palette-padding-right - The editor palette padding right CSS custom property.
 * @cssprop {String} --color-editor-palette-padding-top - The editor palette padding top CSS custom property.
 * @cssprop {String} --color-editor-palette-preview-color-item-size - The editor palette preview color item size CSS custom property.
 * @cssprop {String} --color-editor-palette-shadow - The editor palette shadow CSS custom property.
 * @cssprop {String} --color-editor-palette-shadow-blur - The editor palette shadow blur CSS custom property.
 * @cssprop {String} --color-editor-palette-shadow-color - The editor palette shadow color CSS custom property.
 * @cssprop {String} --color-editor-palette-shadow-offset-x - The editor palette shadow offset x CSS custom property.
 * @cssprop {String} --color-editor-palette-shadow-offset-y - The editor palette shadow offset y CSS custom property.
 * @cssprop {String} --color-editor-palette-shadow-spread - The editor palette shadow spread CSS custom property.
 * @cssprop {String} --color-editor-palette-transition-duration - The editor palette transition duration CSS custom property.
 * @cssprop {String} --color-editor-palette-transition-mode - The editor palette transition mode CSS custom property.
 * @cssprop {String} --color-editor-palette-transition-property - The editor palette transition property CSS custom property.
 * @cssprop {String} --color-editor-palette-translate - The editor palette translate CSS custom property.
 * @cssprop {String} --color-editor-palette-width - The editor palette width CSS custom property.
 *
 * @fires paletteSelect {PaletteSelectEvent} - Fired when a color is selected from the palette
 * @fires paletteAdd {PaletteAddEvent} - Fired when the add button is clicked (for custom palette)
 * @fires paletteChanged {PaletteChangedEvent} - Fired when the active palette is changed
 * @fires paletteCustomChanged {PaletteChangedEvent} - Fired when colors are added or removed from the custom palette. Detail contains { colors: Array<string> }
 *
 * @example
 * Basic usage:
 * ```html
 * <mosaik-color-editor-palette></mosaik-color-editor-palette>
 * ```
 *
 * @example
 * With a pre-selected palette and current color:
 * ```html
 * <mosaik-color-editor-palette selected-palette="Material" current-color="#1976d2"></mosaik-color-editor-palette>
 * ```
 *
 * @example
 * Disabled state:
 * ```html
 * <mosaik-color-editor-palette disabled></mosaik-color-editor-palette>
 * ```
 *
 * @public
 */
export declare class ColorEditorPaletteElement extends ColorEditorPaletteElement_base implements IColorEditorPaletteElementProps {
    private readonly _paletteSelect;
    private readonly _paletteAdd;
    private readonly _paletteChanged;
    private readonly _paletteCustomChanged;
    private _palettes;
    private _selectedPalette;
    private _allowAdd;
    private _currentColor;
    private _panelOpen;
    private _panelAnchor;
    /**
     * Constructs a new instance of the ColorEditorPaletteElement 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 available palettes.
     *
     * @public
     */
    get palettes(): Array<IColorPalette>;
    set palettes(value: Array<IColorPalette>);
    /**
     * Gets or sets the currently selected palette name.
     *
     * @public
     * @attr
     */
    get selectedPalette(): string;
    set selectedPalette(value: string);
    /**
     * Gets or sets whether to show the add button (for custom palettes).
     *
     * @public
     */
    get allowAdd(): boolean;
    set allowAdd(value: boolean);
    /**
     * Gets or sets the current color (used for adding to custom palette).
     *
     * @public
     * @attr
     */
    get currentColor(): string;
    set currentColor(value: string);
    /**
     * Called when a color is selected from the palette.
     * Provides reference to `IPaletteSelectEventDetail` as event detail.
     *
     * @public
     * @readonly
     * @eventProperty
     */
    get paletteSelect(): IEventEmitter<IPaletteSelectEventDetail>;
    /**
     * Called when the add button is clicked.
     * Provides reference to `IPaletteAddEventDetail` as event detail.
     *
     * @public
     * @readonly
     * @eventProperty
     */
    get paletteAdd(): IEventEmitter<IPaletteAddEventDetail>;
    /**
     * Called when the active palette is changed.
     * Provides reference to `IPaletteChangedEventDetail` as event detail.
     *
     * @public
     * @readonly
     * @eventProperty
     */
    get paletteChanged(): IEventEmitter<IPaletteChangedEventDetail>;
    /**
     * Called when colors are added or removed from the custom palette.
     * Provides reference to `IPaletteChangedEventDetail` as event detail.
     *
     * @public
     * @readonly
     * @eventProperty
     */
    get paletteCustomChanged(): IEventEmitter<IPaletteChangedEventDetail>;
    /**
     * Gets whether the panel is open.
     *
     * @public
     */
    get panelOpen(): boolean;
    /**
     * Gets or sets the anchor element for the panel.
     * When set, the panel will be positioned and sized relative to this element.
     *
     * @public
     */
    get panelAnchor(): HTMLElement | null;
    set panelAnchor(value: HTMLElement | null);
    /**
     * Gets the computed panel styles based on the anchor element.
     *
     * @public
     */
    getPanelStyles(): string;
    /**
     * Gets the currently active palette.
     *
     * @public
     */
    getActivePalette(): IColorPalette | undefined;
    /**
     * Handles color item click.
     *
     * @public
     */
    handleColorClick(color: string): void;
    /**
     * Handles add button click.
     *
     * @public
     */
    handleAddClick(): void;
    /**
     * Handles switcher button click.
     *
     * @public
     */
    handleSwitcherClick(): void;
    /**
     * Handles panel close.
     *
     * @public
     */
    handlePanelClose(): void;
    /**
     * Handles palette selection from panel.
     *
     * @public
     */
    handlePaletteSelect(paletteName: string): void;
    /**
     * Adds a color to the custom palette.
     *
     * @param color - The color to add
     * @public
     */
    addColorToCustomPalette(color: string): void;
    /**
     * Removes a color from the custom palette.
     *
     * @param color - The color to remove
     * @public
     */
    removeColorFromCustomPalette(color: string): void;
    /**
     * Gets the colors from the custom (mutable) palette.
     *
     * @returns The array of colors in the custom palette
     * @public
     */
    getCustomPaletteColors(): Array<string>;
    /**
     * Sets the colors for the custom (mutable) palette.
     * This replaces all existing colors in the custom palette.
     *
     * @param colors - The array of colors to set
     * @public
     */
    setCustomPaletteColors(colors: Array<string>): void;
}
/**
 * @public
 */
export declare namespace ColorEditorPaletteElement {
    type Props = IColorEditorPaletteElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-color-editor-palette': ColorEditorPaletteElement;
    }
}
export {};
//# sourceMappingURL=ColorEditorPaletteElement.d.ts.map