import { LitElement, TemplateResult } from 'lit'; import '../Pagination/Pagination'; import '../Button/Button'; import '../Icon/Icon'; import '../Checkbox/Checkbox'; import '../InputText/InputText'; declare global { interface HTMLElementTagNameMap { 'ctt-table': CttTable; } } export type CellContent = string | number | TemplateResult | HTMLElement | null | undefined; export interface TableRow { id: string | number; [key: string]: CellContent; } export interface ColumnDefinition { key: string; header: string; width?: string; align?: 'left' | 'center' | 'right'; sortable?: boolean; searchable?: boolean; truncate?: boolean; ariaLabel?: string; } export interface FilterDefinition { id: string; column: string; type: 'text' | 'number' | 'date' | 'select' | 'range'; label: string; options?: Array<{ label: string; value: string | number; }>; placeholder?: string; /** If true, values behave as multi-select (checkbox list). If false, single select. */ multiSelect?: boolean; } export interface FilterState { [filterId: string]: string | number | [number, number] | [number | null, number | null] | Array | null; } export interface SearchState { term: string; columns: string[]; } export interface SortState { column: string | null; direction: 'asc' | 'desc'; } /** * CTT Table Component * * A comprehensive, token-driven data table with dynamic columns & rows, * search/filter, toolbar, pagination, row selection, sorting, and state handling. * * @slot toolbar - Slot for toolbar content (search, filters, buttons) * @slot footer - Slot for footer content above pagination * * @fires table-row-select - Dispatched when a row is selected/deselected * @fires table-selection-change - Dispatched when selection state changes * @fires table-sort - Dispatched when sort is changed * @fires table-search - Dispatched when search term changes * @fires table-filter - Dispatched when filters change * @fires table-page-change - Dispatched when page changes * @fires table-page-size-change - Dispatched when page size changes */ export declare class CttTable extends LitElement { static styles: import("lit").CSSResult[]; columns: ColumnDefinition[]; rows: TableRow[]; allowRowSelection: boolean; allowMultiSelect: boolean; loading: boolean; emptyMessage: string; errorMessage: string; hasError: boolean; enablePagination: boolean; itemsPerPage: number; itemsPerPageOptions: Array<{ label: string; value: number; }>; enableSorting: boolean; enableSearch: boolean; filters: FilterDefinition[]; ariaLabel: string; /** Show/hide the calendar button on the left of the filter trigger */ showCalendarToggle: boolean; private selectedRowIds; private sortState; private searchState; private filterState; private currentPage; private filteredAndSortedRows; private activeStatusTab; private isFilterPopoverOpen; private activeFilterFieldId; private isCalendarOpen; private filterCloseTimeout; /** Used to close popover when clicking outside */ private _onDocumentClick; constructor(); connectedCallback(): void; disconnectedCallback(): void; updated(changedProperties: Map): void; private applySearch; private applyFilters; private updateFilteredRows; private getPaginatedRows; private handleRowSelect; private handleSelectAll; private handleSort; private handlePageChange; private handlePageSizeChange; setSearch(term: string): void; setFilter(filterId: string, value: string | number | [number | null, number | null] | [number, number] | Array | null): void; clearFilters(): void; clearSearch(): void; private getStatusFilterId; private getStatusTabs; private handleStatusTabSelect; private renderStatusTabs; private getActiveFilters; private removeFilter; private renderFilterSummary; private toggleFilterPopover; private closeFilterPopover; private getFilterFieldsForPopover; private getActiveFilterField; private handleFilterFieldHover; private handleFilterFieldClick; private handleFilterFieldLeave; private handlePortalMouseEnter; private renderFilterTrigger; private renderFilterPopover; private handleSearchInput; private renderSearch; private renderHeader; private renderBody; private renderLoadingState; private renderErrorState; private renderSelectionBanner; private getTotalPages; private renderPagination; render(): TemplateResult<1>; }