import '../../content/icon/icon';
import '../../inputs/button/button';
import '../../inputs/checkbox/checkbox';
import '../../inputs/combobox/combobox';
import '../../inputs/select/select';
import '../../overlay/popover/popover';
import { type DataGridColumn, type DataGridView, type FilterOption, type SelectionMode, type SortDirection, type SortState } from './datagrid-model';
type SortMode = 'client' | 'server';
export { COLUMN_TAG } from './datagrid-column';
export type { DataGridView, FilterOperator, FilterOption } from './datagrid-model';
/**
 * Returns the Lucide icon name for a column's sort state.
 * Pure function — no closure dependency on the grid model.
 */
export declare function sortIconName(state: SortState, key: string): string;
/**
 * Returns the WAI-ARIA `aria-sort` value for a column.
 * Pure function — independently unit-testable.
 */
export declare function ariaSortValue(state: SortState, key: string): 'ascending' | 'descending' | 'none';
export type OreDataGridEvents<T = Record<string, unknown>> = {
    /** Fired when the user cycles the density via the toolbar button. */
    'density-change': {
        density: 'compact' | 'cozy' | 'comfortable';
    };
    /** Fired when the active page changes. */
    'page-change': {
        pageIndex: number;
        pageSize: number;
    };
    /** Fired when a row is expanded or collapsed. */
    'row-expand': {
        expanded: boolean;
        key: string;
    };
    /** Fired when row selection changes. */
    'selection-change': {
        keys: string[];
        rows: T[];
    };
    /** Fired when the sort column or direction changes. */
    'sort-change': {
        direction: SortDirection;
        key: string;
    };
    /** Fired when the active view tab changes. detail: { id, label } */
    'view-change': {
        id: string;
        label: string;
    };
};
export type OreDataGridProps<T = Record<string, unknown>> = {
    /**
     * The ID of the currently active view. Must match an `id` in `views`.
     * When omitted, no view is active (all data shown).
     * @example `grid.activeView = 'open'`
     */
    activeView?: string;
    /**
     * Column definitions (imperative API). Takes precedence over `<ore-column>` children.
     * Passing `[]` explicitly clears declarative children.
     * Pass `undefined` (or omit) to use `<ore-column>` children instead.
     * @example
     * ```js
     * grid.columns = [
     *   { key: 'name', label: 'Name', sortable: true },
     *   { key: 'email', label: 'Email' },
     * ];
     * ```
     */
    columns?: DataGridColumn<T>[];
    /** Cell density: `'compact'` | `'cozy'` (default) | `'comfortable'` */
    density?: 'compact' | 'cozy' | 'comfortable';
    /** Disable all interaction. */
    disabled?: boolean;
    /** Text shown when there are no rows. */
    emptyText?: string;
    /**
     * Enable row expansion. When set, each row gets a toggle button.
     * Requires at least one column to have a `renderExpanded` function.
     *
     * @security The `renderExpanded` callback's returned HTML string is inserted through
     * Ore's `unsafeHtml()` directive. If data originates from untrusted user input, sanitize
     * it before returning (for example, with DOMPurify or your CSP-compliant sanitizer).
     */
    expandable?: boolean;
    /**
     * Pre-defined filter option definitions per column key.
     * When provided, these options replace the auto-derived ones in the Filter popover.
     * @example
     * ```js
     * grid.filterOptions = [
     *   { key: 'role', label: 'Role', options: [{ value: 'Admin' }, { value: 'Editor' }] },
     * ];
     * ```
     */
    filterOptions?: FilterOption[];
    /** Stretch the grid to fill its container's width. */
    fullwidth?: boolean;
    /**
     * Function that returns a unique string key per row.
     * Defaults to `(row) => String(row['id'])`.
     */
    getRowKey?: (row: T) => string;
    /** Accessible label for the grid. Recommended for screen readers. */
    label?: string;
    /** Show a busy/loading state with reduced opacity. */
    loading?: boolean;
    /** Number of rows per page. Defaults to `10`. Set to `0` to disable pagination. */
    pageSize?: number;
    /**
     * Options for the per-page size selector rendered in the footer.
     * When provided, a `ore-select` is shown next to the pagination controls.
     * @example `grid.pageSizeOptions = [10, 25, 50, 100]`
     */
    pageSizeOptions?: number[];
    /**
     * Row data. Pass as a JS property — not serialisable to an HTML attribute.
     * @example
     * ```js
     * grid.rows = [{ id: '1', name: 'Alice', email: 'alice@example.com' }];
     * ```
     */
    rows?: T[];
    /**
     * Accessible label for the search toggle button. Supports localization.
     * Defaults to `'Search'` (open) and `'Close search'` (close).
     * Pass a tuple `[openLabel, closeLabel]` to override both.
     * @example `grid.searchLabel = ['Suchen', 'Suche schließen']`
     */
    searchLabel?: [open: string, close: string];
    /** Placeholder text for the inline search input in the controls bar. */
    searchPlaceholder?: string;
    /**
     * Pre-selected row keys. Setting this from outside will update the internal selection.
     * @example `grid.selectedKeys = ['1', '3']`
     */
    selectedKeys?: string[];
    /** Row selection mode. */
    selectionMode?: SelectionMode;
    /**
     * Whether sorting is client-side (default) or server-side.
     * When `'server'`, `sort-change` fires but items are not sorted by the control.
     */
    sortMode?: SortMode;
    /**
     * A reactive data source from `@vielzeug/sourcerer` (or any compatible object).
     * When set, the source drives row data, pagination, and search — the `rows` prop is ignored.
     * Client-side sort and filter are bypassed; wire `sort-change` to `source.setQuery()` externally.
     * @example
     * ```js
     * import { createPageSource } from '@vielzeug/sourcerer';
     * const source = createPageSource({ load: ({ query, signal }) => api.users(query, { signal }) });
     * grid.source = source;
     * ```
     */
    source?: DataGridSource<T>;
    /** Apply alternating row backgrounds. */
    striped?: boolean;
    /**
     * Named view definitions for the controls bar tab strip.
     * Each view is a label displayed as a tab; switching tabs fires `view-change`.
     * The consumer is responsible for restoring filter/sort state per view.
     * @example
     * ```js
     * grid.views = [
     *   { id: 'all', label: 'All' },
     *   { id: 'open', label: 'Open' },
     *   { id: 'mine', label: 'Mine' },
     * ];
     * grid.activeView = 'all';
     * ```
     */
    views?: DataGridView[];
};
/**
 * An accessible, keyboard-navigable data grid with sorting, pagination,
 * single/multi row selection, inline search, filter, and named views.
 *
 * @element ore-datagrid
 * @element ore-column - Optional declarative column definition child
 *
 * @attr {boolean} disabled - Disable all interaction
 * @attr {boolean} loading - Show busy/loading state
 * @attr {boolean} striped - Apply alternating row backgrounds
 * @attr {boolean} fullwidth - Stretch the grid to fill its container's width
 * @attr {data} search-label - Tuple [openLabel, closeLabel] for the search toggle button
 * @attr {string} search-placeholder - Placeholder for the inline search input
 * @attr {number} page-size - Rows per page (0 = no pagination, default 10)
 * @attr {string} selection-mode - Row selection: 'none' | 'single' | 'multi'
 * @attr {string} sort-mode - Sorting: 'client' (default) | 'server'
 * @attr {string} density - Cell density: compact | cozy (default) | comfortable
 * @attr {string} empty-text - Text shown when there are no rows
 * @attr {string} label - Accessible label for the grid
 * @attr {string} active-view - ID of the currently active view tab
 *
 * @fires selection-change - Fired when row selection changes. detail: { keys: string[], rows: T[] }
 * @fires sort-change - Fired when sort state changes. detail: { key: string, direction: SortDirection }
 * @fires page-change - Fired when page changes. detail: { pageIndex: number, pageSize: number }
 * @fires row-expand - Fired when a row is expanded or collapsed. detail: { expanded: boolean; key: string }
 * @fires view-change - Fired when the active view tab changes. detail: { id: string, label: string }
 *
 * @cssprop --datagrid-bg - Grid background color
 * @cssprop --datagrid-border-color - Grid and cell border color
 * @cssprop --datagrid-radius - Grid border radius
 * @cssprop --datagrid-shadow - Grid box shadow
 * @cssprop --datagrid-header-bg - Column header background
 * @cssprop --datagrid-row-hover-bg - Row hover background
 * @cssprop --datagrid-row-selected-bg - Selected row background
 * @cssprop --datagrid-stripe-bg - Even-row stripe background
 * @cssprop --datagrid-cell-padding-x - Cell horizontal padding
 * @cssprop --datagrid-cell-padding-y - Cell vertical padding
 * @cssprop --datagrid-cell-max-width - Maximum cell content width before truncating
 * @cssprop --datagrid-max-height - Max scrollable height of the table area
 * @cssprop --datagrid-font-size - Base font size for cells
 *
 * @part controls - The controls bar (tabs + action row)
 * @part table - The `<table>` element
 * @part thead - The `<thead>` element
 * @part tbody - The `<tbody>` element
 * @part row - A body `<tr>` element
 * @part cell - A body `<td>` element
 * @part footer - The pagination footer bar
 *
 * @example
 * ```html
 * <ore-datagrid id="grid" label="Users" selection-mode="multi"></ore-datagrid>
 * <script>
 *   const grid = document.getElementById('grid');
 *   grid.columns = [
 *     { key: 'name', label: 'Name', sortable: true },
 *     { key: 'role', label: 'Role' },
 *   ];
 *   grid.rows = [
 *     { id: '1', name: 'Alice', role: 'Admin' },
 *     { id: '2', name: 'Bob',   role: 'Viewer' },
 *   ];
 *   grid.views = [{ id: 'all', label: 'All' }, { id: 'open', label: 'Open' }];
 *   grid.activeView = 'all';
 * </script>
 * ```
 */
