import { LitElement, PropertyValues, TemplateResult } from 'lit';
import { LiveData } from '../../reactive/LiveData.js';
import '@material/web/icon/icon.js';
import '@material/web/menu/menu.js';
import '@material/web/menu/menu-item.js';
import '@material/web/focus/md-focus-ring.js';
/**
 * Options for rendering a table cell.
 */
export interface CellRenderOptions {
    /**
     * CSS classes to apply to the cell.
     */
    classes?: string[];
    /**
     * Data attributes to add to the cell (e.g., `data-id="my-id"`).
     */
    data?: Record<string, string | number | boolean>;
    /**
     * The value of the aria-label to render on the cell.
     */
    ariaLabel?: string;
    /**
     * Used with interactive elements within the cell.
     * The content of the cell should have exactly one element
     * with the `tabindex=-1`. The table will automatically
     * focus on that element when activated.
     */
    delegateFocus?: boolean;
    /**
     * Used for accessibility. Should be set on the cell that represents
     * the name for the row, like, a person name or a file name.
     */
    isPrimary?: boolean;
}
/**
 * Options for rendering a table header cell. Extends CellRenderOptions.
 */
export interface HeaderCellRenderOptions extends CellRenderOptions {
    /**
     * The name of the sort property.
     */
    sort?: string;
}
export interface CellPosition {
    /**
     * The index of the selected row
     */
    row: number;
    /**
     * The index of the selected cell
     */
    col: number;
    /**
     * Whether the logic should ignore setting up focus.
     * This is used when tracking cell selection when using a pointer device.
     */
    ignoreFocus?: boolean;
}
export interface EventCellInfo {
    /**
     * The cell element.
     */
    cell: HTMLElement;
    /**
     * The column index
     */
    col: number;
    /**
     * The **table** row index (not items)
     */
    row: number;
}
/**
 * A versatile and accessible data table web component.
 *
 * The `DataTable` component provides a highly customizable and accessible way to display tabular data.
 * It offers features such as:
 *
 * - **Accessibility:** Built with ARIA roles and attributes for screen reader compatibility and keyboard navigation.
 * - **Customizable Cells:** Allows complete control over the content and rendering of each cell in the table.
 * - **Header Customization:** Provides flexibility in defining and rendering table headers, including sorting.
 * - **Selection:** Supports single, multiple, or no selection of rows.
 * - **Activation:** Enables the activation of rows (e.g., via double-click or Enter/Space key).
 * - **Infinite Scrolling:** Supports "load more" functionality (infinite scroll) using a sentinel element.
 * - **Sorting:** Allows sorting of data by clicking on sortable header cells.
 * - **Keyboard Navigation:** Full keyboard support for navigating through the table.
 * - **Empty State:** Customizable content to display when the table has no data.
 * - **Focus Management:** Properly manages focus for both keyboard and pointer interactions.
 *
 * @slot empty - Optional. Content to display when the table is empty (i.e., `items` is an empty array).
 *                Defaults to a message saying "No data to display."
 *
 * @fires select - Dispatched when the selection changes.
 *                  - `detail`: An object with a `selectedItems` property, containing an array of the currently selected items.
 *                  - Example: `{ selectedItems: [item1, item2] }`
 *
 * @fires activate - Dispatched when a row is activated (e.g., double-clicked or Enter/Space pressed).
 *                  - `detail`: The data item that was activated.
 *                  - Example: `item1`
 *
 * @fires scrollend - Dispatched when the user scrolls to the bottom of the table (when the `overflow` property is true).
 *                  - No event detail.
 *
 * @fires sort - Dispatched when the user clicks on a sortable header to change the sorting.
 *                  - `detail`: An object with `column` and `direction` properties.
 *                  - `column`: The name of the column being sorted.
 *                  - `direction`: The sort direction, either "asc" (ascending) or "desc" (descending).
 *                  - Example: `{ column: "name", direction: "asc" }`
 *
 * @csspart table - The underlying `<table>` element.
 * @csspart cell - Individual `<td>` and `<th>` elements.
 * @csspart header-cell - Individual `<th>` elements.
 *
 * @cssprop --md-focus-ring-shape-start-start - The start-start corner shape for the focus ring.
 * @cssprop --md-focus-ring-shape-start-end - The start-end corner shape for the focus ring.
 * @cssprop --md-focus-ring-shape-end-end - The end-end corner shape for the focus ring.
 * @cssprop --md-focus-ring-shape-end-start - The end-start corner shape for the focus ring.
 * @cssprop --md-sys-typescale-label-large-font - The font family for label large.
 * @cssprop --md-sys-typescale-label-large-size - The font size for label large.
 * @cssprop --md-sys-typescale-label-large-tracking - The letter spacing for label large.
 * @cssprop --md-sys-typescale-label-large-height - The line height for label large.
 * @cssprop --md-sys-typescale-label-large-weight - The font weight for label large.
 * @cssprop --md-sys-color-outline-variant - The outline variant color.
 * @cssprop --md-sys-color-secondary-container - The secondary container color.
 * @cssprop --md-icon-size - The size of the icons.
 * @cssprop --md-sys-typescale-title-small-font - The font family for title small.
 * @cssprop --md-sys-typescale-title-small-weight - The font weight for title small.
 * @cssprop --md-sys-typescale-title-small-size - The font size for title small.
 * @cssprop --md-sys-typescale-title-small-tracking - The letter spacing for title small.
 * @cssprop --md-sys-typescale-title-small-height - The line height for title small.
 * @cssprop --md-sys-typescale-body-medium-font - The font family for body medium.
 * @cssprop --md-sys-typescale-body-medium-weight - The font weight for body medium.
 * @cssprop --md-sys-typescale-body-medium-size - The font size for body medium.
 * @cssprop --md-sys-typescale-body-medium-tracking - The letter spacing for body medium.
 * @cssprop --md-sys-typescale-body-medium-height - The line height for body medium.
 *
 * @typeParam T The type of data items in the table.
 *
 * @example
 * ```html
 * <data-table
 *   .items="${myItems}"
 *   selection="multi"
 *   @select="${handleSelect}"
 *   @activate="${handleActivate}"
 *   @scrollend="${handleScrollEnd}"
 *   @sort="${handleSort}"
 *   overflow
 * >
 *   <p slot="empty">No items to display at this time.</p>
 * </data-table>
 * ```
 *
 * @example
 * ```typescript
 * // Inside a subclass of DataTable.
 * // Rendering a name cell.
 * #nameCell(item: MyItem, row: number, col: number): TemplateResult {
 *   return this.renderCell(item.name, row, col, { isPrimary: true });
 * }
 *
 * // Rendering a header cell.
 * override renderHeader(): TemplateResult[] {
 *   return [
 *     this.renderHeaderCell('Name', 0, { sort: 'name' }),
 *     this.renderHeaderCell('Value', 1, { sort: 'value' }),
 *   ];
 * }
 * ```
 */
