import { default as CxCopyButton } from '../../../atoms/src/components/copy-button/copy-button.ts';
import { default as CxLineClamp } from '../../../atoms/src/components/line-clamp/line-clamp.ts';
import { default as CxResizeObserver } from '../../../atoms/src/components/resize-observer/resize-observer.ts';
import { default as CxSpace } from '../../../atoms/src/components/space/space.ts';
import { default as CxTypography } from '../../../atoms/src/components/typography/typography.ts';
import { default as CortexElement } from '../../../base/src/cortex-element.ts';
import { CxColorSwatchVariant } from '../../../types/src/color-swatch';
import { CSSResultGroup } from 'lit';

/**
 * @summary A component that displays a color swatch with its associated color codes
 * (HEX, RGB, CMYK, PMS) and provides copy-to-clipboard functionality for each color format.
 *
 * @cssproperty --swatch-size - Size of color swatch container (Circle will use as width for aspect ratio, Oval & Gird will use as height)
 * @cssproperty --swatch-content-padding - Padding of color swatch content
 * @cssproperty --swatch-grid-min-width - Minimum width of color swatch container
 *
 * @csspart base - The component's base wrapper.
 * @csspart name - The color swatch's name wrapper.
 * @csspart content - The container that wraps the main content.
 * @csspart item - Each row in main content.
 * @csspart key - Constant key in information row.
 * @csspart copy-button - Copy button in information row.
 * @csspart value - Value in information row.
 *
 * @typedef CxColorSwatchVariant - 'circle' | 'grid-item' | 'oval'
 */
export default class CxColorSwatch extends CortexElement {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-copy-button': typeof CxCopyButton;
        'cx-line-clamp': typeof CxLineClamp;
        'cx-resize-observer': typeof CxResizeObserver;
        'cx-space': typeof CxSpace;
        'cx-typography': typeof CxTypography;
    };
    private readonly localize;
    /**
     * Internal guard to prevent color round-trip drift
     */
    private ignoreWatchColorChange;
    /**
     * Container ref for width reading
     */
    containerEl: HTMLDivElement;
    /**
     * Color swatch variant
     */
    variant: CxColorSwatchVariant;
    /**
     * Name of swatch
     */
    name: string;
    /**
     * Hex code color of swatch
     */
    hex: string;
    /**
     * RGB code color of swatch
     */
    rgb: string;
    /**
     * Cmyk code color of swatch
     */
    cmyk: string;
    /**
     * Pms code color of swatch
     */
    pms: string;
    /**
     * Make color codes copyable
     */
    canCopy: boolean;
    /**
     * Color codes to show in the swatch
     */
    showCodes: string | string[];
    /**
     * Only focus code when the color swatch is focused
     */
    canFocusCodeOnly: boolean;
    /**
     * No auto convert color codes
     */
    noAutoConvert: boolean;
    /**
     * Text color that contrast to the background
     * Using black and white so as not to be affected by theme switching
     */
    textColor: string;
    /**
     * Responsive typography & gap base on container size
     */
    textVariant: 'body2' | 'body3' | 'small';
    rowGap: 'x-small' | '2x-small' | '3x-small';
    lineClamp: number;
    backgroundColor: string;
    canFocusContainer: boolean;
    isContainerFocused: boolean;
    runFirstUpdated(): void;
    /**
     * Change to default color
     */
    private setDefaultColor;
    /**
     * Handle resize and change typography
     */
    private handleResize;
    handleVariantChange(): void;
    /**
     * Change other values if cmyk change
     */
    handleCmykChange(): void;
    /**
     * Change other values if rgb change
     */
    handleRGBChange(): void;
    /**
     * Change other values if hex change
     */
    handleHexChange(): void;
    /**
     * Handle background and text color after first update
     * Use only hex as priority color
     */
    handleColorChange(): Promise<void>;
    handleCanFocusCodeOnlyChange(): void;
    private handleFocusIn;
    private handleFocusOut;
    render(): import('lit').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-color-swatch': CxColorSwatch;
    }
}
