import { PropertyValues } from 'lit';
import { DDSElement } from "../../base/index.js";
export type HeaderType<T extends string = string> = {
    key: T;
    label: string;
    alignment?: "left" | "right" | "center";
    sortable: boolean;
};
/**
 * The table component is a component that can display multiple data objects in a tabular format.
 *
 * It is modeled on the HTML `<table>` element. However, unlike a normal `<table>` element, this component generates table structure automatically from data. You must provide the `headers` and `rows` properties to define the table structure and content. You can also customize table cell content by providing custom content in slots.
 *
 * By specifying the `rows` property, you can only display plain text content. If you need to display richer content within the row cells, such as an icon or a button, provide custom content using the cell slot pattern: ``slot=${`cell:${rows[j].id}:${headers[i].key}`}``
 *
 * By specifying the headers property, you can only display plain text, define text alignment and sorting buttons. If you need to display richer content within the header cells, such as an icon or a button, provide custom content using the cell slot pattern: ``slot=${`header:${headers[i].key}`}``
 *
 * The table provides two functions: checkboxes and sorting, and you can select the functions you need.
 *
 * Hierarchy:
 * - `daikin-table` > `daikin-table-cell`
 * - `daikin-table` > `daikin-table-header-cell`
 * - `daikin-table` > `daikin-empty-state`
 *
 * @fires change-check - When the checkbox is operated, it returns the array of `id`s that are currently checked.
 * @fires change-sort - When the sort is changed, it returns the current sort key and the order (ascending or descending).
 *
 * @slot header:${headers[i].key} - A slot for the header cell of a table. Use this when you want to display something other than text, such as an icon. Use `daikin-table-header-cell` for the wrapper.
 * @slot cell:${rows[j].id}:${headers[i].key} - A slot for the data cell of a table. Use `daikin-table-cell` for the wrapper.
 * @slot empty - A slot to define the content displayed when the table rows are empty. Typically, the `daikin-empty-state` component can be used.
 *
 * @example
 *
 * ```js
 * import "@daikin-oss/design-system-web-components/components/table/index.js";
 * import "@daikin-oss/design-system-web-components/components/table-cell/index.js";
 * import "@daikin-oss/design-system-web-components/components/table-header-cell/index.js";
 * ```
 *
 * ```html
 * <daikin-table>
 *   <!-- By using a slot, you can add a subtitle below the content in the name column for each row. -->
 *   <daikin-table-cell slot="cell:1:name">
 *     Apple
 *     <span slot="subtitle">This is a autumn fruit.</span>
 *   </daikin-table-cell>
 *   <daikin-table-cell slot="cell:2:name">
 *     Peach
 *     <span slot="subtitle">This is a summer fruit.</span>
 *   </daikin-table-cell>
 *   <daikin-table-cell slot="cell:3:name">
 *     Orange
 *     <span slot="subtitle">This is a winter fruit.</span>
 *   </daikin-table-cell>
 *   <daikin-table-cell slot="cell:4:name">
 *     Strawberry
 *     <span slot="subtitle">This is a spring fruit.</span>
 *   </daikin-table-cell>
 * </daikin-table>
 *
 * <script>
 *   // Set up the table data
 *   const tableElement = document.querySelector('daikin-table');
 *   tableElement.headers = [
 *     { key: 'name', label: 'Name', sortable: true },
 *     { key: 'season', label: 'Season', sortable: true },
 *     { key: 'price', label: 'Price', alignment: 'right', sortable: false },
 *   ];
 *   tableElement.rows = [
 *     { id: '1', name: 'Apple', season: 'Autumn', price: '$2' },
 *     { id: '2', name: 'Peach', season: 'Summer', price: '$4' },
 *     { id: '3', name: 'Orange', season: 'Winter', price: '$1' },
 *     { id: '4', name: 'Strawberry', season: 'Spring', price: '$4' },
 *   ];
 * </script>
 * ```
 */
export declare class DaikinTable<T extends {
    id: string;
} = any> extends DDSElement {
    static readonly styles: import('lit').CSSResult;
    /**
     * Headers of the table.
     * An array of header configuration objects that define the table columns.
     * Each object must have a unique `key` (used to match row data) and a `label` (displayed text).
     *
     * - key: The `key` value corresponds to the property name in the row data (excluding `id`). All `key` values must be unique within the headers array. Use only alphanumeric characters, `$`, and `_` in the `key`.
     * - label: The text displayed in the header cells.
     * - alignment: The text alignment direction. Defaults to left alignment if omitted.
     * - sortable: When `sortable = true`, enables sorting for this column.
     *
     * @example
     * [
     *   { key: 'name', label: 'Name', sortable: true },
     *   { key: 'price', label: 'Price', alignment: 'right', sortable: false },
     * ]
     */
    headers: readonly HeaderType<Extract<keyof T, string>>[];
    /**
     * Rows of the table.
     * An array of data objects where each object represents a table row.
     * Each object must have a unique `id` property and properties that match the `key` values defined in `headers`.
     *
     * @example
     * [
     *   { id: '1', name: 'Apple', price: '$2' },
     *   { id: '2', name: 'Orange', price: '$1' },
     * ]
     */
    rows: T[];
    /**
     * Whether to enable row selection.
     * When `true`, a checkbox will be displayed to the left of each row.
     */
    selectable: boolean;
    /**
     * Whether to enable row sorting.
     * When `true`, a sort button will be displayed to the right of each sortable header cell.
     */
    sortable: boolean;
    /**
     * An array of `id` values for the selected rows.
     */
    selection: string[];
    /**
     * The `key` of the currently sorted column.
     * Used with the `order` property to determine which column is sorted and in which direction.
     *
     * For example, if `sort = "name"` and `order = "asc"`, the table will be sorted by the "name" column in ascending order.
     */
    sort: keyof T | null;
    /**
     * The sort order of the table.
     * Used with the `sort` property.
     *
     * - "asc": ascending order
     * - "desc": descending order
     *
     * For example, if `sort = "price"` and `order = "desc"`, the table will be sorted by the "price" column in descending order.
     */
    order: "asc" | "desc" | null;
    /**
     * Custom sort function for table columns.
     * The function should return a comparison result for ascending order: `0`, `1`, or `-1`.
     */
    sortFunction: {
        [key in keyof T]?: (a: T, b: T, key: key) => number;
    } | ((a: T, b: T, key: keyof T) => number) | false | null;
    private _bulkRowsCheckState;
    /**
     * The rows currently displayed in the table.
     * This is a sorted version of `rows`. Pagination may be added in the future.
     */
    private _currentView;
    private _currentTouchHoverRowId;
    private _tableRef;
    private _updateCurrentView;
    private _emitChangeCheckEvent;
    private _handleHeaderCheckboxChange;
    private _handleBodyCheckboxChange;
    private _handleClickSort;
    private _handleTouchMove;
    private _handleTouchStart;
    private _handleTouchEnd;
    private _updateHeaderCheckboxState;
    private _reflectSlotProperties;
    private _handleSlotChange;
    render(): import('lit-html').TemplateResult<1>;
    protected willUpdate(changedProperties: PropertyValues<this>): void;
    protected updated(changedProperties: PropertyValues<this>): void;
}
declare global {
    interface HTMLElementTagNameMap {
        "daikin-table": DaikinTable;
    }
}
export default DaikinTable;