export declare abstract class DataTable<T extends object> extends LitElement {
    /**
     * The data items to display in the table.
     */
    accessor items: LiveData<T[]> | undefined;
    /**
     * The selection mode. Can be "none", "single", or "multi".
     * - `none`: No selection is allowed.
     * - `single`: Only one item can be selected at a time.
     * - `multi`: Multiple items can be selected.
     * @attribute
     * @default "none"
     */
    accessor selection: 'none' | 'single' | 'multi';
    /**
     * The currently selected items.
     * @default []
     */
    accessor selectedItems: T[];
    /**
     * The ARIA label for the table. Used for accessibility.
     * @attribute
     * @default "Data table"
     */
    accessor ariaLabel: string;
    /**
     * Enables double-click and Enter/Space key activation of table items.
     * When `true`, items can be activated by:
     * - Double-clicking the item.
     * - Focusing on the item and pressing Enter or Space.
     * The `activate` event is dispatched when an item is activated.
     * @attribute
     * @default false
     */
    accessor active: boolean;
    /**
     * Enables the "load more" functionality when the user scrolls to the bottom of the table.
     * When `true`, a sentinel element is added to the bottom of the table. When the sentinel
     * becomes visible, the `scrollend` event is dispatched.
     * This is commonly used for infinite scrolling or lazy loading of data.
     * @attribute
     * @default false
     */
    accessor overflow: boolean;
    /**
     * The name of the property to sort the table by. If set, the table will
     * automatically indicate the sortable header.
     * @attribute
     * @default undefined
     */
    accessor sort: string | undefined;
    /**
     * The direction of the sort. Can be "asc" (ascending) or "desc" (descending).
     * If `sort` is set, this property will be used to determine the sort direction.
     * @attribute
     * @default undefined
     */
    accessor sortDirection: 'asc' | 'desc' | undefined;
    protected lastSelectedIndex: number;
    protected observer?: IntersectionObserver;
    protected sentinel: import("lit-html/directives/ref.js").Ref<HTMLElement>;
    /**
     * The current focus position.
     * It is used to support keyboard navigation.
     *
     * Initially we always allow to focus on the first cell, which
     * should be the first header cell. The keyboard navigation will
     * take over.
     */
    accessor position: CellPosition;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    firstUpdated(): void;
    protected willUpdate(cp: PropertyValues<this>): void;
    protected updated(cp: PropertyValues<this>): void;
    handleLiveData(): void;
    /**
     * @internal
     * @description Creates and configures an `IntersectionObserver` to detect when the sentinel element is visible,
     * indicating the user has scrolled to the bottom of the table.
     *
     * This method sets up the observer to watch the sentinel element. When the sentinel intersects with the component's viewport,
     * it triggers the `scrollend` event.
     *
     * This function is used when `overflow` is set to true.
     *
     * @returns void
     */
    protected createObserver(): void;
    protected revalidateSelection(): void;
    /**
     * @internal
     * @description Handles the intersection of the sentinel element with the viewport.
     *
     * This method is the callback function for the `IntersectionObserver`. When the sentinel becomes visible,
     * it dispatches the `scrollend` event to signal that the user has reached the bottom of the table.
     *
     * @param entries - An array of IntersectionObserverEntry objects.
     * @returns void
     */
    handleIntersection: IntersectionObserverCallback;
    /**
     * @internal
     * @description Extracts information about a cell from an event.
     *
     * This method analyzes the event's composed path to identify the clicked or focused cell (either `<td>` or `<th>`).
     * It returns the cell element, its column index, and its row index.
     * It is also capable of detecting if the user focused on an interactive element within a cell.
     *
     * @param e - The event object (typically a MouseEvent or KeyboardEvent).
     * @returns An object containing the cell element, column index, and row index, or `undefined` if the target is not a cell.
     */
    protected infoFromEvent(e: Event): EventCellInfo | undefined;
    /**
     * @internal
     * @description Gets the number of columns and rows of the table.
     *
     * @returns An object with `cols` and `rows` properties indicating the number of columns and rows.
     */
    protected getSize(): {
        cols: number;
        rows: number;
    };
    /**
     * @internal
     * @description Get the element containing the cell data.
     *
     * @param col - The column index of the cell.
     * @param row - The row index of the cell.
     * @returns An object with the cell element and `delegateFocus` flag, or `undefined` if the cell does not exist.
     */
    protected getCellInfo(col: number, row: number): {
        cell: HTMLElement;
        delegateFocus: boolean;
    } | undefined;
    /**
     * @internal
     * @description Delegates the focus to a specific interactive element within a cell.
     *
     * This method is used when the cell is configured to handle its own focus management (i.e., `delegateFocus` is `true`).
     *
     * @param parent - The parent element (the cell) containing the interactive element.
     * @returns void
     */
    protected delegateFocus(parent: HTMLElement): void;
    /**
     * @internal
     * @description Moves the focus to the specified cell.
     *
     * This method updates the component's internal `position` state and then focuses on the corresponding cell.
     * If the cell has the `delegateFocus` property, it delegates the focus to the first interactive element inside of the cell.
     *
     * @param col - The column index of the cell to focus on.
     * @param row - The row index of the cell to focus on.
     * @returns void
     */
    protected moveFocusTo(col: number, row: number): void;
    /**
     * @internal
     * @description Handles keyboard navigation within the table.
     *
     * This method processes keyboard events to move the focus between cells. It supports arrow keys, Page Up/Down, Home/End, Enter and Space.
     * - ArrowRight: Moves focus to the next cell to the right.
     * - ArrowLeft: Moves focus to the next cell to the left.
     * - ArrowDown: Moves focus to the cell below.
     * - ArrowUp: Moves focus to the cell above.
     * - PageUp: Moves focus to the first row.
     * - PageDown: Moves focus to the last row.
     * - Home: Moves focus to the first cell of the current row (Ctrl+Home moves to the first cell of the first row).
     * - End: Moves focus to the last cell of the current row (Ctrl+End moves to the last cell of the last row).
     * - Enter: Activates the current row.
     * - Space: Manages selection.
     *
     * @param e - The KeyboardEvent object.
     * @returns void
     */
    protected handleKeyDown(e: KeyboardEvent): void;
    /**
     * @internal
     * @description Handles mouse click events on the table.
     *
     * @param e - The MouseEvent object.
     * @returns void
     */
    protected handleClick(e: MouseEvent): void;
    /**
     * @internal
     * @description Manages the selection state based on a mouse or keyboard event.
     *
     * This method determines the row and column from the event target and updates the `selectedItems` array accordingly.
     * It supports single, multiple and no selection based on the `selection` property. It also supports shift-click.
     *
     * @param info - The cell info.
     * @param e - The MouseEvent or KeyboardEvent object.
     * @returns void
     */
    protected manageSelectionFromEvent(info: EventCellInfo, e: MouseEvent | KeyboardEvent): void;
    /**
     * @internal
     * @description Handles shift-click for range selection.
     *
     * When shift-clicking a row, it will select all the items between the last selected item and the clicked item.
     *
     * @param clickedIndex - The index of the clicked item.
     * @param item - The clicked item.
     * @returns void
     */
    protected handleShiftClick(clickedIndex: number, item: T): void;
    /**
     * @internal
     * @description Activates the row associated with the given event.
     *
     * This method is called when a row is double-clicked or when the Enter/Space key is pressed while a row is focused.
     *
     * @param e - The Event object.
     * @returns void
     */
    protected activateFromCellInfo(info: EventCellInfo): void;
    /**
     * @internal
     * @description Handles sorting logic based on the clicked column header.
     *
     * This method updates the `sort` and `sortDirection` properties and dispatches the `sort` event.
     *
     * @param column - The header cell element.
     * @returns void
     */
    protected sortFrom(column: HTMLElement): void;
    /**
     * @public
     * @description Checks if an item is currently selected.
     *
     * @param item - The item to check.
     * @returns `true` if the item is selected, `false` otherwise.
     */
    isSelected(item: T): boolean;
    /**
     * @public
     * @description Toggles the selection state of an item.
     *
     * This method adds or removes an item from the `selectedItems` array.
     *
     * @param item - The item to toggle selection for.
     * @param mode - The selection mode, either 'replace' or 'add' (defaults to 'replace').
     * @returns void
     */
    toggleSelection(item: T, mode?: 'replace' | 'add'): void;
    /**
     * @internal
     * @description Renders the table.
     *
     * @returns A `TemplateResult` for rendering.
     */
    render(): TemplateResult;
    /**
     * @internal
     * @description Renders the empty state of the table.
     *
     * @returns A `TemplateResult` for rendering.
     */
    renderEmpty(): TemplateResult;
    /**
     * @internal
     * @description Renders the table header cells. Must be implemented by subclasses.
     *
     * @returns An array of `TemplateResult` objects representing the header cells.
     */
    abstract renderHeader(): TemplateResult[];
    /**
     * @internal
     * @description Renders the cells for a given row item. Must be implemented by subclasses.
     *
     * @param item The data item for the row.
     * @param index The index that should be passed back to the rendering function. This is not the item index.
     * @returns An array of `TemplateResult` objects representing the cells for the row.
     */
    abstract renderRowValues(item: T, index: number): TemplateResult[];
    /**
     * @internal
     * @description Renders a single row in the table.
     *
     * @param item - The data item for the row.
     * @param index - The index of the row.
     * @returns A `TemplateResult` for rendering.
     */
    protected renderRow(item: T, index: number): TemplateResult;
    /**
     * @internal
     * A helper method to render a standard table cell.
     *
     * @param content The content of the cell.
     * @param row The 0-based row index of the rendered cell
     * @param col The 0-based column index of the rendered cell
     * @param opts Options for rendering the cell (classes, icon, data attributes).
     * @returns A `TemplateResult` representing the rendered cell.
     */
    protected renderCell(content: unknown, row: number, col: number, opts?: CellRenderOptions): TemplateResult;
    /**
     * @internal
     * @description Returns the name of the icon to use for sorting indication.
     *
     * @returns The name of the Material Icon to use (either "arrow_upward" or "arrow_downward").
     */
    get sortIconName(): string;
    /**
     * @internal
     * A helper method to render a table header cell.
     *
     * @param content The content of the header cell.
     * @param opts Options for rendering the header cell (classes, data attributes).
     * @returns A `TemplateResult` representing the rendered header cell.
     */
    protected renderHeaderCell(content: unknown, col: number, opts?: HeaderCellRenderOptions): TemplateResult;
}
//# sourceMappingURL=DataTable.d.ts.map