import { default as CxSpace } from '../../../atoms/src/components/space/space.ts';
import { default as CxTable } from '../../../atoms/src/components/table/table.ts';
import { default as CxTypography } from '../../../atoms/src/components/typography/typography.ts';
import { default as CortexElement } from '../../../base/src/cortex-element.ts';
import { default as CxColorSwatch } from '../../../molecules/src/color-swatch/color-swatch.ts';
import { ColorSwatchData } from '../../../types/src/color-swatch';
import { CxColorSwatchGroupVariant } from '../../../types/src/color-swatch-group';
import { CSSResultGroup } from 'lit';

/**
 * @summary Color Swatch Group is used to display a group of color swatches.
 *
 * @cssproperty [--padding=0] - Padding of the container
 * @cssproperty [--grid-gap=var(--cx-spacing-medium)] - Gap size for Grid variant (horizontal & vertical)
 * @cssproperty [--swatch-group-horizontal-gap=-50px] - Gap size for Circle variant (horizontal) (use negative value for overlapping)
 * @cssproperty [--swatch-group-vertical-gap=-50px] - Gap size for Circle variant (vertical) (use negative value for overlapping)
 *
 * @csspart base - The component's base wrapper.
 *
 * @typedef CxColorSwatchGroupVariant - 'table' | 'grid' | 'circles'
 * @typedef ColorSwatchGroupData - {
 *   name: string;
 *   hex: string;
 *   rgb: string;
 *   cmyk: string;
 *   pms: string;
 *   palette?: string;
 * }
 */
export default class CxColorSwatchGroup extends CortexElement {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-color-swatch': typeof CxColorSwatch;
        'cx-space': typeof CxSpace;
        'cx-table': typeof CxTable;
        'cx-typography': typeof CxTypography;
    };
    private readonly localize;
    /**
     * Container ref for width reading
     */
    containerEl: HTMLDivElement;
    tableEls: NodeListOf<CxTable>;
    /**
     * Color swatch group variant
     */
    variant: CxColorSwatchGroupVariant;
    /**
     * A json string of an array of color swatch data
     */
    data: ColorSwatchData[];
    /**
     * Maximum number of columns to display, this applies to grid variant only
     * In smaller screen sizes, the color swatch boxes automatically drop down if there is no available spaces
     */
    maxCol: number;
    /**
     * If all color swatches' color code can be copied
     */
    canCopy: boolean;
    /**
     * Color codes to show in the swatches
     */
    showCodes: string[];
    multiLanguage: boolean;
    /**
     * Breakpoints for responsive design
     */
    breakpoints: [number, number, number];
    /**
     * Device type
     */
    private deviceType;
    /**
     * Current total grid column
     */
    private currentCol;
    private isFocused;
    canFocusContainer: boolean;
    isContainerFocused: boolean;
    constructor();
    runFirstUpdated(): void;
    runConnectedCallback(): void;
    disconnectedCallback(): void;
    private handleWindowResize;
    /**
     * Only grid variant: Handle resize to check if maximum column exceed so the grid wont expand more
     */
    handleResize(): void;
    private handleKeyDown;
    private handleFocusIn;
    private handleFocusOut;
    /**
     * Filter out the columns that are not in the showCodes
     */
    private getTableColumns;
    /**
     * Categorize the color swatches by palette
     */
    private categorizeByPalette;
    handleIsFocusedChange(): void;
    /**
     * Get current direction of the color swatch group
     */
    private get currentDirection();
    /**
     * Get the variant of the color swatch
     */
    private get swatchVariant();
    render(): import('lit').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-color-swatch-group': CxColorSwatchGroup;
    }
}
