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 |