import { FlowBoardDisplayMode } from '../../../Types/FlowBoardDisplayMode'; import { FlowBoardScrollMode } from '../../../Types/FlowBoardScrollMode'; import { CustomElement } from '../../Abstracts/CustomElement'; import { FlowBoardColumnElement } from './FlowBoardColumnElement'; import { FlowBoardColumnItemElement } from './FlowBoardColumnItemElement'; 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 viewport - The scrollable viewport container * @csspart columns - The columns container * @csspart append - The append slot container * * @cssprop {Color} --flow-board-background-color - Background color of the board * @cssprop {String} --flow-board-gap - Gap between columns * @cssprop {String} --flow-board-padding - Padding around the viewport * * @dependency {FlowBoardColumnElement} - Column component * @dependency {FlowBoardColumnComposerElement} - Column composer component for adding new columns * * @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 _dragController; 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; /** * Initiates a column drag operation. * Called by child column elements when drag starts. * * @public * @param column The column to drag. * @param event The pointer event. */ startColumnDrag(column: FlowBoardColumnElement, event: PointerEvent): void; /** * Initiates an item drag operation. * Called by child item elements when drag starts. * * @public * @param item The item to drag. * @param event The pointer event. */ startItemDrag(item: FlowBoardColumnItemElement, event: PointerEvent): 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; private initDragController; } /** * @public */ export declare namespace FlowBoardElement { type Props = IFlowBoardElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-flow-board': FlowBoardElement; } } export {}; //# sourceMappingURL=FlowBoardElement.d.ts.map