import { AfterViewChecked, AfterViewInit, EventEmitter, Injector, OnDestroy, OnInit, QueryList, TemplateRef } from '@angular/core'; import { SpacerBaseDirective } from '../common/spacer-base.component'; import { QueryData } from '../query-editor/query-editor-contract'; import { DataTableAccessibilityManager } from './data-table-accessibility-manager'; import { DataTableColumnComponent } from './data-table-column.component'; import { DataTableCustomSortEvent, DataTableDataItem, DataTableLazyLoadEvent, DataTableMultipleSelectMode, DataTableRenderedItem, DataTableSortMode, EditableDataChangeSet, NodeNavigatingTask, TreeNodeDataItem } from './data-table-contract'; import { DataTableResponsiveWindowManager } from './data-table-responsive-window-manager'; import * as i0 from "@angular/core"; /** * Data table component */ export declare class DataTableComponent extends SpacerBaseDirective implements OnInit, AfterViewInit, AfterViewChecked, OnDestroy { private static minColumnWidth; private static pxConverter; /** * The source name to use for logging */ protected get logSourceName(): string; private isComponentInitialized; private editableDataChangeSet; private defaultScrollPixels; private defaultScrollPercentage; private maxActualScrollDataElementHeight; private filterDebounceTimeout; private keyboardNavigationDebounceTimeout; private scrollCheckIntervalDuration; private scrollCheckInterval; private navigationKeyboardDebouncing; private bufferRowRate; private eventUnregistraterHandlers; private sortColumn; private previousSortColumn; private internalItems; private actualItems; private calculatedScrollbarWidth; private currentHasVerticalOverflow; private filterDebounceTimer; private tryToFocusSelectedRowTimer; private oldFilterKeyword; private filterKeyword; private internalGlobalFilter; private scrollAboveDataElementHeight; private isScrolling; private isScrollingEventHandlerSetup; private displayItemsTop; private internalRenderedItems; private internalSelection; private hasLongList; private currentStartIndexOfItemInViewPort; private dataScrollTop; private currentRenderedItemInViewPort; private internalGroupColumn; private internalGroupSortMode; private internalSelectionMode; private shadowTree; private activeRenderedItemIndex; private previousActiveRenderedItemIndex; private activeFocusedItemIndex; private hoveredRenderedItemIndex; private renderedItemLengthInViewPort; private renderedItemStartIndexOffset; private currentColumnIndexWithFocusedElement; private unregisterOnElementFocusingEventHandler; private contentAreaHasFocus; private editableNewRowHasFocus; private cancelLastFocusableShadowElementFocusOnce; private layoutChangeSubscriber; private globalFilterSubscriber; private groupKeys; private internalColumns; private treeToggleStatus; private shiftMultipleSelectStartIndex; private internalQueryEditor; private actualColumnProcessed; private tryToFocusEmptyMessageCount; private accessibilityManager; private internalTableAriaLabelledBy; internalTableAriaLabel: string; scrollDataStyleTop: string; scrollAboveDataStyleTop: string; isLoading: boolean; dataTableAccessibilityManager: DataTableAccessibilityManager; DataTableResponsiveWindowManager: DataTableResponsiveWindowManager; columnSortSettings: {}; /** * It determines whether the selected node from the table is collapsed from the parent. */ selectedTreeNodeParentCollapsed: boolean; private resizerIndicator; private headerElement; private headerTableElement; private contentElement; private scrollContainerElement; private tempRowElement; private scrollBodyElement; private scrollAboveDataElement; private scrollDataElement; private emptyMessageElement; private lastFocusableShadowElement; groupHeaderTemplate: TemplateRef; /** * @deprecated since 9/25/2019. Please use 'changesetUpdated' instead */ get onChangesetUpdated(): EventEmitter; changesetUpdated: EventEmitter; /** * It emits the event when selection changing is happening. */ selectionChange: EventEmitter; /** * It emits true when table is rendered with min-height on phone down */ isTableRenderedWithMinHeightPhoneDown: EventEmitter; /** * @deprecated since 9/25/2019. Please use 'rowDblclick' instead */ get onRowDblclick(): EventEmitter<{ data: DataTableDataItem; }>; rowDblclick: EventEmitter<{ data: DataTableDataItem; }>; /** * @deprecated since 9/25/2019. Please use 'groupToggleClick' instead */ get onGroupToggleClicked(): EventEmitter<{ groupData: DataTableDataItem; }>; groupToggleClick: EventEmitter<{ groupData: DataTableDataItem; }>; /** * @deprecated since 9/25/2019. Please use 'editableRowAdded' instead */ get onNewEditableRowAdded(): EventEmitter<{ data: any; overrideNewDataHandler: (data: any) => void; }>; editableRowAdded: EventEmitter<{ data: any; overrideNewDataHandler: (data: any) => void; }>; /** * It indicates the columns rendered on the UI. */ get columns(): QueryList; set columns(value: QueryList); private dataTableTemplateLoaderComponents; /** * It indicates the actual columns used for rendering the table. * In grouping data table scenario, the actual columns doesn't contain the grouping column. */ actualColumns: DataTableColumnComponent[]; /** * It indicates the item rendered on the UI (including the items in and outside of view port). */ get renderedItems(): DataTableRenderedItem[]; set renderedItems(value: DataTableRenderedItem[]); filteredItems: DataTableDataItem[]; /** * It indicates rendered items are changed. */ renderedItemsChange: EventEmitter; /** * It indicates whether there are any background busy tasks. */ isBusy: boolean; /** * It indicates whether to enable the right click select */ enableRightClickSelect: boolean; /** * It indicates the message showing when the data is loading. */ loadingMessage: string; /** * It indicates the message showing when the data loading is finished but the data is empty or no data got rendered. */ noRecordMessage: string; editable: boolean; /** * It indicates whether to expand tree node on root node checked. This parameter can only be used for tree table. */ expandTreeNodeOnChecked: boolean; /** * It indicates whether all editable rows in an editable table should be visible (regardless of hover/selected state). */ isAllEditableRowsVisible: boolean; /** * It indicates that a scrollbar can be used when the expected number of columns is huge */ scrollableHorizontal: boolean; /** * It indicates that a data lazy loading needs to happen and require the consumer to provide data for the lazy loading part. */ lazyLoadingData: EventEmitter; /** * It triggers when a tree node is expanded. * @deprecated since 9/25/2019. Please use 'nodeExpanded' instead */ get onNodeExpand(): EventEmitter<{ node: TreeNodeDataItem; }>; nodeExpanded: EventEmitter<{ node: TreeNodeDataItem; }>; /** * It triggers when a tree node is collapsed. * @deprecated since 9/25/2019. Please use 'nodeCollapsed' instead */ get onNodeCollapsed(): EventEmitter<{ node: TreeNodeDataItem; }>; nodeCollapsed: EventEmitter<{ node: TreeNodeDataItem; }>; /** * It triggers when a tree node is selected. * @deprecated since 9/25/2019. Please use 'nodeSelected' instead */ get onNodeSelect(): EventEmitter<{ node: TreeNodeDataItem; }>; nodeSelected: EventEmitter<{ node: TreeNodeDataItem; }>; /** * It indicates the data is loaded in lazy loading way. */ lazyLoad: boolean; /** * It indicates whether to remember the tree toggle status. */ rememberTreeNodeToggle: boolean; /** * It indicates whether to remember the selection then after the whole data source is refreshed the selection will still be there. */ rememberSelection: boolean; /** * Normally the enter key on a row redirects to the double click behavior of the row. * If this flag is true, then data table would do nothing for enter key on a row. * Then you need to implement the enter key action by your self. */ preventEnterKeyForDefaultAction: boolean; /** * It points to the external function to generate an unique identity string for any data item. * Some scenarios like tree table would need this function to remember toggle status for any tree node by the identity. */ getItemIdentityFunction: (data: any) => string; /** * By default natural sort is turned on. * But for performance concern, you may want to disable natural sort and just do very simple string comparison. */ disableNaturalSort: boolean; /** * Don't enable default tooltips all over WAC by default. * TODO: Investigate each case of data table usage and see if can update as needed to allow this to be enabled by default. * Enabling by default pre-GA is risky and may introduce regressions though. */ enableDefaultTooltips: boolean; /** * It indicates the items rendered above the view port. */ renderedItemsAboveViewPort: DataTableRenderedItem[]; /** * It indicates the items rendered in and below the view port. */ renderedItemsInAndBelowViewPort: DataTableRenderedItem[]; /** * It indicates whether the data table is scrolled down. */ isScrolledDown: boolean; /** * It indicates whether the data table should handle scrolling for content. */ shouldScroll: boolean; /** * It indicates whether the last focusable shadow element should be used. * Normally when the data table is the last focusable element, * the last focusable element need to be used to handle focus movement. */ shouldUseLastFocusableShadowElement: boolean; /** * It indicates whether to scroll to selection after sorting. */ shouldScrollToSelectionAfterSorting: boolean; /** * It gets and sets the global filter value html element. */ get globalFilter(): any; set globalFilter(globalFilter: any); /** * It gets and sets the Case Sensitive flag for filtering. */ caseSensitiveFilter: boolean; /** * It indicates whether the data table should be rendered as a tree data table. */ showAsTree: boolean; /** * It indicates the data structure for the new item */ editableNewDataItem: DataTableDataItem; /** * It gets and sets the data source of the data table. */ get items(): DataTableDataItem[]; set items(value: DataTableDataItem[]); itemsChange: EventEmitter; /** * It exposes the enum type then in template we can directly refer to the enum value name instead of enum value number. */ sortModeEnum: any; /** * It exposes the enum type then in template we can directly refer to the enum value name instead of enum value number. */ renderedItemTypeEnum: any; /** * It gets and sets the selection of the data source. */ get selection(): DataTableDataItem | DataTableDataItem[]; set selection(selection: DataTableDataItem | DataTableDataItem[]); get selectionMode(): string | DataTableMultipleSelectMode; set selectionMode(value: string | DataTableMultipleSelectMode); defaultSortColumn: DataTableColumnComponent; defaultSortMode: DataTableSortMode; /** * It emits the event when filtering is happening. /** * It triggers when a tree node is selected. * @deprecated since 9/25/2019. Please use 'filter' instead */ get onFilter(): EventEmitter; filter: EventEmitter; doCustomSort: EventEmitter; /** * It emits the event when a row is selected. * @deprecated since 9/25/2019. Please use 'rowSelected' instead */ get onRowSelect(): EventEmitter<{ data: DataTableDataItem; }>; rowSelected: EventEmitter<{ data: DataTableDataItem; }>; /** * It emits the event when a row is unselected and no row is selected. * @deprecated since 9/25/2019. Please use 'rowUnselected' instead */ get onRowUnselect(): EventEmitter<{ data: DataTableDataItem; }>; rowUnselected: EventEmitter<{ data: DataTableDataItem; }>; /** * It gets or sets the group column. */ get groupColumn(): DataTableColumnComponent; set groupColumn(value: DataTableColumnComponent); /** * It gets or sets the group sort mode. */ get groupSortMode(): DataTableSortMode; set groupSortMode(value: DataTableSortMode); /** * It indicates whether the group toggle should be used to expand or collapse the group. */ useGroupToggle: boolean; /** * It indicates whether to show the header. */ showHeader: boolean; /** * It indicates the "aria-labelledby" value for the table. */ get tableAriaLabelledBy(): string; set tableAriaLabelledBy(value: string); /** * It indicates the "aria-label" value for the table. */ get tableAriaLabel(): string; set tableAriaLabel(value: string); /** * It indicates should the data table has the grid. */ showGrid: boolean; /** * It indicates whether to show the "all item" checkbox. */ showAllItemCheckbox: boolean; /** * It indicates whether to check the item and uncheck other items when the current item is checked. */ selectAndCheck: boolean; /** * It indicates the row height for each item. */ rowHeight: number; /** * It indicates whether to link the selections of parent nodes and child nodes. * It only apply to tree table scenario. */ linkParentChildrenSelections: boolean; /** * It indicates whether to select the item when navigating with the keyboard (e.g. arrow keys, home, end, page up, page down) */ selectItemWhenNavigatingWithKeyboard: boolean; /** * It indicates whether the data table is scrollable. */ scrollable: boolean; /** * It indicates whether the data table's UI virtualization should be disabled. */ disableUIVirtualization: boolean; /** * It indicates whether the data table items are selectable */ selectable: boolean; /** * It indicates whether the editable data table allow automatically adding new rows * Setting this to false then have to create new line outside of the datatable control */ editableAutoNewRow: boolean; /** * It indicates the default status of the group toggle. */ defaultGroupToggleExpanded: boolean; autoRowHeight: boolean; private columnsOrder; groupToggleStatus: { [group: string]: boolean; }; nodeNavigatingTask: NodeNavigatingTask; isColumnWidthCalculated: boolean; private changeDetector; private ngZone; private layout; constructor(injector: Injector); getEditableDataChangeSet(): EditableDataChangeSet; refreshData(): void; resetScroll(): void; ngOnInit(): void; /** * It calculates the actual selected row from the data table data and apply proper css class to it visually. * @param renderedItem the rendered item for the data table. * @returns true if the row should be displayed as selected, false otherwise. */ rowDisplayAsSelected(renderedItem: DataTableRenderedItem): boolean; onHeaderTablePressed(event: KeyboardEvent): void; onContentTableKeyUp(event: KeyboardEvent): void; private arbitraryScroll; onContentTablePressed(event: KeyboardEvent): void; private onContentTablePressedShowAsTreeHelper; /** * It handles the keyboard press event for enter and space * To trigger this function, either focus on table row or table row cell template and * click the 'enter' or 'space' button. */ private onContentTablePressedEnterSpace; private onContentTablePressedRightArrow; private onContentTablePressedLeftArrow; isTreeTableParentNode(treeNodeItem: DataTableRenderedItem): boolean; onContentItemFocused(event: FocusEvent, renderedItem: DataTableRenderedItem): void; onContentItemBlurred(event: any, renderedItem: DataTableRenderedItem): void; deleteEditableDataRow(data: any): void; onLastFocusableShadowElementFocused(event: any): void; generateNGClassForRenderedItem(renderedItem: DataTableRenderedItem): any; shouldAllItemCheckBoxChecked(): boolean; setHoveredRenderedItem(renderedItem: DataTableRenderedItem): void; unsetHoveredRenderedItem(renderedItem: DataTableRenderedItem): void; private getIsFocusingOutFromLastFormField; handleRenderedItemRowFocusOut(renderedItem: DataTableRenderedItem): void; shouldShowEditRow(renderedItem: DataTableRenderedItem): boolean; /** * Retrieves the text that should be associated with the aria-label for column sort order (if sortable). * This label is utilized by screen readers for accessibility. * If the current sort order is Ascending, the label will indicate a button icon is present to Descend order. * If the current sort order is Descending, the label will indicate a button icon is present to Ascend order. * If the current sort order is None, the label is null, and the screen reader will not read anything. * @param column the table column * @returns the text for the aria-label on the sort icon */ getSortLabel(column: DataTableColumnComponent): string; /** * It implements the AfterViewInit interface. */ ngAfterViewInit(): void; private checkImmediateValidation; /** * It implements the OnDestroy interface. */ ngOnDestroy(): void; /** * It implements the AfterViewChecked interface. */ ngAfterViewChecked(): void; /** * It handles the selection of the given data table item. */ selectItem(event: MouseEvent | KeyboardEvent, item: DataTableRenderedItem): void; /** * function to focus on empty message when the data table is empty */ private tryToFocusEmptyMessage; private deferredTryToFocusEmptyMessage; private resetTryToFocusEmptyMessageCount; /** * It returns the no records message when the data table is empty. */ getNoRecordsMessage(): string; /** * It determines whether to, or not to show the No-Records Message. */ showNoRecordsMessage(): boolean; /** * It handles the behavior that when a group toggle is clicked. */ clickGroupToggle(item: DataTableRenderedItem, toggleStatusOverriddenValue?: boolean): void; /** * It handles the behavior that when a tree node toggle is clicked. */ clickTreeToggle(event: Event, item: DataTableRenderedItem, toggleStatusOverriddenValue?: boolean): void; /** * It expands all the groups. */ expandAllGroup(): void; /** * It collapses all the groups. */ collapseAllGroup(): void; /** * It returns the boolean to indicate whether the given column is the first data column. * The returned value can be used to add some custom css for the first data column when grouping is enabled. */ isFirstDataColumn(column: DataTableColumnComponent): boolean; /** * Return id if the column is the first and rendered item has a valid index, otherwise return null */ getFirstColumnId(column: DataTableColumnComponent, renderedItem: DataTableRenderedItem): string; onColumnResizing(event: any): void; onColumnResized(columnIndex: number, event: any): void; /** * It handles the column clicking. */ clickColumn(column: DataTableColumnComponent): void; /** * It handles the row double clicking. */ doubleClickRow(event: MouseEvent, item: DataTableRenderedItem): void; /** * It scrolls the selected item into the view and */ scrollSelectedItemIntoView(tryToMoveToCenter?: boolean): void; /** * It handles the clicking behavior of checkbox. * Multiple selection behavior is happening here. */ onItemCheckBoxClicked(item: DataTableRenderedItem, isFromKeyboard?: boolean): void; /** * It handles the "check all" checkbox behavior. */ onAllItemCheckBoxClicked(): void; /** * It indicates whether the given item is selected. */ isItemSelected(item: DataTableRenderedItem): boolean; /** * It indicates whether a group with the given name is expanded. */ isGroupExpanded(group: string): boolean; /** * It gets and sets the virtual count. * It only works when "lazyLoad" is true. */ get virtualCount(): number; set virtualCount(value: number); /** * It resolves the object properties based on the given path with multiple levels of properties. * An example of path is "location.zipCode". */ resolveObjectPath(obj: any, path: string): any; /** * It returns the active rendered item index. */ getActiveRenderedItemIndex(): number; private setActiveRenderedItemIndex; /** * It returns the active focused item index. */ getActiveFocusedItemIndex(): number; private selectOrFocusRowByIndex; /** * Gets the table cell item. * @param rowIndex The row index for getting all the table cells * @returns the HTML element for the table cell. */ getTableCells(rowIndex: number): HTMLElement; /** * Moves to head of the whole rendered item list. */ moveToHeadOfRenderedItems(doSelection?: boolean): void; /** * Moves to previous page of the rendered item list. */ moveToPreviousPageOfRenderedItems(doSelection?: boolean): void; /** * Moves to previous item in the rendered item list. */ moveToPreviousRenderedItem(doSelection?: boolean): void; /** * Moves to next item in the rendered item list. * @param doSelection if true will do selection and focus, otherwise focus only */ moveToNextRenderedItem(doSelection?: boolean, columnIndex?: number): void; /** * Moves to next page of the rendered item list. */ moveToNextPageOfRenderedItems(doSelection?: boolean): void; /** * Moves to end of the whole rendered list. */ moveToEndOfRenderedItems(doSelection?: boolean): void; /** * Activate the rendered item by condition. * Activate doesn't mean select. It just indicates which item is active to received more operations especially keyboard operations. */ activateRenderedItemByCondition(condition: (item: DataTableDataItem) => boolean, doSelection: boolean): void; /** * Activate the rendered item by index. * Activate doesn't mean select. It just indicates which item is active to received more operations especially keyboard operations. */ private activateRenderedItemByIndex; private tryToFocusRowByIndex; getAriaExpandedAttributeValue(renderedItem: DataTableRenderedItem): string; getAdditionalScreenRecorderContent(renderedItem: DataTableRenderedItem): string; onEditableDataChanged(renderedItem: DataTableRenderedItem, field: string): void; resetEditableDataChangeset(): void; onValidationAlertHandler(renderedItem: DataTableRenderedItem, field: string, alert: any): void; hasValidationError(renderedItem: DataTableRenderedItem): boolean; getRoleAttributeForTreeTableRow(renderedItem: DataTableRenderedItem): string; getAriaSortAttributeValue(column: DataTableColumnComponent): string; clearSelection(keepHighlightFromRow?: boolean): void; checkIsTableRenderedOnPhoneDownWithMinHeight(shouldEmit?: boolean, forceLayout?: boolean): boolean; removeHighlightFromRow(): void; navigateByPath(pathSections: string[], getNodeLabelHandler: (node: TreeNodeDataItem) => string, onTaskFinishedHandler?: (found: boolean) => void, isNodeLoadingHandler?: (node: TreeNodeDataItem) => boolean, timeout?: number, onlyTriggerSelectionForLastNode?: boolean, matchFirstAFew?: boolean): void; getAllItemCheckBoxAriaLabel(): string; protected getInitialHostClasses(): string[]; private handlePathNavigation; private initializeUI; private sortItems; private defaultSortCompareFunction; private hasVerticalOverflow; private alignScrollBar; private calculateScrollbarWidth; private calculateItemInViewPort; private processFilter; private updateAriaAttributes; private handleTreeNode; private generateRenderItems; private renderItems; private handleScrollAboveDataElement; onLayoutChangedResponsiveWindow(): void; /** * Give the access of this function on special situation where dialog contains data-table */ refresh(): void; /** * The on window breakpoint changed handler. * Adding yield for component to get ElementRef after initialization. */ private onWindowBreakpointChanged; private onLayoutChanged; private deferredOnLayoutChanged; private handleTreeNodeSelection; private alignContent; /** * The try to focus on row function; if there are no records, the no records message is selected * @param index Only pass in index if needs focus only */ private tryToFocusSelectedRow; private onElementFocusing; private processColumns; private processColumnsMain; private processActualColumns; processColumnsByOrder(order: Array): void; /** * Get the number of filtered items (if any) within the dataTable. * @returns number of dataTable filtered items, zero if none. */ getNumberOfFilteredItems(): number; /** * Get the tooltip handler that should be used for data table column. * @param column Column for tooltip handler * @param renderedItem Data item for the row * @returns Tooltip string if exists. */ getColumnTooltipText(column: DataTableColumnComponent, renderedItem: DataTableRenderedItem): string; /** * This function is added from upgrading data table to support editable data table * The idea is to use the data table's header width to be applied on the data table body columns. * When not showing headers, need to use the header's width to be applied to td as well. */ private calculateColumnDomWidths; /** * This function gives one more tick so that the loading wheel can stand one more html rendering life cycle * This fixes a bug related to data table on load mis-aligned * @param input boolean */ private setIsColumnWidthCalculated; private updateActiveRenderedItemIndexBySelection; private getTreeNodeDataIdentity; private selectAll; applyQueryEditor(validatedQueryEditorList: QueryData): void; private queryEditorFilterMain; private queryEditorFilterByTimespanDropdown; private queryEditorFilterByMultipleSelection; /** * The handler for collapsing, checking if node1 contains node2. * @param node1 the node as root to check if it contains node2. * @param node2 the node to be checked if children of node1. * @returns true if node1 contains node2. */ private treeTableCollapseHandler; /** * Creates the idBag used by this component to store unique element ids. */ protected createIdBag(): MsftSme.StringMap; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * the tree grid accessibility documentations: https://wiki.mozilla.org/Accessibility/TreeGrid */ export declare class TreeTableComponent extends DataTableComponent { /** * The source name to use for logging */ protected get logSourceName(): string; constructor(injector: Injector); protected getInitialHostClasses(): string[]; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; }