import { default as CxIconButton } from '../../../atoms/src/components/icon-button/icon-button.ts';
import { default as CxTooltip } from '../../../atoms/src/components/tooltip/tooltip.ts';
import { default as CortexElement } from '../../../base/src/cortex-element.ts';
import { ColumnData } from '../../../types/src/multi-select';
import { TemplateResult } from 'lit';
import { default as CxBoard } from './components/board/board';

export type CxMultiSelectChangeEvent = CustomEvent<Record<PropertyKey, never>>;
declare global {
    interface GlobalEventHandlersEventMap {
        'cx-multi-select-change': CxMultiSelectChangeEvent;
    }
}
/**
 * @summary Multi-select allows the user to select multiple items from a list. The items can be moved between two columns. The user can move items between the columns by dragging and dropping them.
 * @element cx-multi-select
 *
 * @event {{ items: BoardItem[], name: string }} cx-multi-select-change - Emitted when the list items change.
 *
 * @typedef BoardItem - {
 *   group: string;
 *   id: string;
 *   index?: string;
 *   text: string;
 *   tooltip: string;
 * }
 *
 * @typedef ColumnData - {
 *   id: string;
 *   items: BoardItem[];
 *   sort?: boolean;
 *   title: string;
 * }
 */
export default class CxMultiSelect extends CortexElement {
    static readonly styles: import('lit').CSSResult[];
    static readonly dependencies: {
        'cx-board': typeof CxBoard;
        'cx-icon-button': typeof CxIconButton;
        'cx-tooltip': typeof CxTooltip;
    };
    private readonly localize;
    multiSelect: HTMLElement;
    board1: CxBoard;
    board2: CxBoard;
    firstColumnData: ColumnData;
    secondColumnData: ColumnData;
    configurable: boolean;
    ignoreTypes: string[];
    addLimit: number | undefined;
    private itemMap;
    selectedItems: Record<string, string[]>;
    private initialSecondColumnItems;
    get firstColumnItemIds(): string[];
    get secondColumnItemIds(): string[];
    /**
     * Validates the changes made to the items array based on the specified type of action ('add' or 'remove').
     * If an add limit is set, it checks whether the new items exceed the allowed limit.
     * If the limit is exceeded, a warning toast notification is displayed.
     *
     * @param items - The current array of items.
     * @param oldItems - The previous array of items before the change.
     * @param type - The type of action performed, either 'add' or 'remove'.
     * @returns A boolean indicating whether the changes are valid (true) or not (false).
     */
    private isValidChanges;
    private handleBoardChange;
    private handleSelectedChange;
    private handleMoveItems;
    private handleMoveItemsRight;
    private handleMoveItemsLeft;
    onDataChange(): void;
    runFirstUpdated(): void;
    private moveSelectedItemRight;
    private moveSelectedItemLeft;
    render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-multi-select': CxMultiSelect;
    }
    interface GlobalEventHandlersEventMap {
        'cx-multi-select-change': CxMultiSelectChangeEvent;
    }
}
