@smart-webcomponents-angular/kanban
Version:
[](https://jqwidgets.com/license/)
594 lines (590 loc) • 124 kB
JavaScript
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
import './../source/modules/smart.kanban';
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Output, Input, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
class BaseElement {
constructor(ref) {
this.onCreate = new EventEmitter();
this.onReady = new EventEmitter();
this.onAttach = new EventEmitter();
this.onDetach = new EventEmitter();
const that = this;
this.nativeElement = ref.nativeElement;
that.nativeElement.onAttached = () => {
that.onAttach.emit(that.nativeElement);
};
that.nativeElement.onDetached = () => {
that.onDetach.emit(that.nativeElement);
};
}
addEventListener(type, listener, options = false) {
this.nativeElement.addEventListener(type, listener, options);
}
removeEventListener(type, listener, options = false) {
this.nativeElement.removeEventListener(type, listener, options);
}
dispatchEvent(event) {
return this.nativeElement.dispatchEvent(event);
}
blur() {
this.nativeElement.blur();
}
click() {
this.nativeElement.click();
}
focus(options) {
this.nativeElement.focus(options);
}
/** @description Sets or gets the license. */
get license() {
return this.nativeElement ? this.nativeElement.license : undefined;
}
set license(value) {
this.nativeElement ? this.nativeElement.license = value : undefined;
}
/** @description Sets or gets the language. Used in conjunction with the property messages. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Determines the theme. Theme defines the look of the element */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
}
BaseElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
BaseElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: BaseElement, inputs: { license: "license", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", rightToLeft: "rightToLeft", theme: "theme" }, outputs: { onCreate: "onCreate", onReady: "onReady", onAttach: "onAttach", onDetach: "onDetach" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onCreate: [{
type: Output
}], onReady: [{
type: Output
}], onAttach: [{
type: Output
}], onDetach: [{
type: Output
}], license: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], rightToLeft: [{
type: Input
}], theme: [{
type: Input
}] } });
let Smart;
if (typeof window !== "undefined") {
Smart = window.Smart;
}
class KanbanComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/** @description This event is triggered whenever any changes are made to the details, status, or properties of an existing task. It allows you to respond programmatically whenever a task is modified, ensuring your application can stay synchronized with the latest task information.
* @param event. The custom event. Custom event was created with: event.detail( oldValue, task, value)
* oldValue - The old data of the task
* task - The HTML element of the task whose data has been changed
* value - The new data of the task
*/
this.onChange = new EventEmitter();
/** @description This event is triggered when the user closes the edit or prompt dialog, either by submitting changes or canceling the operation. It signals that the dialog has been dismissed and any associated actions, such as saving or discarding input, should be handled.
* @param event. The custom event. */
this.onClose = new EventEmitter();
/** @description This event fires just before the edit or prompt dialog is about to close, giving you an opportunity to intercept the closing action. By calling event.preventDefault() within the event handler, you can cancel the closing operation, allowing you to perform validation or prompt the user before the dialog is dismissed.
* @param event. The custom event. */
this.onClosing = new EventEmitter();
/** @description This event is triggered whenever a new column is successfully added to the data structure or interface. It allows you to respond to the addition of a column, such as updating the user interface, modifying related data, or performing custom logic. The event provides details about the added column, including its name, index, and relevant metadata.
* @param event. The custom event. Custom event was created with: event.detail( label, dataField, collapsed)
* label - The column label.
* dataField - The column data field.
* collapsed - The column's collapsed state.
*/
this.onColumnAdd = new EventEmitter();
/** @description This event is triggered whenever a column is deleted or removed from the data structure, table, or grid. It provides an opportunity to handle any necessary updates or clean-up tasks related to the removal of a column, such as updating the user interface, adjusting data bindings, or modifying underlying data sources. The event typically includes information about the column that was removed, allowing developers to respond dynamically to changes in the structure.
* @param event. The custom event. Custom event was created with: event.detail( label, dataField, collapsed)
* label - The column label.
* dataField - The column data field.
* collapsed - The column's collapsed state.
*/
this.onColumnRemove = new EventEmitter();
/** @description This event is triggered whenever a user changes the position of a column, such as by dragging and dropping a column header to rearrange the column order in the table.
* @param event. The custom event. Custom event was created with: event.detail( oldIndex, index, column)
* oldIndex - The column's old index.
* index - The column's new index.
* column - The column's data object with 'label', 'dataField' and 'collapsed' fields.
*/
this.onColumnReorder = new EventEmitter();
/** @description This event is triggered whenever the data in a column is updated. It occurs after any changes are made to the value(s) of a column, providing an opportunity to respond to or process the updated data. Listeners can use this event to execute custom logic, such as validating input, persisting changes, or updating related UI components.
* @param event. The custom event. Custom event was created with: event.detail( oldValue, value, column)
* oldValue - The column's old label.
* value - The column's new label.
* column - The column's data object with 'label', 'dataField' and 'collapsed' fields.
*/
this.onColumnUpdate = new EventEmitter();
/** @description This event is triggered whenever a user clicks on a column header within the data table. It can be used to initiate actions such as sorting the column, displaying a menu, or highlighting the selected column. The event typically provides information about which column was clicked, enabling you to implement custom logic based on the user's interaction.
* @param event. The custom event. Custom event was created with: event.detail( label, dataField, collapsed)
* label - The column label.
* dataField - The column data field.
* collapsed - The column's collapsed state.
*/
this.onColumnClick = new EventEmitter();
/** @description This event is triggered when a user double-clicks on a column header, typically in a data grid or table. It can be used to initiate actions such as resizing the column, sorting data, or displaying additional options related to the selected column.
* @param event. The custom event. Custom event was created with: event.detail( label, dataField, collapsed)
* label - The column label.
* dataField - The column data field.
* collapsed - The column's collapsed state.
*/
this.onColumnDoubleClick = new EventEmitter();
/** @description This event is triggered whenever a column becomes visible—either when a user selects the "Show" option from the column's action menu, or when the Kanban component's `show` method is programmatically called to reveal the column.
* @param event. The custom event. Custom event was created with: event.detail( label, dataField)
* label - The column label.
* dataField - The column data field.
*/
this.onColumnShow = new EventEmitter();
/** @description This event is triggered whenever a column is hidden, either through the column's action menu or programmatically via the Kanban board’s `hide` method. Use this event to execute custom logic or UI updates whenever a column becomes invisible to the user.
* @param event. The custom event. Custom event was created with: event.detail( label, dataField)
* label - The column label.
* dataField - The column data field.
*/
this.onColumnHide = new EventEmitter();
/** @description This event is triggered whenever a column is collapsed, either by selecting the "Collapse" option from the column's action menu or by programmatically invoking the Kanban board's `collapse` method.
* @param event. The custom event. Custom event was created with: event.detail( label, dataField)
* label - The column label.
* dataField - The column data field.
*/
this.onColumnCollapse = new EventEmitter();
/** @description This event is triggered whenever a column in the Kanban board is expanded, either by a user selecting the "expand" option from the column's action menu or programmatically through the Kanban component's `expand` method.
* @param event. The custom event. Custom event was created with: event.detail( label, dataField)
* label - The column label.
* dataField - The column data field.
*/
this.onColumnExpand = new EventEmitter();
/** @description This event is triggered whenever a user adds a comment to a task within the Kanban board. It activates immediately after the comment is successfully posted, allowing you to respond to or process new task comments in real-time.
* @param event. The custom event. Custom event was created with: event.detail( id, value)
* id - The task's id.
* value - The comment object. It has 'text: string, time: Date and userId:number' properties.
*/
this.onCommentAdd = new EventEmitter();
/** @description This event is triggered whenever a comment is deleted from a task card within the Kanban board. It allows you to perform actions or updates in response to the removal of a comment from any Kanban task.
* @param event. The custom event. Custom event was created with: event.detail( id, value)
* id - The task's id.
* value - The comment object. It has 'text: string, time: Date and userId:number' properties.
*/
this.onCommentRemove = new EventEmitter();
/** @description This event is triggered whenever an existing comment on a Kanban Task is modified. It occurs after any changes are made to the comment’s content, such as edits or updates, allowing you to respond to or track comment modifications within the Kanban board.
* @param event. The custom event. Custom event was created with: event.detail( id, value)
* id - The task's id.
* value - The comment object. It has 'text: string, time: Date and userId:number' properties.
*/
this.onCommentUpdate = new EventEmitter();
/** @description This event is triggered when a task is dropped onto a target element within the DOM during a drag-and-drop operation. It allows developers to handle the completion of a drag action by responding to where the task is released. To prevent the default drop behavior—such as moving the element or initiating a browser action—you can call event.preventDefault() within the event handler. This enables you to implement custom logic for handling dropped tasks, such as updating data models, modifying the UI, or triggering other application-specific actions."
* @param event. The custom event. Custom event was created with: event.detail( container, data, item, items, originalEvent, previousContainer, target)
* container - the Kanban the dragged task(s) is dropped to
* data - an object with additional drag details
* item - the task that is dragged; if multiple tasks are dragged, this is the task that has been clicked when initiating the drag operation
* items - an array with all dragged tasks
* originalEvent - the original, browser, event that initiates the drag operation
* previousContainer - the Kanban the dragged item(s) is dragged from
* target - the element the dragged tasks are dropped to
*/
this.onDragEnd = new EventEmitter();
/** @description This event is triggered while the user is actively dragging a task, such as during a drag-and-drop operation. It fires continuously as the task is being moved, enabling real-time updates or visual feedback in response to the task's position.
* @param event. The custom event. Custom event was created with: event.detail( data, item, items, originalEvent)
* data - an object with additional drag details
* item - the task that is dragged; if multiple tasks are dragged, this is the task that has been clicked when initiating the drag operation
* items - an array with all dragged tasks
* originalEvent - the original, browser, event that initiates the drag operation
*/
this.onDragging = new EventEmitter();
/** @description This event is fired when the user initiates a drag action on one or more tasks. During the event, you can access information about the tasks being dragged. If you want to prevent the drag-and-drop operation from starting, you can call event.preventDefault() inside your event handler. This will cancel the dragging process and prevent any associated drag logic or UI changes from occurring.
* @param event. The custom event. Custom event was created with: event.detail( container, data, item, items, originalEvent, previousContainer)
* container - the Kanban the dragged task(s) is dragged from
* data - an object with additional drag details
* item - the task that is dragged; if multiple tasks are dragged, this is the task that has been clicked when initiating the drag operation
* items - an array with all dragged tasks
* originalEvent - the original, browser, event that initiates the drag operation
* previousContainer - the Kanban the dragged item(s) is dragged from
*/
this.onDragStart = new EventEmitter();
/** @description This event is triggered immediately after a user applies a filter to refine the displayed data. It indicates that the filter criteria have been set and the view has been updated accordingly. Developers can use this event to perform actions such as fetching new data, updating UI elements, or logging user interactions related to filtering.
* @param event. The custom event. */
this.onFilter = new EventEmitter();
/** @description This event is triggered whenever the edit or prompt dialog window is displayed to the user. It signals that the user interface has opened a dialog for editing content or requesting input, allowing developers to execute custom logic in response to the dialog becoming visible.
* @param event. The custom event. */
this.onOpen = new EventEmitter();
/** @description This event is fired immediately before the edit or prompt dialog is displayed. You can intercept and prevent the dialog from opening by calling event.preventDefault() within your event handler. This allows you to provide your own custom dialog or take other actions instead of showing the default Kanban dialog. To stop the default Kanban dialog from appearing, simply call event.preventDefault() in the appropriate event handler function.
* @param event. The custom event. Custom event was created with: event.detail( comment, purpose, task)
* comment - The comment that is about to be removed (if applicable).
* purpose - The purpose of the dialog to be opened - <em>'edit'</em> or <em>'prompt'</em>.
* task - The task that is about to be edited or removed (if applicable).
*/
this.onOpening = new EventEmitter();
/** @description This event is triggered immediately after a sorting operation has been applied to the data set. It signifies that the data has been reordered based on the selected sorting criteria, and any relevant updates or UI refreshes can be performed in response to this change. The event may provide details about the sort field(s), direction (ascending or descending), and the affected data.
* @param event. The custom event. */
this.onSort = new EventEmitter();
/** @description This event is fired immediately before a new task is added to the Kanban board. Within the event handler, you can access and modify the task's initial data using event.detail.value (which contains the task details) and event.detail.id (which represents the task's unique identifier). This allows you to customize attributes—such as assigning a specific ID or updating field values—before the task is officially added. **Example usage:**```jskanban.onTaskBeforeAdd = (event) => { const taskData = event.detail.value; // the task data before it is added const currentId = event.detail.id; // the proposed task ID event.detail.id = 'BG12'; // assign a custom ID before adding // Additional custom logic can be added here};```**Note:** Make any necessary changes to `event.detail.value` or `event.detail.id` within this handler to control how tasks are created and represented on your Kanban board.
* @param event. The custom event. Custom event was created with: event.detail( value, id)
* value - The task data that is added to the Kanban.
* id - The task data id.
*/
this.onTaskBeforeAdd = new EventEmitter();
/** @description This event fires whenever a new task is added to the Kanban board. The associated event object contains detailed information about the new task, accessible via the event's detail property. **Example usage:**```javascriptkanban.onTaskAdd = (event) => { const taskData = event.detail.value; // Contains the properties of the newly added task const taskId = event.detail.id; // Unique identifier of the new task}```**Description:** Use this event to execute custom logic or update your application whenever a user creates a new task. The `event.detail.value` provides the complete task data object, while `event.detail.id` gives you the unique ID assigned to that task.
* @param event. The custom event. Custom event was created with: event.detail( value, id)
* value - The task data that is added to the Kanban.
* id - The task data id.
*/
this.onTaskAdd = new EventEmitter();
/** @description This event is triggered whenever a task is deleted or removed from the system. It occurs immediately after a task is successfully deleted, allowing you to perform any necessary cleanup, updates, or notifications in response to the removal action.
* @param event. The custom event. Custom event was created with: event.detail( value, id)
* value - The task data that is removed from the Kanban.
* id - The task data id.
*/
this.onTaskRemove = new EventEmitter();
/** @description This event is triggered whenever a task undergoes an update, such as changes to its status, description, assigned users, due date, or any other task-related property. It allows listeners to respond in real time to modifications made to existing tasks.
* @param event. The custom event. Custom event was created with: event.detail( value, oldValue, id)
* value - The task data that is updated.
* oldValue - The update task's old data.
* id - The task data id.
*/
this.onTaskUpdate = new EventEmitter();
/** @description This event is fired when a user clicks on a task item, allowing you to execute custom logic in response to the interaction. It provides details about the clicked task, enabling you to access its data or update its state as needed.
* @param event. The custom event. Custom event was created with: event.detail( value, id)
* value - The task data.
* id - The task data id.
*/
this.onTaskClick = new EventEmitter();
/** @description This event is triggered when a user double-clicks on a task element in the interface. It allows you to detect and respond to double-click actions performed specifically on individual tasks, enabling functionalities such as editing, viewing task details, or initiating other custom behaviors associated with a double-click interaction.
* @param event. The custom event. Custom event was created with: event.detail( value, id)
* value - The task data.
* id - The task data id.
*/
this.onTaskDoubleClick = new EventEmitter();
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-kanban');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Controls whether users can reorder columns in a table or grid. When set to true and used in combination with allowDrag enabled, this property lets users rearrange columns by dragging and dropping their headers. For example, a user can click and hold the header of the first column, then drag it to a new position over another column header and drop it, changing the column order visually and functionally. This enhances the user experience by allowing customizable column layouts. */
get allowColumnReorder() {
return this.nativeElement ? this.nativeElement.allowColumnReorder : undefined;
}
set allowColumnReorder(value) {
this.nativeElement ? this.nativeElement.allowColumnReorder = value : undefined;
}
/** @description Controls whether column editing is permitted. When this property is set to true, users can dynamically edit the column's header label by double-clicking on it. This allows for in-place renaming of the column header directly within the user interface. If set to false, the column header label will remain static and cannot be modified by users. */
get allowColumnEdit() {
return this.nativeElement ? this.nativeElement.allowColumnEdit : undefined;
}
set allowColumnEdit(value) {
this.nativeElement ? this.nativeElement.allowColumnEdit = value : undefined;
}
/** @description Controls whether users can remove columns from the table. When set to true, a "Remove Column" option will appear in the column actions menu, allowing users to dynamically delete columns. Note: The 'columnActions' property must also be enabled (set to true) for this feature to be available. */
get allowColumnRemove() {
return this.nativeElement ? this.nativeElement.allowColumnRemove : undefined;
}
set allowColumnRemove(value) {
this.nativeElement ? this.nativeElement.allowColumnRemove = value : undefined;
}
/** @description Controls whether users can hide columns in the data table. When set to true, this property allows users to dynamically hide individual columns using the column actions menu. Note: To enable this feature, the 'columnActions' property must also be set to true. */
get allowColumnHide() {
return this.nativeElement ? this.nativeElement.allowColumnHide : undefined;
}
set allowColumnHide(value) {
this.nativeElement ? this.nativeElement.allowColumnHide = value : undefined;
}
/** @description Controls whether the "Add Task" button is displayed at the top of each column. To hide the button for an individual column, set the addNewButton property to false within that column’s configuration object. If addNewButton is false, users will not see the "Add Task" button for that specific column. */
get addNewButton() {
return this.nativeElement ? this.nativeElement.addNewButton : undefined;
}
set addNewButton(value) {
this.nativeElement ? this.nativeElement.addNewButton = value : undefined;
}
/** @description Specifies whether the add button appears in the column header, after the list of tasks within the column, or both. This controls the visibility and placement of the add button for creating new tasks in each column. */
get addNewButtonDisplayMode() {
return this.nativeElement ? this.nativeElement.addNewButtonDisplayMode : undefined;
}
set addNewButtonDisplayMode(value) {
this.nativeElement ? this.nativeElement.addNewButtonDisplayMode = value : undefined;
}
/** @description Specifies whether a special column containing a button for adding new status columns to the Kanban board is shown. When enabled, this feature allows users to quickly create additional status columns directly within the Kanban interface. You can use this setting to display or hide the "Add Column" button column as needed. */
get addNewColumn() {
return this.nativeElement ? this.nativeElement.addNewColumn : undefined;
}
set addNewColumn(value) {
this.nativeElement ? this.nativeElement.addNewColumn = value : undefined;
}
/** @description Specifies the width of the dynamically added "Add New" column. This property is effective only when the 'columnWidth' property is also set. It allows you to control the exact width (in pixels or other valid CSS units) of the new column that appears when adding columns dynamically to the table or grid. */
get addNewColumnWidth() {
return this.nativeElement ? this.nativeElement.addNewColumnWidth : undefined;
}
set addNewColumnWidth(value) {
this.nativeElement ? this.nativeElement.addNewColumnWidth = value : undefined;
}
/** @description Enables users to click and drag tasks within the interface, allowing them to easily reorder, move, or reorganize tasks by dragging and dropping them to the desired position. */
get allowDrag() {
return this.nativeElement ? this.nativeElement.allowDrag : undefined;
}
set allowDrag(value) {
this.nativeElement ? this.nativeElement.allowDrag = value : undefined;
}
/** @description Enables users to remove or discard tasks from the list or workflow, either by dragging and dropping or through a designated action, facilitating task management and organization. */
get allowDrop() {
return this.nativeElement ? this.nativeElement.allowDrop : undefined;
}
set allowDrop(value) {
this.nativeElement ? this.nativeElement.allowDrop = value : undefined;
}
/** @description Enables a visual placeholder to appear when dragging and dropping tasks. As you drag a task over another task, an empty space is dynamically created at the drop location, clearly indicating where the dragged task will be inserted. This improves usability by providing real-time visual feedback during task reordering. */
get allowDropPlaceholder() {
return this.nativeElement ? this.nativeElement.allowDropPlaceholder : undefined;
}
set allowDropPlaceholder(value) {
this.nativeElement ? this.nativeElement.allowDropPlaceholder = value : undefined;
}
/** @description This property controls the color styling of Kanban columns and their associated tasks. When set to true, and if a Kanban column has its color property defined, that color will not only visually highlight the column header but will also be applied to all tasks within that column, as well as to the background or accent color of the edit dialog for tasks in that column. This creates a consistent and visually cohesive color scheme throughout each column and its related UI elements. */
get applyColumnColorToTasks() {
return this.nativeElement ? this.nativeElement.applyColumnColorToTasks : undefined;
}
set applyColumnColorToTasks(value) {
this.nativeElement ? this.nativeElement.applyColumnColorToTasks = value : undefined;
}
/** @description Controls whether the application automatically loads its state from the browser’s localStorage. This includes restoring information such as:- The list of tasks and their positions- The selected task and its state- Applied filters and sorting options- The state of collapsed columns- The values of the following task-related properties: - taskActions - taskComments - taskDue - taskPriority - taskProgress - taskTags - taskUserIconWhen enabled, all of these details will be reloaded from localStorage on page refresh or reopening the application, ensuring a consistent user experience. When disabled, this information will not be loaded automatically, and the state will not be restored. */
get autoLoadState() {
return this.nativeElement ? this.nativeElement.autoLoadState : undefined;
}
set autoLoadState(value) {
this.nativeElement ? this.nativeElement.autoLoadState = value : undefined;
}
/** @description Controls whether the application's current state is automatically saved to the browser's localStorage. When enabled, the following information is persistently stored and restored across sessions: - Task data, including their current positions, selected status, and any applied filters or sorting.- The collapsed or expanded state of columns.- Values for the following properties: - taskActions (user actions related to tasks) - taskComments (comments attached to tasks) - taskDue (task due dates) - taskPriority (priority level of tasks) - taskProgress (progress tracking for tasks) - taskTags (tags associated with each task) - taskUserIcon (user avatars/icons linked to tasks)This ensures that user preferences and the state of the task interface are preserved, providing a seamless user experience even after closing or refreshing the browser. Disabling this feature will prevent any state information from being stored in localStorage, and all settings will be reset upon page reload. */
get autoSaveState() {
return this.nativeElement ? this.nativeElement.autoSaveState : undefined;
}
set autoSaveState(value) {
this.nativeElement ? this.nativeElement.autoSaveState = value : undefined;
}
/** @description Dynamically adjusts the height of each column based on the total height of its tasks, ensuring all content is fully visible. This property is effective only when 'columnColorEntireSurface' is set to true, allowing the background color to extend appropriately over the column’s entire surface. */
get autoColumnHeight() {
return this.nativeElement ? this.nativeElement.autoColumnHeight : undefined;
}
set autoColumnHeight(value) {
this.nativeElement ? this.nativeElement.autoColumnHeight = value : undefined;
}
/** @description Enables the card content to be expanded or collapsed, providing users with the ability to show or hide additional information within the card. This enhances the user interface by reducing visual clutter and allowing for more compact content presentation. */
get collapsible() {
return this.nativeElement ? this.nativeElement.collapsible : undefined;
}
set collapsible(value) {
this.nativeElement ? this.nativeElement.collapsible = value : undefined;
}
/** @description Displays a color indicator in the column header whenever the column's color property is defined. The header visually reflects the assigned color, making it easier to identify and distinguish columns based on their color settings. */
get columnColors() {
return this.nativeElement ? this.nativeElement.columnColors : undefined;
}
set columnColors(value) {
this.nativeElement ? this.nativeElement.columnColors = value : undefined;
}
/** @description Defines the width for each Kanban column. When this property is specified, all Kanban columns are rendered at the given width. If the total width of all columns exceeds the available space, a horizontal scrollbar will appear, allowing users to scroll and view all columns. */
get columnWidth() {
return this.nativeElement ? this.nativeElement.columnWidth : undefined;
}
set columnWidth(value) {
this.nativeElement ? this.nativeElement.columnWidth = value : undefined;
}
/** @description Renders a customizable background within the Kanban column, allowing for enhanced visual separation and improved column identification. Supports various background options such as color, image, or pattern to match your application's design requirements. */
get columnColorEntireSurface() {
return this.nativeElement ? this.nativeElement.columnColorEntireSurface : undefined;
}
set columnColorEntireSurface(value) {
this.nativeElement ? this.nativeElement.columnColorEntireSurface = value : undefined;
}
/** @description Renders a column footer that displays a summary value, such as totals or averages, for the data in that column. This footer helps users quickly interpret aggregate information at the bottom of the column. */
get columnFooter() {
return this.nativeElement ? this.nativeElement.columnFooter : undefined;
}
set columnFooter(value) {
this.nativeElement ? this.nativeElement.columnFooter = value : undefined;
}
/** @description Provides detailed definitions and configuration options for each column’s properties, including attributes such as data type, default value, visibility, header label, and formatting options. */
get columns() {
return this.nativeElement ? this.nativeElement.columns : undefined;
}
set columns(value) {
this.nativeElement ? this.nativeElement.columns = value : undefined;
}
/** @description Controls whether the column actions icon is displayed, allowing users to access additional options or actions for each table column. When enabled, the icon becomes visible; when disabled, the icon is hidden from view. */
get columnActions() {
return this.nativeElement ? this.nativeElement.columnActions : undefined;
}
set columnActions(value) {
this.nativeElement ? this.nativeElement.columnActions = value : undefined;
}
/** @description Specifies whether the number of tasks is shown in the headers of each column, allowing users to see the count of tasks directly within the column titles. */
get columnSummary() {
return this.nativeElement ? this.nativeElement.columnSummary : undefined;
}
set columnSummary(value) {
this.nativeElement ? this.nativeElement.columnSummary = value : undefined;
}
/** @description Specifies whether a custom template is applied to the column header. Accepts a value of type string (containing template markup), function (returning a template or markup), or an HTMLTemplateElement. Use this property to customize the appearance and content of the column header beyond the default rendering. */
get columnHeaderTemplate() {
return this.nativeElement ? this.nativeElement.columnHeaderTemplate : undefined;
}
set columnHeaderTemplate(value) {
this.nativeElement ? this.nativeElement.columnHeaderTemplate = value : undefined;
}
/** @description Specifies how column editing is initiated within the interface. - When set to ''header'', editing mode is activated by double-clicking directly on the column's header label. - When set to ''menu'', editing can only be started through the column's context or 'columnActions' menu. - When set to ''headerAndMenu'', both methods are available—users can begin editing either by double-clicking the header or by selecting the relevant option from the column menu. */
get columnEditMode() {
return this.nativeElement ? this.nativeElement.columnEditMode : undefined;
}
set columnEditMode(value) {
this.nativeElement ? this.nativeElement.columnEditMode = value : undefined;
}
/** @description Sets or retrieves the ID of the currently active user. This value must match the 'id' of a user object within the 'users' property or array. The privileges and access rights available are determined based on the current user's identity. If no current user is specified, the element's permissions default to those defined by its own properties, rather than user-specific settings. */
get currentUser() {
return this.nativeElement ? this.nativeElement.currentUser : undefined;
}
set currentUser(value) {
this.nativeElement ? this.nativeElement.currentUser = value : undefined;
}
/** @description Controls whether the default dialog for adding or removing tasks or comments is enabled or disabled. When set to true, the dialog will not appear, allowing for custom handling of these actions. When set to false, the standard dialog will be shown as usual. This property can be used to either retrieve the current setting (get) or define its behavior (set). */
get disableDialog() {
return this.nativeElement ? this.nativeElement.disableDialog : undefined;
}
set disableDialog(value) {
this.nativeElement ? this.nativeElement.disableDialog = value : undefined;
}
/** @description Sets or retrieves a customization function for the Kanban dialog component. This function allows you to modify the appearance and behavior of the dialog, or to replace it entirely with a custom implementation. When invoked, the Kanban component calls this function with five arguments:- 'dialog': The default dialog instance, typically a 'smart-window' object, which serves as the default modal dialog for tasks and comments.- 'taskOrComment': The data object representing either a Kanban task or a comment, depending on the context of the action.- 'editors': An object containing the input elements or editors used within the dialog for data entry or modification.- 'purpose': A string indicating the dialog’s intent, such as ''add'' for creating a new item or ''edit'' for modifying an existing one.- 'type': A string specifying the entity being processed, such as ''task'' for task-related dialogs or ''column'' for column-related dialogs.By providing a custom function, you can tailor the dialog’s UI, integrate additional logic, or substitute a completely different dialog component to meet your application's requirements. */
get dialogCustomizationFunction() {
return this.nativeElement ? this.nativeElement.dialogCustomizationFunction : undefined;
}
set dialogCustomizationFunction(value) {
this.nativeElement ? this.nativeElement.dialogCustomizationFunction = value : undefined;
}
/** @description Sets or retrieves the callback function that is executed when the dialog is rendered. This function is invoked by the Kanban component and receives six arguments: dialog, editors, labels, tabs, layout, and taskOrComment.- 'dialog': The 'smart-window' instance representing the Kanban dialog.- 'taskOrComment': An object representing either the current Kanban task or a comment, depending on the context in which the dialog is opened.- 'editors, labels, tabs, layout': Each is a JSON object where keys specify the element type (e.g., 'description', 'priority', 'notes'), and the values are their corresponding HTML elements within the dialog.This function allows developers to customize the dialog content or behavior dynamically based on the element types and the associated data when the dialog is rendered. */
get dialogRendered() {
return this.nativeElement ? this.nativeElement.dialogRendered : undefined;
}
set dialogRendered(value) {
this.nativeElement ? this.nativeElement.dialogRendered = value : undefined;
}
/** @description Specifies the origin or source of the data to be displayed and managed on the Kanban board, such as an API endpoint, database, or local data array. This setting dictates which dataset will populate the Kanban columns and cards. */
get dataSource() {
return this.nativeElement ? this.nativeElement.dataSource : undefined;
}
set dataSource(value) {
this.nativeElement ? this.nativeElement.dataSource = value : undefined;
}
/** @description Specifies how the Kanban board's default fields (e.g., title, status, assignee) correspond to the fields in your data source. Use this mapping only if your data source uses field names that differ from the Kanban's expected keywords. If the field names already match, this mapping is optional. Note that only certain default fields support custom mapping; not all default mappings can be overridden. */
get dataSourceMap() {
return this.nativeElement ? this.nativeElement.dataSourceMap : undefined;
}
set dataSourceMap(value) {
this.nativeElement ? this.nativeElement.dataSourceMap = value : undefined;
}
/** @description Specifies the offset, in pixels, between the drag feedback element and the mouse cursor during task dragging operations. The value should be provided as an array: the first element sets the horizontal (x-axis) offset, and the second element sets the vertical (y-axis) offset, both relative to the cursor position. Alternatively, if set to 'auto', the system automatically calculates the offset based on the cursor’s position at the moment the drag action began. This allows for precise control over the visual positioning of the feedback element during drag-and-drop interactions. */
get dragOffset() {
return this.nativeElement ? this.nativeElement.dragOffset : undefined;
}
set dragOffset(value) {
this.nativeElement ? this.nativeElement.dragOffset = value : undefined;
}
/** @description Controls whether tasks can be modified, including editing task details and assigning users to tasks. When enabled, users can update task information and manage task assignments; when disabled, tasks and their assigned users are read-only and cannot be changed programmatically or through the user interface. */
get editable() {
return this.nativeElement ? this.nativeElement.editable : undefined;
}
set editable(value) {
this.nativeElement ? this.nativeElement.editable = value : undefined;
}
/** @description Specifies how users can activate the task editing feature. The 'editBehavior' property accepts either '"singleClick"' or '"doubleClick"' as values:- '"singleClick"': Opens the dialog edit window when the user clicks once on a Kanban task.- '"doubleClick"' (default): Opens the dialog edit window when the user double-clicks on a Kanban task.By default, editing is triggered by a double-click. Use this setting to customize the interaction based on your application's needs. */
get editMode() {
return this.nativeElement ? this.nativeElement.editMode : undefined;
}
set editMode(value) {
this.nativeElement ? this.nativeElement.editMode = value : undefined;
}
/** @description Sets or retrieves the format string used to display the "Due date" label, as well as the date format for both the "Start date" and "Due date" editor fields. This determines how dates are shown and entered in these UI components. */
get formatStringDate() {
return this.nativeElement ? this.nativeElement.formatStringDate : undefined;
}
set formatStringDate(value) {
this.nativeElement ? this.nativeElement.formatStringDate = value : undefined;
}
/** @description Specifies or retrieves the format string used to display the timestamp on comments. This determines how the date and time of each comment are presented (e.g., "YYYY-MM-DD HH:mm:ss"). */
get formatStringTime() {
return this.nativeElement ? this.nativeElement.formatStringTime : undefined;
}
set formatStringTime(value) {
this.nativeElement ? this.nativeElement.formatStringTime = value : undefined;
}
/** @description Sets or retrieves the position of the header section within the user interface. The header typically contains interactive controls such as Customize, Filter, Sort, and Search buttons, allowing users to adjust and manipulate the displayed data according to their preferences. */
get headerPosition() {
return this.nativeElement ? this.nativeElement.headerPosition : undefined;
}
set headerPosition(value) {
this.nativeElement ? this.nativeElement.headerPosition = value : undefined;
}
/** @description Defines or retrieves how the column hierarchy is structured and displayed, specifying the method or format used to represent the relationships between columns within the component or dataset. */
get hierarchy() {
return this.nativeElement ? this.nativeElement.hierarchy : undefined;
}
set hierarchy(value) {
this.nativeElement ? this.nativeElement.hierarchy = value : undefined;
}
/** @description Gets or sets the unlockKey property, a unique key used to unlock or activate the product. This key is required to enable full access to product features. */
get unlockKey() {
return this.nativeElement ? this.nativeElement.unlockKey : undefined;
}
set unlockKey(value) {
this.nativeElement ? this.nativeElement.unlockKey = value : undefined;
}
/** @description Sets or retrieves the current locale (language and regional settings) used by the component. This property determines the language in which messages are displayed, and works together with the messages property, which provides localized message strings for each supported locale. Adjusting the locale will change the displayed text to correspond with the selected language from the messages definitions. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Defines or retrieves an object containing the strings displayed in the widget, allowing for easy local