import { type IDropDownable } from '../../../Behaviors/DropDownable'; import { ColorChangedEvent } from '../../../events'; import type { ColorEditorFormat } from '../../../Types/ColorEditorFormat'; import { CustomElement } from '../../Abstracts/CustomElement'; import { IColorPalette } from '../ColorEditor/IColorPalette'; import type { IColorPickerElementProps } from './IColorPickerElementProps'; declare const ColorPickerElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/DropDownable").IDropDownableProps & IDropDownable) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Valueable").IValueableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Color Picker - A user interface component for selecting colors using the ColorEditor. * * @description * The Color Picker component provides a dropdown interface for selecting colors using * the comprehensive ColorEditor component. It displays a color swatch that, when clicked, * opens a dropdown containing the full color editing experience. * * @element mosaik-color-picker * @category Media * * @slot - Default slot for custom trigger content. * * @csspart editor - The color editor element. * @csspart popup - The floating dropdown container. * @csspart portal - The portal part. * @csspart swatch - The color swatch trigger element. * * @cssprop {String} --color-picker-background-color - The picker background color CSS custom property. * @cssprop {String} --color-picker-border-color - The picker border color CSS custom property. * @cssprop {String} --color-picker-border-radius - The picker border radius CSS custom property. * @cssprop {String} --color-picker-border-style - The picker border style CSS custom property. * @cssprop {String} --color-picker-border-width - The picker border width CSS custom property. * @cssprop {String} --color-picker-font-family - The picker font family CSS custom property. * @cssprop {String} --color-picker-font-letter-spacing - The picker font letter spacing CSS custom property. * @cssprop {String} --color-picker-font-line-height - The picker font line height CSS custom property. * @cssprop {String} --color-picker-font-size - The picker font size CSS custom property. * @cssprop {String} --color-picker-font-text-decoration - The picker font text decoration CSS custom property. * @cssprop {String} --color-picker-font-text-transform - The picker font text transform CSS custom property. * @cssprop {String} --color-picker-font-weight - The picker font weight CSS custom property. * @cssprop {String} --color-picker-foreground-color - The picker foreground color CSS custom property. * @cssprop {String} --color-picker-gap - The picker gap CSS custom property. * @cssprop {String} --color-picker-padding-bottom - The picker padding bottom CSS custom property. * @cssprop {String} --color-picker-padding-left - The picker padding left CSS custom property. * @cssprop {String} --color-picker-padding-right - The picker padding right CSS custom property. * @cssprop {String} --color-picker-padding-top - The picker padding top CSS custom property. * @cssprop {String} --color-picker-shadow - The picker shadow CSS custom property. * @cssprop {String} --color-picker-shadow-blur - The picker shadow blur CSS custom property. * @cssprop {String} --color-picker-shadow-color - The picker shadow color CSS custom property. * @cssprop {String} --color-picker-shadow-offset-x - The picker shadow offset x CSS custom property. * @cssprop {String} --color-picker-shadow-offset-y - The picker shadow offset y CSS custom property. * @cssprop {String} --color-picker-shadow-spread - The picker shadow spread CSS custom property. * @cssprop {String} --color-picker-size - The picker size CSS custom property. * @cssprop {String} --color-picker-transition-duration - The picker transition duration CSS custom property. * @cssprop {String} --color-picker-transition-mode - The picker transition mode CSS custom property. * @cssprop {String} --color-picker-transition-property - The picker transition property CSS custom property. * @cssprop {String} --color-picker-translate - The picker translate CSS custom property. * * @fires colorChanged {ColorChangedEvent} - Fired when the color value changes. * * @dependency mosaik-color-editor - The Color Editor element. * @dependency mosaik-color-swatch - The Color Swatch element. * @dependency mosaik-floating - The Floating element. * @dependency mosaik-portal - The Portal element. * * @example * Basic usage with an initial color value: * ```html * * ``` * * @example * With HSL format and disabled: * ```html * * ``` * * @public */ export declare class ColorPickerElement extends ColorPickerElement_base implements IColorPickerElementProps, IDropDownable { private readonly _clickOutsideController; private _floatingElement; private _value; private _format; private _showAlpha; private _showInputs; private _showPalette; private _showEyeDropper; private _showSwatch; private _palettes; private _selectedPalette; /** * @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 `value` property. * * @public * @override */ get value(): string | null; set value(value: string | null); /** * Gets or sets the color format for the inputs. * * @public */ get format(): ColorEditorFormat; set format(value: ColorEditorFormat); /** * Gets or sets whether to show the alpha slider and input. * * @public */ get showAlpha(): boolean; set showAlpha(value: boolean); /** * Gets or sets whether to show the color inputs. * * @public */ get showInputs(): boolean; set showInputs(value: boolean); /** * Gets or sets whether to show the color palette. * * @public */ get showPalette(): boolean; set showPalette(value: boolean); /** * Gets or sets whether to show the eye dropper button. * * @public */ get showEyeDropper(): boolean; set showEyeDropper(value: boolean); /** * Gets or sets whether to show the color swatch preview in the editor. * * @public */ get showSwatch(): boolean; set showSwatch(value: boolean); /** * Gets or sets the available color palettes. * * @public */ get palettes(): Array; set palettes(value: Array); /** * Gets or sets the currently selected palette name. * * @public */ get selectedPalette(): string; set selectedPalette(value: string); /** * @public * @override */ connectedCallback(): void; /** * @protected * @override */ protected onApplyTemplate(): void; /** * Handles changes from the color editor. * * @private * @template */ onEditorChange(event: ColorChangedEvent): void; /** * @protected */ protected onIsDropDownOpenPropertyChanged(_prev?: boolean, next?: boolean): void; /** * @private */ private onClickedOutside; } /** * @public */ export declare namespace ColorPickerElement { type Props = IColorPickerElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-color-picker': ColorPickerElement; } } export {}; //# sourceMappingURL=ColorPickerElement.d.ts.map