import { FlowBoardDisplayMode } from '../../../Types/FlowBoardDisplayMode'; import { FlowBoardScrollMode } from '../../../Types/FlowBoardScrollMode'; import { CustomElement } from '../../Abstracts/CustomElement'; import { FlowBoardColumnElement } from './FlowBoardColumnElement'; import { IFlowBoardElementProps } from './IFlowBoardElementProps'; declare const FlowBoardElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Sizeable").ISizeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Gapable").IGapableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Slottable").ISlottableProps & import("../../../Behaviors/Slottable").ISlottable) & (abstract new (...args: Array) => import("../../../Behaviors/Focusable").IFocusableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * FlowBoard - A Kanban-style board container for organizing columns and items. * * @description * The FlowBoard component provides a horizontal container for organizing content * into columns. It supports drag-and-drop reordering of columns and items between * columns. The board can operate in different display modes (tasks, pipeline) that * affect the density and layout of items. * * @name FlowBoard * @element mosaik-flow-board * @category Layouts * * @slot - Default slot for mosaik-flow-board-column elements * @slot append - Slot for add column action (mosaik-flow-board-column-composer) * * @csspart append - The append slot container * @csspart columns - The columns container * @csspart viewport - The scrollable viewport container * * @cssprop {Color} --flow-board-background-color - Background color of the board * @cssprop {String} --flow-board-font-family - The board font family CSS custom property. * @cssprop {String} --flow-board-font-letter-spacing - The board font letter spacing CSS custom property. * @cssprop {String} --flow-board-font-line-height - The board font line height CSS custom property. * @cssprop {String} --flow-board-font-size - The board font size CSS custom property. * @cssprop {String} --flow-board-font-text-decoration - The board font text decoration CSS custom property. * @cssprop {String} --flow-board-font-text-transform - The board font text transform CSS custom property. * @cssprop {String} --flow-board-font-weight - The board font weight CSS custom property. * @cssprop {String} --flow-board-gap - Gap between columns * @cssprop {String} --flow-board-padding - Padding around the viewport * @cssprop {String} --flow-board-padding-bottom - The board padding bottom CSS custom property. * @cssprop {String} --flow-board-padding-left - The board padding left CSS custom property. * @cssprop {String} --flow-board-padding-right - The board padding right CSS custom property. * @cssprop {String} --flow-board-padding-top - The board padding top CSS custom property. * @cssprop {String} --flow-board-shadow - The board shadow CSS custom property. * @cssprop {String} --flow-board-shadow-blur - The board shadow blur CSS custom property. * @cssprop {String} --flow-board-shadow-color - The board shadow color CSS custom property. * @cssprop {String} --flow-board-shadow-offset-x - The board shadow offset x CSS custom property. * @cssprop {String} --flow-board-shadow-offset-y - The board shadow offset y CSS custom property. * @cssprop {String} --flow-board-shadow-spread - The board shadow spread CSS custom property. * @cssprop {String} --flow-board-transition-duration - The board transition duration CSS custom property. * @cssprop {String} --flow-board-transition-mode - The board transition mode CSS custom property. * @cssprop {String} --flow-board-transition-property - The board transition property CSS custom property. * @cssprop {String} --flow-board-translate - The board translate CSS custom property. * * @fires flowBoardBeforeColumnReorder {FlowBoardBeforeColumnReorderEvent} - Before column reorder (cancelable) * @fires flowBoardColumnReorder {FlowBoardColumnReorderEvent} - After column reorder * @fires flowBoardBeforeItemReorder {FlowBoardBeforeItemReorderEvent} - Before item reorder within column (cancelable) * @fires flowBoardItemReorder {FlowBoardItemReorderEvent} - After item reorder within column * @fires flowBoardBeforeItemMove {FlowBoardBeforeItemMoveEvent} - Before item move between columns (cancelable) * @fires flowBoardItemMove {FlowBoardItemMoveEvent} - After item move between columns * @fires flowBoardDragStart {FlowBoardDragStartEvent} - When a drag operation starts (column or item) * * @example * Basic board with columns: * ```html * * * To Do * * Task 1 * * * * * ``` * * @public */ export declare class FlowBoardElement extends FlowBoardElement_base implements IFlowBoardElementProps { private _displayMode; private _dragdrop; private _scrollMode; private readonly _flowBoardBeforeColumnReorder; private readonly _flowBoardColumnReorder; private readonly _flowBoardBeforeItemReorder; private readonly _flowBoardItemReorder; private readonly _flowBoardBeforeItemMove; private readonly _flowBoardItemMove; private readonly _flowBoardDragStart; private readonly _provider; private readonly _slotController; private readonly _inlineStyleController; private readonly _columnDropList; constructor(); /** * Returns the `is` property. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the display mode affecting density and layout. * * @public * @attr display-mode */ get displayMode(): FlowBoardDisplayMode; set displayMode(value: FlowBoardDisplayMode); /** * Gets or sets whether drag and drop is enabled. * * @public * @attr dragdrop */ get dragdrop(): boolean; set dragdrop(value: boolean); /** * Gets or sets the scroll mode for the board. * * @public * @attr scroll-mode */ get scrollMode(): FlowBoardScrollMode; set scrollMode(value: FlowBoardScrollMode); /** * @public * @override */ connectedCallback(): void; /** * @public * @override */ disconnectedCallback(): void; /** * Gets all column elements in the board. * * @public * @returns Array of FlowBoardColumnElement instances. */ getColumns(): Array; /** * Gets a column by its key. * * @public * @param columnKey The column key to find. * @returns The column element or undefined if not found. */ getColumnByKey(columnKey: string): FlowBoardColumnElement | undefined; /** * Moves an item between columns programmatically. * * @public * @param itemKey The key of the item to move. * @param fromColumnKey The source column key. * @param toColumnKey The target column key. * @param toIndex Optional target index in the target column. * @returns True if the move was successful. */ moveItem(itemKey: string, fromColumnKey: string, toColumnKey: string, toIndex?: number): boolean; /** * Reorders a column to a new index. * * @public * @param columnKey The key of the column to reorder. * @param newIndex The target index. * @returns True if the reorder was successful. */ reorderColumn(columnKey: string, newIndex: number): boolean; protected onDragdropChanged(_prev?: boolean, next?: boolean): void; protected onDisplayModeChanged(): void; protected onScrollModeChanged(): void; /** * Discovers column DragRefs and registers them with the column DropList. * Also connects column-level item DropLists for cross-column item moves. * * @private */ private syncDragDrop; /** * Handles `drop` events from the DnD system for both column reorder and item drops. * * @private */ private handleDrop; /** * Handles column reorder from a drop event. * * @private */ private handleColumnDrop; /** * Handles item reorder or cross-column move from a drop event. * * @private */ private handleItemDrop; } /** * @public */ export declare namespace FlowBoardElement { type Props = IFlowBoardElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-flow-board': FlowBoardElement; } } export {}; //# sourceMappingURL=FlowBoardElement.d.ts.map