ng-hub-ui-board
Version:
An Angular-based Kanban board component with Trello-like drag-and-drop, customizable columns, and straightforward event handling.
52 lines (51 loc) • 3.11 kB
TypeScript
import { CdkDragDrop } from '@angular/cdk/drag-drop';
import { EventEmitter, Signal, TemplateRef } from '@angular/core';
import { Board } from '../../models/board';
import { BoardCard } from '../../models/board-card';
import { BoardColumn } from '../../models/board-column';
import { ReachedEndEvent } from '../../models/reached-end-event';
import * as i0 from "@angular/core";
export declare class HubBoardComponent {
readonly board: import("@angular/core").InputSignal<Board<any> | undefined>;
columns: Signal<Array<BoardColumn>>;
readonly columnSortingDisabled: import("@angular/core").InputSignal<boolean>;
readonly cardTpt: Signal<TemplateRef<any> | undefined>;
readonly columnHeaderTpt: Signal<TemplateRef<any> | undefined>;
readonly columnFooterTpt: Signal<TemplateRef<any> | undefined>;
onCardClick: EventEmitter<BoardCard<any>>;
onCardMoved: EventEmitter<CdkDragDrop<BoardColumn<any>, BoardColumn<any>, BoardCard<any>>>;
onColumnMoved: EventEmitter<CdkDragDrop<BoardColumn<any>[], BoardColumn<any>[], any>>;
reachedEnd: EventEmitter<ReachedEndEvent<any>>;
defaultEnterPredicateFn: () => boolean;
/**
* Emits an event with the clicked item as a parameter.
*
* @param {any} item - Represents the item that was clicked on the card.
*/
cardClick(item: any): void;
/**
* Used to handle the event when a column is dropped in a drag and drop operation, and it moves the column in the array and
* emits an event.
*
* @param event - represents the drag and drop event that occurred.
*/
dropColumn(event: CdkDragDrop<any>): void;
/**
* Used to handle the dropping of a card in a drag and drop operation, either moving the card within the same container or
* transferring it to a different container.
*
* @param event - a generic type that takes three arguments:
*/
dropCard(event: CdkDragDrop<BoardColumn, BoardColumn, BoardCard<any>>): void;
/**
* Checks if the user has scrolled to the end of a specific element and emits an event if so.
*
* @param {number} index - The index parameter is a number that represents the index of the column being scrolled.
* @param {Event} event - The event parameter is an object that represents the scroll event. It contains information about the
* scroll event, such as the source element that triggered the event, the amount of scrolling that has occurred, and the dimensions
* of the scrollable area.
*/
onScroll(index: number, event: Event): void;
static ɵfac: i0.ɵɵFactoryDeclaration<HubBoardComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<HubBoardComponent, "hub-board, hub-ui-board", never, { "board": { "alias": "board"; "required": false; "isSignal": true; }; "columnSortingDisabled": { "alias": "columnSortingDisabled"; "required": false; "isSignal": true; }; }, { "onCardClick": "onCardClick"; "onCardMoved": "onCardMoved"; "onColumnMoved": "onColumnMoved"; "reachedEnd": "reachedEnd"; }, ["cardTpt", "columnHeaderTpt", "columnFooterTpt"], never, true, never>;
}