import { LitElement, PropertyValues } from 'lit'; import { TableContextType } from './table-context'; import { SORT_DIRECTION, TABLE_CELL_ALIGN } from './defs'; /** * `kyn-th` Web Component. * * Represents a custom table header cell (``) for Shidoka's design system tables. * Provides sorting functionality when enabled and allows alignment customization. * * @fires on-sort-changed - Dispatched when the sort direction is changed. `detail: {sortDirection: string, sortKey: string } ` * @fires on-column-resize - Dispatched when the column is resized. `detail: { columnIndex: number, newWidth: string }` * @slot unnamed - The content slot for adding header text or content. * @slot column-filter - slot for column filter. */ export declare class TableHeader extends LitElement { static styles: import("lit").CSSResult; /** aria role. * @internal */ accessor role: string; /** Determines if the cell should have a denser layout. */ accessor dense: boolean; /** * Context consumer for the table context. * Updates the cell's dense properties when the context changes. * @private * @ignore * @type {ContextConsumer} */ private accessor _contextConsumer; /** * Updates the cell's dense properties when the context changes. * @param {TableContextType} context - The updated context. */ handleContextChange: ({ dense }: TableContextType) => void; /** * Specifies the alignment of the content within the table header. * Options: 'left', 'center', 'right' */ accessor align: TABLE_CELL_ALIGN; /** * Specifies if the column is sortable. * If set to true, an arrow icon will be displayed unpon hover, * allowing the user to toggle sort directions. */ accessor sortable: boolean; /** Specifies the direction of sorting applied to the column. */ accessor sortDirection: SORT_DIRECTION; /** * The textual content associated with this component. * Represents the primary content or label that will be displayed. */ accessor headerLabel: string; /** * The unique identifier representing this column header. * Used to distinguish between different sortable columns and * to ensure that only one column is sorted at a time. */ accessor sortKey: string; /** * Determines whether the content should be hidden from visual view but remain accessible * to screen readers for accessibility purposes. When set to `true`, the content * will not be visibly shown, but its content can still be read by screen readers. * This is especially useful for providing additional context or information to * assistive technologies without cluttering the visual UI. */ accessor visiblyHidden: boolean; /** * Sets a fixed width for the cell. * Accepts standard CSS width values (e.g., '150px', '50%'). */ accessor width: string; /** * Sets a maximum width for the cell. * Accepts standard CSS width values (e.g., '150px', '50%'). */ accessor maxWidth: string; /** * Sets a minimum width for the cell; * Accepts standard CSS width values (e.g., '150px', '50%'). * @type {string} */ accessor minWidth: string; /** * Enables resizing for this column. * When true, a resize handle appears on the right edge of the column. */ accessor resizable: boolean; /** Assistive resize handle text for screen readers. */ accessor assistiveResizeText: string; /** * Sets a resize minimum width for the cell(supports 'px'.e.g., '150px'); */ accessor resizeMinWidth: string; /** * Sets a resize maximum width for the cell (supports 'px'e.g., '150px'); */ accessor resizeMaxWidth: string; /** * @ignore */ accessor listItems: Array; /** * Indicates whether the column is currently being resized. Used to manage state during the resize operation. * @internal */ private accessor _isResizing; /** * Table height for extending resize handle during drag * @ignore */ private accessor _tableHeightDuringResize; /** * The initial X-coordinate of the mouse when the resize operation starts. Used to calculate the change in width during resizing. * @ignore */ private accessor _resizeStartX; /** * The initial width of the column when the resize operation starts. Used as a reference point to calculate the new width during resizing. * @ignore */ private accessor _resizeStartWidth; /** * For keeping track of the initial widths of all columns before resizing starts. * @ignore */ private accessor _columnWidthsSnapshot; /** * Stores the current resized column width during drag * @ignore */ private accessor _resizedColumnWidth; /** * Resets the sorting direction of the component to its default state. * Useful for initializing or clearing any applied sorting on the element. */ resetSort(): void; /** * Assistive text for screen readers. * @ignore */ accessor assistiveText: string; /** * Toggles the sort direction between ascending, descending, and default states. * It also dispatches an event to notify parent components of the sorting change. */ private toggleSortDirection; updated(changedProperties: PropertyValues): void; getTextContent(): void; /** * The group label text when this header is inside a kyn-th-group. * Set by the parent kyn-th-group component. * @ignore */ private accessor _groupLabel; /** * Whether this is the first child in a stacked header group. * @ignore */ private accessor _isGroupFirst; /** * Whether the group label text is truncated. * Used to determine if a title attribute should be shown. * @ignore */ private accessor _isGroupLabelTruncated; connectedCallback(): void; /** * Syncs internal state from group attributes and triggers measurement. * @ignore */ private _syncGroupAttributes; /** * Checks if the group label text is truncated. * @ignore */ private _checkGroupLabelTruncation; /** * Updates header row attributes like data-first-in-row, and data-last-group. * Should be called whenever the DOM structure changes. * @ignore */ private _updateHeaderRowAttributes; /** * Checks if there's a non-stacked kyn-th following the current element. * @ignore */ private _hasFollowingNonGroupedTh; /** * Sets up a ResizeObserver for all stacked children to trigger group dimension updates. * @ignore */ private _setupGroupResizeObserver; disconnectedCallback(): void; /** * Handle window resize to update group label dimensions. * @ignore */ private _handleWindowResize; /** * MutationObserver for group attribute changes. * @ignore */ private _groupAttrObserver?; /** * ResizeObserver for the group label bar to react to text wrapping. * @ignore */ private _groupLabelResizeObserver?; /** * Measure the label bar height for consistent spacing across all siblings * @ignore */ private _measureGroupHeight; /** * Called by ResizeObserver when the host cell resizes (on viewport change). * Measures ALL group label heights in the same header row and applies * the maximum height to all groups, ensuring uniform row height. * Uses immediate measurement with fallback to rAF to ensure accurate sizing. * @ignore */ private _updateGroupLabelDimensions; /** Handle Resize Start * @ignore */ private _handleResizeStart; /** Handle Resize Move * @internal */ private _handleResizeMove; /** @internal */ private _debounceResize; private _handleResizeHandleHeight; /** * Handle resize handle hover - set height to table height * @internal */ private _handleResizeHandleHover; /** * Handle resize handle leave - reset height * @internal */ private _handleResizeHandleLeave; /** Handle Resize End * @internal */ private _handleResizeEnd; /** * Apply width to all header column cells based on the resized width. * @ignore */ private _applyWidthToAllCells; /** * Utility function to parse constraint values (min/max width) from string to number. * @ignore */ private _parseConstraintValue; /** * Get the index of the current column when resize. * @ignore */ private _getColumnIndex; /** * Lock every column to its exact current width to prevent any layout shifts during resizing. * @ignore */ private _lockAllColumnsExactly; /** * * @ignore */ private _updateTableWidthFromSnapshot; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { 'kyn-th': TableHeader; } } //# sourceMappingURL=table-header.d.ts.map