import { Component, ModuleDeclaration } from '@syncfusion/ej2-base';
import { L10n, EmitType } from '@syncfusion/ej2-base';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { Data } from './data';
import { KanbanModel } from './kanban-model';
import { CardSettingsModel, ColumnsModel, SwimlaneSettingsModel, StackedHeadersModel, DialogSettingsModel } from '../models/index';
import { SortSettingsModel } from '../models/index';
import { ActionEventArgs, CardClickEventArgs, CardRenderedEventArgs, DragEventArgs, ScrollPosition, ColumnDragEventArgs } from './interface';
import { QueryCellInfoEventArgs, DialogEventArgs, DataStateChangeEventArgs, DataSourceChangedEventArgs } from './interface';
import { ReturnType, ConstraintType, CurrentAction } from './type';
import { Action } from '../actions/action';
import { Crud } from '../actions/crud';
import { DragAndDrop } from '../actions/drag';
import { ColumnDragAndDrop } from '../actions/column-drag';
import { KanbanDialog } from '../actions/dialog';
import { Keyboard } from '../actions/keyboard';
import { KanbanTooltip } from '../actions/tooltip';
import { KanbanTouch } from '../actions/touch';
import { LayoutRender } from './layout-render';
import { VirtualLayoutRender } from './virtual-layout-render';
/**
* The Kanban board is an efficient way to visually depict various stages of a process using cards with transparent workflows.
* The Kanban board has rich set of APIs, methods, and events used to enable or disable its features and customize them.
* ```html
*
* ```
* ```typescript
*
* ```
*/
export declare class Kanban extends Component {
isAdaptive: boolean;
crudModule: Crud;
dataModule: Data;
layoutModule: LayoutRender;
virtualLayoutModule: VirtualLayoutRender;
actionModule: Action;
dragAndDropModule: DragAndDrop;
columnDragAndDropModule: ColumnDragAndDrop;
dialogModule: KanbanDialog;
keyboardModule: Keyboard;
tooltipModule: KanbanTooltip;
touchModule: KanbanTouch;
kanbanData: Record[];
activeCardData: CardClickEventArgs;
localeObj: L10n;
swimlaneToggleArray: string[];
scrollPosition: ScrollPosition;
isInitialRender: boolean;
externalDropObj: Kanban;
isExternalKanbanDrop: boolean;
columnDataCount: {
[key: string]: number;
};
/**
* It is used to customize the Kanban, which accepts custom CSS class names that defines specific user-defined
* styles and themes to be applied on the Kanban element.
*
* @default null
*/
cssClass: string;
/**
* Sets the `width` of the Kanban board, accepting both string and number values.
* The string value can be either pixel or percentage format.
* When set to `auto`, the Kanban width gets auto-adjusted and display its content related to the viewable screen size.
*
* @default 'auto'
*/
width: string | number;
/**
* Sets the `height` of the Kanban board, accepting both string and number values.
* The string type includes either pixel or percentage values.
* When `height` is set with specific pixel value, then the Kanban will be rendered to that specified space.
* In case, if `auto` value is set, then the height of the Kanban gets auto-adjusted within the given container.
*
* @default 'auto'
*/
height: string | number;
/**
* Sets the `height` of the each card in the kanban.
* The string type includes pixel.
* When `height` is set with specific pixel value, then the card will be rendered to that specified height.
* In case, if `auto` value is set, then the height of the card gets auto-adjusted based on the content.
*
* @default 'auto'
*/
cardHeight: string;
/**
* When the enableVirtualization property is set to true in a Kanban,
* it will only render the cards that are currently visible within the viewport,
* and will load additional cards as the user scrolls vertically through the Kanban.
* This can be helpful for improving the performance of the Kanban when working with large datasets,
* as it reduces the number of elements that need to be rendered and managed by the browser at any given time.
*
* @default false
*/
enableVirtualization: boolean;
/**
* With this property, the card data will be bound to Kanban.
* The card data can be passed either as an array of JavaScript objects,
* or else can create an instance of [`DataManager`](http://ej2.syncfusion.com/documentation/data/api-dataManager.html)
* in case of processing remote data and can be assigned to the `dataSource` property.
* With the remote data assigned to dataSource, check the available
* [adaptors](http://ej2.syncfusion.com/documentation/data/adaptors.html) to customize the data processing.
*
* @default []
* @isGenericType true
*/
dataSource: Record[] | DataManager;
/**
* Defines the external [`query`](http://ej2.syncfusion.com/documentation/data/api-query.html)
* that will be executed along with the data processing.
*
* @default null
*/
query: Query;
/**
* Defines the key field of Kanban board. The Kanban renders its layout based on this key field.
*
* @default null
*/
keyField: string;
/**
* Defines the constraint type used to apply validation based on column or swimlane. The possible values are:
* * Column
* * Swimlane
*
* @default column
*/
constraintType: ConstraintType;
/**
* Defines the ID of drop Kanban on which drop should occur.
*
* @default []
*/
externalDropId: string[];
/**
* Defines the Kanban board columns and their properties such as header text, key field, template, allow toggle,
* expand or collapse state, min or max count, and show or hide item count.
*
* @default []
*/
columns: ColumnsModel[];
/**
* When this property is set to true, it allows the keyboard interaction in Kanban.
*
* @default true
*/
allowKeyboard: boolean;
/**
* Determine whether to prevent cross-site scripting code in Kanban data entry fields.
*
* @default true
*/
enableHtmlSanitizer: boolean;
/**
* Defines the stacked header for Kanban columns with text and key fields.
*
* @default []
*/
stackedHeaders: StackedHeadersModel[];
/**
* Defines the swimlane settings to Kanban board such as key field, text field, template, allow drag-and-drop,
* show or hide empty row, show or hide items count, and more.
*
* @default {}
*/
swimlaneSettings: SwimlaneSettingsModel;
/**
* Defines the Kanban board related settings such as header field, content field, template,
* show or hide header, and single or multiple selection.
*
* @default {}
*/
cardSettings: CardSettingsModel;
/**
* Defines the sort settings such as field and direction.
*
* @default {}
*/
sortSettings: SortSettingsModel;
/**
* Defines the dialog settings such as template and fields.
*
* @default {}
*/
dialogSettings: DialogSettingsModel;
/**
* Enables or disables the drag and drop actions in Kanban.
*
* @default true
*/
allowDragAndDrop: boolean;
/**
* Enables or disables the column drag and drop actions in Kanban.
*
* @default false
*/
allowColumnDragAndDrop: boolean;
/**
* Enables or disables the tooltip in Kanban board. The property relates to the tooltipTemplate property.
*
* @default false
*/
enableTooltip: boolean;
/**
* Enable or disable the columns when empty dataSource.
*
* @default false
*/
showEmptyColumn: boolean;
/**
* Enables or disables the persisting Kanban board's state between page reloads.
* If enabled, columns, dataSource properties will be persisted in kanban.
*
* @default false
*/
enablePersistence: boolean;
/**
* Defines the template content to card’s tooltip. The property works by enabling the ‘enableTooltip’ property.
*
* @default null
* @aspType string
*/
tooltipTemplate: string | Function;
/**
* Triggers on beginning of every Kanban action.
*
* @event 'actionBegin'
*/
actionBegin: EmitType;
/**
* Triggers on successful completion of the Kanban actions.
*
* @event 'actionComplete'
*/
actionComplete: EmitType;
/**
* Triggers when a Kanban action gets failed or interrupted and an error information will be returned.
*
* @event 'actionFailure'
*/
actionFailure: EmitType;
/**
* Triggers after the kanban board is created.
*
* @event 'created'
*/
created: EmitType>;
/**
* Triggers before the data binds to the Kanban.
*
* @event 'dataBinding'
*/
dataBinding: EmitType;
/**
* Triggers once the event data is bound to the Kanban.
*
* @event 'dataBound'
*/
dataBound: EmitType;
/**
* Triggers on single-clicking the Kanban cards.
*
* @event 'cardClick'
*/
cardClick: EmitType;
/**
* Triggers on double-clicking the Kanban cards.
*
* @event 'cardDoubleClick'
*/
cardDoubleClick: EmitType;
/**
* Triggers before each column of the Kanban rendering on the page.
*
* @event 'queryCellInfo'
*/
queryCellInfo: EmitType;
/**
* Triggers before each card of the Kanban rendering on the page.
*
* @event 'cardRendered'
*/
cardRendered: EmitType;
/**
* Triggers when the card drag actions starts.
*
* @event 'dragStart'
*/
dragStart: EmitType;
/**
* Triggers when the card is dragging to other stage or other swimlane.
*
* @event 'drag'
*/
drag: EmitType;
/**
* Triggers when the card drag actions stops.
*
* @event 'dragStop'
*/
dragStop: EmitType;
/**
* Triggers before the dialog opens.
*
* @event 'dialogOpen'
*/
dialogOpen: EmitType;
/**
* Triggers before the dialog closes.
*
* @event 'dialogClose'
*/
dialogClose: EmitType;
/**
* Triggers when a column drag operation starts.
*
* @event 'columnDragStart'
*/
columnDragStart: EmitType;
/**
* Triggers during the column drag operation.
*
* @event 'columnDrag'
*/
columnDrag: EmitType;
/**
* Triggers when a column is dropped.
*
* @event 'columnDrop'
*/
columnDrop: EmitType;
/**
* Triggers when the grid actions such as Sorting, Paging, Grouping etc., are done.
* In this event,the current view data and total record count should be assigned to the `dataSource` based on the action performed.
*
* @event dataStateChange
*/
dataStateChange: EmitType;
/**
* Triggers when the grid data is added, deleted and updated.
*
* Invoke the done method from the argument to start render after edit operation.
*
* @event dataSourceChanged
*/
dataSourceChanged: EmitType;
protected needsID: boolean;
/**
* Constructor for creating the Kanban widget
*
* @param {KanbanModel} options Accepts the kanban properties to render the Kanban board.
* @param {string | HTMLElement} element Accepts the DOM element reference as either selector or element to render the Kanban Board.
*/
constructor(options?: KanbanModel, element?: string | HTMLElement);
/**
* Initializes the values of private members.
*
* @returns {void}
* @private
*/
protected preRender(): void;
/**
* To provide the array of modules needed for control rendering
*
* @returns {ModuleDeclaration[]} Returns the declared modules.
* @private
*/
requiredModules(): ModuleDeclaration[];
/**
* Returns the properties to be maintained in the persisted state.
*
* @returns {string} Returns the persistance state.
* @private
*/
protected getPersistData(): string;
/**
* Core method to return the module name.
*
* @returns {string} Returns the module name.
* @private
*/
getModuleName(): string;
/**
* Core method that initializes the control rendering.
*
* @returns {void}
* @private
*/
render(): void;
/**
* Called internally, if any of the property value changed.
*
* @param {KanbanModel} newProp Gets the updated values
* @param {KanbanModel} oldProp Gets the previous values
* @returns {void}
* @private
*/
onPropertyChanged(newProp: KanbanModel, oldProp: KanbanModel): void;
private onSwimlaneSettingsPropertyChanged;
private onCardSettingsPropertyChanged;
private initializeModules;
renderTemplates(): void;
resetTemplates(templates?: string[]): void;
private destroyModules;
wireColumnDragEvent(): void;
unwireColumnDragEvent(): void;
templateParser(template: string | Function): any;
/**
* Returns the card details based on card ID from the board.
*
* @function getCardDetails
* @param {Element} target Accepts the card element to get the details.
* @returns {Object} Returns the card details based on given target.
*/
getCardDetails(target: Element): Record;
/**
* Returns the column data based on column key input.
*
* @function getColumnData
* @param {string | number} columnKey Accepts the column key to get the objects.
* @param {Object[]} dataSource Accepts the collection of objects to get the results based on given columnKey.
* @returns {Object[]} Returns the collection of card objects based on given inputs.
*/
getColumnData(columnKey: string | number, dataSource?: Record[]): Record[];
/**
* Returns the swimlane column data based on swimlane keyField input.
*
* @function getSwimlaneData
* @param {string} keyField Accepts the swimlane keyField to get the objects.
* @returns {Object[]} Returns the collection of card objects based on given inputs.
*/
getSwimlaneData(keyField: string): Record[];
/**
* Gets the list of selected cards from the board.
*
* @function getSelectedCards
* @returns {HTMLElement[]} Returns the card elements based on selection.
*/
getSelectedCards(): HTMLElement[];
/**
* Allows you to show the spinner on Kanban at the required scenarios.
*
* @function showSpinner
* @returns {void}
*/
showSpinner(): void;
/**
* When the spinner is shown manually using the showSpinner method, it can be hidden using this `hideSpinner` method.
*
* @function hideSpinner
* @returns {void}
*/
hideSpinner(): void;
/**
* To manually open the dialog.
*
* @function openDialog
* @param {CurrentAction} action Accepts the action for which the dialog needs to be opened such as either for new card creation or
* editing of existing cards. The applicable action names are `Add` and `Edit`.
* @param {Object} data It can be card data.
* @returns {void}
*/
openDialog(action: CurrentAction, data?: Record): void;
/**
* To manually close the dialog.
*
* @function closeDialog
* @returns {void}
*/
closeDialog(): void;
/**
* Adds the new card to the data source of Kanban and layout.
*
* @function addCard
* @param {Object | Object[]} cardData Accepts Single card object or Collection of card objects to be added into Kanban.
* @param {number} index Accepts the index to insert the card in column.
* @returns {void}
*/
addCard(cardData: Record | Record[], index?: number): void;
/**
* Updates the changes made in the card object by passing it as a parameter to the data source.
*
* @function updateCard
* @param {Object | Object[]} cardData Accepts Single card object or Collection of card objects to be updated into Kanban.
* @param {number} index Accepts the index to update the card in column.
* @returns {void}
*/
updateCard(cardData: Record | Record[], index?: number): void;
/**
* Deletes the card based on the provided ID or card collection in the argument list.
*
* @function deleteCard
* @param {string | number | Object | Object[]} cardData Accepts the ID of the remove card in string or number type or
* Single card object or Collection of card objects to be removed from Kanban
* @returns {void}
*/
deleteCard(cardData: string | number | Record | Record[]): void;
/**
* Add the column to Kanban board dynamically based on the provided column options and index in the argument list.
*
* @function addColumn
* @param {ColumnsModel} columnOptions Accepts the properties to new column that are going to be added in the board.
* @param {number} index Accepts the index of column to add the new column.
* @returns {void}
*/
addColumn(columnOptions: ColumnsModel, index: number): void;
/**
* Deletes the column based on the provided index value.
*
* @function deleteColumn
* @param {number} index Accepts the index of column to delete the existing column from Kanban board.
* @returns {void}
*/
deleteColumn(index: number): void;
/**
* Shows the column from hidden based on the provided key in the columns.
*
* @function showColumn
* @param {string | number} key Accepts the hidden column key name to be shown from the hidden state in board.
* @returns {void}
*/
showColumn(key: string | number): void;
/**
* Hides the column from Kanban board based on the provided key in the columns.
*
* @function hideColumn
* @param {string | number} key Accepts the visible column key name to be hidden from the board.
* @returns {void}
*/
hideColumn(key: string | number): void;
/**
* Method to refresh the Kanban UI based on modified records.
*
* @function refreshUI
* @param {ActionEventArgs} args Accepts the added, changed or deleted data.
* @param {number} index Accepts the index of the changed items.
* @returns {void}
*/
refreshUI(args: ActionEventArgs, index?: number): void;
/**
* Method to refresh the column header.
*
* @method refreshHeader
* @returns {void}
*/
refreshHeader(): void;
/**
* Removes the control from the DOM and detaches all its related event handlers. Also, it removes the attributes and classes.
*
* @function destroy
* @returns {void}
*/
destroy(): void;
}