import { default as CxGrid } from '../../../atoms/src/components/grid/grid.ts';
import { default as CxGridItem } from '../../../atoms/src/components/grid-item/grid-item.ts';
import { default as CxIconButton } from '../../../atoms/src/components/icon-button/icon-button.ts';
import { default as CxImage } from '../../../atoms/src/components/image/image.ts';
import { default as CxSpace } from '../../../atoms/src/components/space/space.ts';
import { default as CxTooltip } from '../../../atoms/src/components/tooltip/tooltip.ts';
import { default as CortexElement } from '../../../base/src/cortex-element.ts';
import { MasonryItem, MasonryItemAction, MasonryVariant } from '../../../types/src/masonry';
import { CSSResultGroup } from 'lit';
import { default as Sortable } from 'sortablejs';

type SpacingProp = '3x-small' | '2x-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | '2x-large' | '3x-large' | '4x-large';
/**
 * @summary The Masonry component arranges its child elements in a masonry layout, allowing for a flexible and responsive grid of items that can vary in height.
 *
 * @event cx-reorder - Emitted when the order of items changes, such as after a drag-and-drop operation.
 * @event cx-masonry-select - Emitted when an item in the masonry layout is clicked.
 */
export default class CxMasonry extends CortexElement {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-grid': typeof CxGrid;
        'cx-grid-item': typeof CxGridItem;
        'cx-icon-button': typeof CxIconButton;
        'cx-image': typeof CxImage;
        'cx-space': typeof CxSpace;
        'cx-tooltip': typeof CxTooltip;
    };
    private readonly list;
    /**
     * Data pass down to masonry
     */
    data: MasonryItem[];
    /**
     * The variant of the masonry layout.
     */
    variant: MasonryVariant;
    /**
     * The number of columns in the masonry layout.
     */
    cols: number;
    /**
     * Masonry row height
     */
    rowHeight: string;
    /**
     * Masonry's actions
     */
    actions: MasonryItemAction[];
    /**
     * Enables drag-and-drop reordering of items in the masonry layout.
     */
    sortable: boolean;
    /**
     * The spacing between items in the masonry layout. This can be set to one of the predefined spacing values.
     */
    spacing: SpacingProp;
    /**
     * The key to use for the id of the items in the masonry layout.
     */
    idKey: keyof MasonryItem;
    private sortableInstance;
    private previous;
    /**
     * A boolean property that indicates whether the drag operation should be aborted.
     * When set to `true`, the current drag action will be canceled,
     * and the dragged items will be placed back to their original position.
     */
    abortDrag: boolean;
    constructor();
    private getAllItems;
    handleStart(evt: Sortable.SortableEvent): void;
    handleEnd(evt: Sortable.SortableEvent): Promise<void>;
    private destroySortable;
    private initSortable;
    handleSortableChange(): void;
    connectedUpdatedCallback(): void;
    disconnectedCallback(): void;
    handleItemClick(event: MouseEvent, item: MasonryItem): void;
    handleSortableUpdate(event: Sortable.SortableEvent): void;
    renderActions(item: MasonryItem): import('lit').TemplateResult<1>;
    renderMasonry(): import('lit').TemplateResult<1>;
    renderStandard(): import('lit').TemplateResult<1>;
    render(): import('lit').TemplateResult<1>;
}
export { type MasonryItem };
declare global {
    interface HTMLElementTagNameMap {
        'cx-masonry': CxMasonry;
    }
}