/**
 * Minimal structural interface for a reactive data source accepted by `ore-datagrid`.
 *
 * Any page-shaped `@vielzeug/sourcerer` source satisfies this interface automatically — no direct
 * sourcerer import is required in refine.
 *
 * When `source` is set on the grid:
 * - `rows` prop is ignored; `source.snapshot.data` drives displayed items.
 * - Pagination reads `source.snapshot.pagination`.
 * - Prev/next buttons call `source.page.previous()` / `source.page.next()`.
 * - Search calls `source.setQuery({ search })`.
 * - `source.snapshot.isFetching` contributes to the grid's `aria-busy` state.
 * - Client-side sort and filter are bypassed; wire `sort-change` to `source.setQuery()` externally.
 *
 * @example
 * ```ts
 * import { createPageSource } from '@vielzeug/sourcerer';
 *
 * const source = createPageSource({
 *   load: ({ query, signal }) =>
 *     fetch(`/api/users?page=${query.page}&limit=${query.pageSize}&search=${query.search}`, { signal })
 *       .then(r => r.json()),
 * });
 *
 * const grid = document.querySelector('ore-datagrid');
 * grid.source = source;
 * ```
 */
export type DataGridSource<T = Record<string, unknown>> = {
    readonly page?: {
        next(): Promise<void> | void;
        previous(): Promise<void> | void;
    };
    setQuery?(changes: {
        search?: string;
    }): Promise<void> | void;
    readonly snapshot: {
        readonly data: readonly T[];
        readonly error: {
            message: string;
        } | null;
        readonly isFetching: boolean;
        readonly pagination: {
            readonly count: number;
            readonly hasNext: boolean;
            readonly hasPrevious: boolean;
            readonly index: number;
            readonly kind: 'page';
            readonly size: number;
            readonly total: number;
        };
        readonly query: {
            readonly search?: string;
        };
    };
    subscribe(listener: (snapshot: DataGridSource<T>['snapshot']) => void): () => void;
};
export declare const DATAGRID_TAG: "ore-datagrid";
//# sourceMappingURL=datagrid.d.ts.map