import type { IEventDetail } from '@breadstone/mosaik-elements'; import { type IEventEmitter } from '@breadstone/mosaik-elements'; import { DropEvent } from '../../../../../DragDrop'; import type { ITableColumnEditorChangedEventDetail } from '../../../../events/TableEvents'; import { CustomElement } from '../../../Abstracts/CustomElement'; import { TableColumnEditorElementIntl } from './intl/TableColumnEditorElementIntl'; import { ITableColumnEditorElementProps } from './ITableColumnEditorElementProps'; import type { ITableColumnEditorItem } from './ITableColumnEditorItem'; declare const TableColumnEditorElement_base: (abstract new (...args: Array) => import("../../../../Behaviors/Themeable").IThemeableProps) & typeof CustomElement & import("../../../../Behaviors/Themeable").IThemeableCtor; /** * TableColumnEditor - A standalone component for managing table column visibility and order. * * @description * The TableColumnEditor component provides an interface for users to search, toggle visibility, * and reorder table columns via drag-and-drop. It is designed to be hosted in any container * (Dialog, Popover, Flyout, Drawer) by the consumer. * * @name TableColumnEditor * @element mosaik-table-column-editor * @category Selectors * * @csspart checkbox - The visibility toggle checkbox. * @csspart drag-handle - The drag handle icon for reordering. * @csspart filter - The filter part. * @csspart header - The header row containing the select-all checkbox and search input. * @csspart item - A single column item row. * @csspart list - The scrollable list of column items. * @csspart scroll - The scroll part. * @csspart search - The search text input. * @csspart select-all - The select/deselect all checkbox. * @csspart label - The column title label. * * @cssprop {String} --table-column-editor-background-color - Background color. * @cssprop {String} --table-column-editor-border-color - Border color. * @cssprop {String} --table-column-editor-border-radius - Border radius. * @cssprop {String} --table-column-editor-font-family - Font family. * @cssprop {String} --table-column-editor-font-letter-spacing - Font letter spacing. * @cssprop {String} --table-column-editor-font-line-height - Font line height. * @cssprop {String} --table-column-editor-font-size - Font size. * @cssprop {String} --table-column-editor-font-text-decoration - The column editor font text decoration CSS custom property. * @cssprop {String} --table-column-editor-font-text-transform - The column editor font text transform CSS custom property. * @cssprop {String} --table-column-editor-font-weight - Font weight. * @cssprop {String} --table-column-editor-foreground-color - Foreground color. * @cssprop {String} --table-column-editor-gap - Gap between header and list. * @cssprop {String} --table-column-editor-item-gap - Gap between items within a row. * @cssprop {String} --table-column-editor-item-hover-background-color - Item hover background. * @cssprop {String} --table-column-editor-item-padding-bottom - Item padding bottom. * @cssprop {String} --table-column-editor-item-padding-left - Item padding left. * @cssprop {String} --table-column-editor-item-padding-right - Item padding right. * @cssprop {String} --table-column-editor-item-padding-top - Item padding top. * @cssprop {String} --table-column-editor-padding-bottom - Root padding bottom. * @cssprop {String} --table-column-editor-padding-left - Root padding left. * @cssprop {String} --table-column-editor-padding-right - Root padding right. * @cssprop {String} --table-column-editor-padding-top - Root padding top. * @cssprop {String} --table-column-editor-shadow - The column editor shadow CSS custom property. * @cssprop {String} --table-column-editor-shadow-blur - The column editor shadow blur CSS custom property. * @cssprop {String} --table-column-editor-shadow-color - The column editor shadow color CSS custom property. * @cssprop {String} --table-column-editor-shadow-offset-x - The column editor shadow offset x CSS custom property. * @cssprop {String} --table-column-editor-shadow-offset-y - The column editor shadow offset y CSS custom property. * @cssprop {String} --table-column-editor-shadow-spread - The column editor shadow spread CSS custom property. * @cssprop {String} --table-column-editor-transition-duration - Transition duration. * @cssprop {String} --table-column-editor-transition-mode - Transition timing function. * @cssprop {String} --table-column-editor-transition-property - Transition property. * @cssprop {String} --table-column-editor-translate - The column editor translate CSS custom property. * * @fires tableColumnEditorChanged {TableColumnEditorChangedEvent} - Fired when columns are changed. * * @dependency mosaik-checkbox - The Checkbox element. * @dependency mosaik-dismiss - The Dismiss element. * @dependency mosaik-icon - The Icon element. * @dependency mosaik-scroll - The Scroll element. * @dependency mosaik-searchbox - The Searchbox element. * @dependency mosaik-text - The Text element. * * @example * Column editor hosted inside a dialog for managing table columns: * ```html * * ``` * * @public */ export declare class TableColumnEditorElement extends TableColumnEditorElement_base { private readonly _intl; private readonly _tableColumnEditorChanged; private readonly _tableColumnEditorDismissed; private _columns; private _filter; private _isUpdating; /** * @public */ constructor(); /** * Returns the `is` property. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `columns` property. * The columns to display and edit. * * @public */ get columns(): Array; set columns(value: Array); /** * Gets the `intl` property. * The internationalization object for configuring labels and placeholders. * * @public * @readonly */ get intl(): TableColumnEditorElementIntl; /** * Gets the current filter text. * * @private * @hidden */ get filter(): string; /** * Gets whether all columns are currently visible. * * @private * @hidden */ get allVisible(): boolean; /** * Gets the filtered columns based on the current filter text. * * @private * @hidden */ get filteredColumns(): ReadonlyArray; /** * Gets whether drag-and-drop reordering is currently enabled. * Disabled when a filter is active since indices would not match. * * @private * @hidden */ get isDragEnabled(): boolean; /** * Called when the column editor changes. * Provides reference to `ITableColumnEditorChangedEventDetail` as event argument. * * @public * @readonly * @eventProperty * @type IEventEmitter */ get tableColumnEditorChanged(): IEventEmitter; /** * Called when the column editor is dismissed. * Provides reference to `IEventDetail` as event argument. * * @public * @readonly * @eventProperty * @type IEventEmitter */ get tableColumnEditorDismissed(): IEventEmitter; /** * Dismisses the column editor by emitting the dismissed event. * * @public */ dismiss(): void; /** * Sets the visibility of a column by key. * * @private * @hidden */ setColumnVisibility(key: string, visible: boolean): void; /** * Toggles visibility of all columns. * * @private * @hidden */ toggleAll(visible: boolean): void; /** * Handles filter input changes from the search box. * * @private * @hidden */ handleFilterChange(query: string): void; /** * Handles a drop event for reordering columns. * * @private * @hidden */ handleDrop(event: DropEvent): void; /** * Emits the columns changed event with the current state. * * @private */ private emitColumnsChanged; } /** * @public */ export declare namespace TableColumnEditorElement { type Props = ITableColumnEditorElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-table-column-editor': TableColumnEditorElement; } } export {}; //# sourceMappingURL=TableColumnEditorElement.d.ts.map