@disane/ngx-taskboard

import { AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, NgZone, OnInit, Renderer2, TemplateRef } from '@angular/core'; import { TaskboardService } from '../taskboard.service'; import { CardItem, ClickEvent, CollapseEvent, CollapseState, DropEvent, GroupHeading, ScrollEvent, ScrollState } from '../types'; export declare class BoardComponent implements OnInit, DoCheck, AfterViewInit { private readonly renderer; private readonly elRef; private readonly cd; private readonly taskboardService; private ngZone; set items(items: (object | CardItem)[]); get items(): (object | CardItem)[]; /** Shows the blacklog on onit */ showBacklog: boolean; /** Name of the backlog row */ backlogName: string; /** * Grouping keys for columns (if not passed, the keys will be determined out of the items) * Caution: If you don't pass any headings manually, only the columns are shown, which have data. * If you want to show emtpy rows, please set them */ hGroupKeys: (string | GroupHeading)[]; /** * Grouping keys for rows (if not passed, the keys will be determined out of the items) * Caution: If you don't pass any headings manually, only the rows are shown, which have data. * If you want to show emtpy rows, please set them */ vGroupKeys: (string | GroupHeading)[]; /** Show add buttons on the column headings */ hAddNewItems: boolean; /** Show add buttons on the row headings */ vAddNewItems: boolean; /** Show add buttons in the cells for columns and rows */ cellAddNewItems: boolean; /** Key to group data for rows */ vGroupKey: string; /** Key to group data for columns */ hGroupKey: string; /** Sort items by property */ sortBy: string; /** Board name to show between row and column header */ boardName: string; /** Invert rows and columns */ invertGroupDirection: boolean; /** All items which can't be grouped into rows and columns are stored into the backlog */ showUngroupedInBacklog: boolean; /** Decrease overall font size */ smallText: boolean; /** Template for items to render. "item" object ist passed (see examples) */ itemTemplate: TemplateRef<any>; /** Template for collapsed rows to render. "count" object ist passed (see examples) */ noElementsTemplate: TemplateRef<any>; /** Template for column headers. Current groupName will be passed (see examples) */ hHeaderTemplate: TemplateRef<any>; /** Template for row headers. Current groupName will be passed (see examples) */ vHeaderTemplate: TemplateRef<any>; /** Template for actions, add and collapse buttons (see examples) */ actionsTemplate: TemplateRef<any>; /** Template for the placeholder element which will be generated when an item is draged over a cell */ dragoverPlaceholderTemplate: TemplateRef<any>; /** Icon template for add icons */ addIconTemplate: TemplateRef<any>; /** Icon template for collapse icons */ collapseIconTemplate: TemplateRef<any>; /** Icon template for expand icons */ expandIconTemplate: TemplateRef<any>; /** Default css class for row header */ vHeaderClass: string; /** Default css class for column header */ hHeaderClass: string; /** If set to true, the horizontal group keys are fixed positioned to the top and remain at the top while scrolling. Only applied when scrollable is true */ stickyHorizontalHeaderKeys: boolean; /** If set to true, the vertical group keys are fixed positioned to the top and remain at the top while scrolling. Only applied when scrollable is true */ stickyVerticalHeaderKeys: boolean; /** Default css class for cell header */ cellClass: string; /** Column width (in px) which is applied to the columns when the content is scollable */ columnWidth: number; /** Width of the backlog row, when activated. You can use all valid css units. Default is columnWidth */ backlogWidth: string; /** Allow to collapse the rows */ vCollapsable: boolean; /** Rows are collapsed or not on init */ vCollapsed: boolean; /** Columns are collapsed or not on init */ hCollapsed: boolean; /** Shows the filter row to search items by filter in filterOnProperties array */ showFilterRow: boolean; /** Placeholder for the input with the filter row */ filterRowPlaceholder: string; /** Predefined filter for the searchbar. If set, the items are filtered by the term on init. */ filter: string; /** * Specify the properties which will be searched for the given term * in filter. If not properties are given, all will be searched */ filterOnProperties: string[]; /** * The collapse state which is applied when set initially */ initialCollapseState: CollapseState[]; scrollStates: ScrollState; /** Fired when the user drags an item. Current item is passed */ readonly dragStarted: EventEmitter<object>; /** Fired when an item is dropped. Current item is passed */ readonly dropped: EventEmitter<DropEvent>; /** Fired when an add action is click. Current ClickEvent is passed */ readonly elementCreateClick: EventEmitter<ClickEvent>; /** Fired when a heading is collapsed. CollapseEvent is emitted */ readonly headingCollapsed: EventEmitter<CollapseEvent>; readonly isScrolling: EventEmitter<ScrollEvent>; readonly scrolledToEnd: EventEmitter<ScrollEvent>; readonly scrollEnded: EventEmitter<ScrollEvent>; /** * Column headings */ hHeadings: (string | GroupHeading)[]; /** * Row headings */ vHeadings: (string | GroupHeading)[]; /** * If set to true, the rows and columns are scrollable and will be out of the viewport. * If not set, all rows and column will only use 100% of the parent element (aligned by flex/flex-fill) */ scrollable: boolean; /** If set to true, rows are scrollable */ verticalScrolling: boolean; /** If set to true, columns are scrollable */ horizontalScrolling: boolean; /** Items to display */ private _items; private readonly collapseStates; private dragItem; private nativeDragItem; private placeholderSet; private currentDragZone; private isScrollingTimeout; private scrollableContainer; constructor(renderer: Renderer2, elRef: ElementRef, cd: ChangeDetectorRef, taskboardService: TaskboardService, ngZone: NgZone); onResize(): void; ngOnInit(): void; executeChangeDetection(): void; ngDoCheck(): void; ngAfterViewInit(): void; /** * Checks if content needs to scroll and restore the scrollstate if needed */ private checkIfContentNeedsToScroll; /** * Prepares board */ private prepareBoard; private restoreScrollState; /** * Matches and set initial collapse state */ private matchAndSetInitialCollapseState; /** * Checks prerequisites * @returns prerequisites */ private checkPrerequisites; /** * Checks if prop is object * @returns true if if prop is object */ private checkIfPropIsObject; /** * Generates the appropiate headings * @memberOf BoardComponent */ private generateHeadings; /** * Generates collapse states * @param array Array of collapse states * @param diretion Generate collapse states for vertical or horizontal groups * @returns collapse states */ private generateCollapseStates; /** * Gets all items of a cell (row / col) * * @param vValue Value of the row * @param hValue Value of the column * @returns Array of all items of a cell * * @memberOf BoardComponent */ getItemsOfGroup(vValue: string, hValue: string): (CardItem | object)[]; /** * Toggles in entire group (all rows or all columns) * * @param direction Direction to toggle * @param collapsed Current collapse state * * @memberOf BoardComponent */ toggleCollapseGroup(direction: string, collapsed: boolean): void; /** * Gets the value of an item * * @param item Item to get the value from * @returns Value of item * * @memberOf BoardComponent */ getValue(item: string | GroupHeading): string; /** * Determines correct group keys * @param item Item object to check * @returns correct group keys */ private determineCorrectGroupKeys; /** * Gets case insensitive prop key * @param item Item object * @param propKey property key * @returns case insensitive prop key */ private getCaseInsensitivePropKey; /** * Gets headings from items * @param [groupKey] key to get the group keys * @returns headings from items */ private getHeadingsFromItems; /** * Gets ungrouped items (which could not be put into rows or cols) * * @returns Array of ungrouped items * * @memberOf BoardComponent */ getUngroupedItems(): (CardItem | object)[]; /** * Toggles an elements collapse state * * @param group Column and row value * * @memberOf BoardComponent */ toggleCollapse(group: { hGroup: string | GroupHeading; vGroup: string | GroupHeading; }): void; /** * Gets the current collapse state of a specific item * * @param collapseItem Item to get the collapse state * @returns true if collapsed, false when expanded * * @memberOf BoardComponent */ collapseState(collapseItem: string | GroupHeading): boolean; /** * Handler which is called when an item starts to drag * * @param event Native drag event * @param item CardItem which is dragged * * @memberOf BoardComponent */ dragStart(event: DragEvent, item: CardItem): void; /** * Handler which is called, when the drag of an item ends * * @param event Native drag event * @param item CardItem which is dragged * * @memberOf BoardComponent */ dragEnd(): void; /** * Handler which is called, when a new item should be created (click on a add icon) * * @param group Row and column value * * @memberOf BoardComponent */ createElement(group: ClickEvent): void; /** * Handler which is called when an item is dropped * * @param event Native drag event * @param vRow Row item * @param hRow Column item * * @memberOf BoardComponent */ drop(event: DragEvent, vRow: string | GroupHeading, hRow: string | GroupHeading): void; /** * Handler which is called when an item is dragged over a cell * * @param event Native html drag event * @param vRow Row item * @param hRow Column item * * @memberOf BoardComponent */ dragOver(event: DragEvent, vRow: string | GroupHeading, hRow: string | GroupHeading): void; /** * Checks if container is scrollable * @param containerName Container to check if scrollable * @returns is scrollable */ private containerIsScrollable; /** * Determines the style of a container which includes the scrollbar * * @returns Style of the container the scrollbar is applied to * * @memberOf BoardComponent */ scrollBarStyle(): object; /** * Gets the current width of a scrollbar * * @returns Object with native css style * * @memberOf BoardComponent */ getColumnWidth(): object; private calculateScrollBarWidth; /** * Creates placeholder element * @returns placeholder element */ private createPlaceholderElement; /** * Gets headings * @param keys key array * @param key key to check * @returns headings */ private getHeadings; /** * Scrolling board component * @param event Event */ scrolling(event: Event): void; private getScrollState; /** * Detects if user has ended scrolling * Got from: https://gomakethings.com/detecting-when-a-visitor-has-stopped-scrolling-with-vanilla-javascript/ * @returns if user has ended scrolling */ private detectIfUserHasEndedScrolling; }