@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
368 lines • 19 kB
TypeScript
import { CdkTable } from '@angular/cdk/table';
import { AfterViewInit, ElementRef, EventEmitter, OnChanges, QueryList, ViewContainerRef } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';
import { IResultList } from '@c8y/client';
import { BsDropdownDirective } from 'ngx-bootstrap/dropdown';
import { BehaviorSubject, Observable, Subject } from 'rxjs';
import { AlertService } from '../alert/alert.service';
import { EmptyStateContextDirective } from '../common/empty-state/empty-state-context.directive';
import { LoadMoreComponent } from '../common/load-more.component';
import { LoadMoreMode } from '../common/load-more.model';
import { PopoverConfirmButtons, PopoverConfirmComponent } from '../modal/popover-confirm.component';
import { GainsightService } from '../product-experience/gainsight.service';
import { ProductExperienceEvent, ProductExperienceEventSource } from '../product-experience/product-experience.model';
import { ActionControlsExtensionService } from './action-controls-extension.service';
import { CellRendererSpec } from './column/cell-renderer';
import { ColumnDirective } from './column/column.directive';
import { FilteringFormRendererSpec, FilteringModifier } from './column/filtering-form-renderer';
import { DataGridConfigurationStrategy, GridEventType } from './data-grid-configuration.model';
import { ActionControl, BuiltInActionType, BulkActionControl, Column, CustomColumnConfig, DataGrid, DataSourceStats, DisplayOptions, Filter, FilterChip, FilteringActionType, GridConfig, HeaderActionControl, Pagination, Row, ServerSideDataCallback, SortOrder } from './data-grid.model';
import { DataGridService } from './data-grid.service';
import { ExpandableRowDirective } from './expandable-row.directive';
import { GridDataSource } from './grid-data-source';
import * as i0 from "@angular/core";
export declare class DataGridComponent implements DataGrid, OnChanges, AfterViewInit, ProductExperienceEventSource {
configurationStrategy: DataGridConfigurationStrategy;
private dataGridService;
private sanitizer;
private gainsightService;
private alertService;
private actionControlsService;
private route;
/** The title for the data grid, it's displayed in the grid's header. */
title: string;
/** The label for load more button. */
loadMoreItemsLabel: string;
/** The label for loading indicator. */
loadingItemsLabel: string;
/** Determines whether text search input is shown in the grid's header. */
showSearch: boolean;
/** Takes an event emitter. When an event is emitted, the grid will be reloaded. */
refresh: EventEmitter<void>;
columns: Column[];
/** The list of columns to be displayed in the grid. */
_columns: Column[];
dataSource: GridDataSource;
rows: Row[];
/** The list of rows to be displayed in the grid (used for client side data). */
set _rows(rows: Row[]);
filteringLabelsParams: {
filteredItemsCount: number;
allItemsCount: number;
};
pagination: Pagination;
paginationLabelParams: {
pageFirstItemIdx: number;
pageLastItemIdx: number;
itemsTotal: number;
};
lastClickedRow: Row;
readonly possiblePageSizes: number[];
readonly minPossiblePageSize: number;
/** Pagination settings, e.g. allows for setting current page or page size. */
set _pagination(pagination: Pagination);
/** Child node pagination settings, e.g. allows for setting page size of loaded child node pages. */
childNodePagination: Pagination;
infiniteScroll: LoadMoreMode;
/** Sets load more mode. */
set _infiniteScroll(infiniteScroll: LoadMoreMode);
serverSideDataCallback: ServerSideDataCallback;
/**
* Sets a callback function which will be invoked whenever data needs to be loaded from server.
* The function should take [[DataSourceModifier]] and return [[ServerSideDataResult]].
*/
set _serverSideDataCallback(serverSideDataCallback: ServerSideDataCallback);
selectable: boolean;
/** Determines whether items can be selected by clicking a checkbox in the first column. */
set _selectable(selectable: boolean);
singleSelection: boolean;
/** Restricts selection to a single row only. Selection column displays radio button instead of checkboxes */
set _singleSelection(singleSelection: boolean);
selectionPrimaryKey: string;
/** Determines which item's property will be used to distinguish selection status. */
set _selectionPrimaryKey(selectionPrimaryKey: string);
displayOptions: DisplayOptions;
/** Sets display options. */
set _displayOptions(displayOptions: DisplayOptions);
actionControls: ActionControl[];
/** Sets action controls (actions available for individual items). */
set _actionControls(actionControls: ActionControl[]);
bulkActionControls: BulkActionControl[];
/** Sets bulk action controls (actions available for items selected by user). */
set _bulkActionControls(bulkActionControls: BulkActionControl[]);
headerActionControls: HeaderActionControl[];
/** Sets header action controls (actions available from data grid header). */
set _headerActionControls(headerActionControls: HeaderActionControl[]);
/** Sets initial search text. */
searchText: string;
/** Determines if custom columns button will be enabled. */
configureColumnsEnabled: boolean;
/** Shows the warning for the sub-assets counter */
showCounterWarning: boolean;
/**
* Sets the class name used for active rows (last clicked).
* Set empty string to disable appending active class to grid rows.
*/
activeClassName: string;
/** Determines if the rows of the data grid will be expandable.
* Possible values:
* - `NONE` - no expandable rows (default value)
* - `SYNC` - additional column with expand button is displayed and expandable rows are expanding synchronously when button is clicked
* - `ASYNC` - additional column with expand button is displayed and expandable rows are expanding asynchronously when button is clicked
*/
expandableRows: 'NONE' | 'SYNC' | 'ASYNC';
/**
* Determines if the data grid is a tree grid.
* If set to true, an additional column with expand/collapse button is displayed for rows with child nodes.
*/
treeGrid: boolean;
/** Determines if the Reload button will be hidden. */
hideReload: boolean;
/**
* In a client side data fed tree-grid, this input determines the name of the
* property holding the child nodes of the current node.
* Default value is `childNodes`.
*/
set childNodesProperty(childNodesProperty: string);
/**
* In a tree-grid, this input determines the name of the property that will be used as a label
* to refer to the parent node its pagination row.
*/
parentNodeLabelProperty: string;
/** Emits an event when mouse is over a row. */
rowMouseOver: EventEmitter<object>;
/** Emits an event when mouse leaves a row. */
rowMouseLeave: EventEmitter<object>;
/** Emits an event when a row is clicked. */
rowClick: EventEmitter<object>;
/** Emits an event when grid's configuration is changed. */
onConfigChange: EventEmitter<GridConfig>;
/** Emits an event before the filter is applied. */
onBeforeFilter: EventEmitter<object>;
/** Emits an event before the search is performed. */
onBeforeSearch: EventEmitter<string>;
/** Emits an event when a filter is applied in a column. */
onFilter: EventEmitter<{
columnName?: string;
dropdown?: BsDropdownDirective;
filteringModifier?: Filter;
}>;
/** Emits an event when items selection changes. The array contains keys of selected items (key property is defined by `selectionPrimaryKey`). */
itemsSelect: EventEmitter<string[]>;
/** Emits an event when reload button is clicked. */
onReload: EventEmitter<void>;
/** Emits an event when a custom column is added */
onAddCustomColumn: EventEmitter<CustomColumnConfig>;
/** Emits an event when a custom column is removed */
onRemoveCustomColumn: EventEmitter<Column>;
/** Emits an event after the column filter has been reset */
onColumnFilterReset: EventEmitter<Column>;
/** Emits an event when column sorting has been changed */
onSort: EventEmitter<GridConfig>;
/** Emits an event when page size has been changed */
onPageSizeChange: EventEmitter<GridConfig>;
/** Emits an event when column order has been changed */
onColumnReordered: EventEmitter<GridConfig>;
/** Emits an event when column order has been changed */
onColumnVisibilityChange: EventEmitter<GridConfig>;
columnRenderers: QueryList<ColumnDirective>;
expandableRow: ExpandableRowDirective;
scrollContainer: ElementRef;
infiniteScrollContainer: ViewContainerRef;
emptyState: EmptyStateContextDirective;
loadMoreComponent: LoadMoreComponent;
columnNames: any[];
styles: {
tableCursor: string;
gridTemplateColumns: any;
gridInfiniteScrollColumn: any;
};
searchText$: EventEmitter<string>;
filteringApplied: boolean;
columnsWithFiltersApplied: Column[];
totalPagesCount$: BehaviorSubject<number>;
hidePagination$: Observable<boolean>;
selectedItemIds: string[];
currentPageSelectionState: {
allSelected: boolean;
allDeselected: boolean;
};
builtInActionType: {
Edit: BuiltInActionType;
Delete: BuiltInActionType;
Export: BuiltInActionType;
};
confirmRemoveColumnButtons: PopoverConfirmButtons[];
isConfigContextKnown: boolean;
emptyStateContext$: Observable<DataSourceStats>;
/**
* A map of rows which have been expanded.
*/
expandedRows: Map<Row, {
visible$: Subject<boolean> | BehaviorSubject<boolean>;
}>;
/** Product experience constants declarations */
productExperienceEvent: ProductExperienceEvent;
PX_ACTIONS: {
APPLY_FILTER: string;
RESET_FILTER: string;
REMOVE_FILTER: string;
CLEAR_FILTER: string;
CUSTOM_ACTION: string;
ADD_CUSTOM_COLUMN: string;
REMOVE_CUSTOM_COLUMN: string;
REORDER_COLUMNS: string;
CHANGE_VISIBILITY: string;
CHANGE_SORTING_ORDER: string;
CHANGE_PAGINATION: string;
SELECT_ALL_ITEMS: string;
BULK_DELETE: string;
BULK_EXPORT: string;
BULK_CUSTOM_ACTION: string;
BULK_CANCEL: string;
SELECT_ITEM: string;
EDIT_ITEM: string;
DELETE_ITEM: string;
EXPORT_ITEM: string;
CUSTOM_ACTION_ITEM: string;
RELOAD: string;
SEARCH: string;
CLEAR_SEARCH: string;
};
readonly sortColumnTitle: "Sort column \"{{ name }}\"";
resizeHandleMouseDown$: EventEmitter<{
event: MouseEvent;
targetColumnName: string;
}>;
resizeHandleContainerMouseMove$: EventEmitter<MouseEvent>;
resizeHandleContainerMouseUp$: EventEmitter<MouseEvent>;
filtersHelpPopoverHtml: string;
canRetrieveAssetProperties: Promise<boolean>;
private customColumnService;
private headerBeingResized;
private thRefs;
private thEls;
tableRef: CdkTable<any>;
private recreateLoadMoreComponent;
private columnsInitialized;
private defaultColumns;
private reloadConfiguration$;
private actionControlsInput$;
private unsubscribe$;
private manualSearch$;
private lastManualSearchValue;
private readonly SEARCH_DEBOUNCE_TIME;
/**
* Event emitter, taking boolean values used for loading data grid data with debounce.
* Default value is set to false. Set to true if data grid is using infinite scroll and page should be reloaded.
* This is used to avoid having multiple this.loadData() function calls.
*/
private triggerLoadData;
constructor(configurationStrategy: DataGridConfigurationStrategy, dataGridService: DataGridService, sanitizer: DomSanitizer, gainsightService: GainsightService, alertService: AlertService, actionControlsService: ActionControlsExtensionService, route: ActivatedRoute);
ngOnInit(): void;
setExpandableRowVisible(row: Row, success: boolean): void;
ngOnChanges(event: any): void;
ngAfterViewInit(): void;
ngOnDestroy(): void;
expand(row: Row): BehaviorSubject<boolean> | Subject<boolean>;
collapse(row: Row): void;
expandNode(row: Row): void;
collapseNode(row: Row): void;
isDataRow: (idx: number, row: Row) => boolean;
isRowExpanded: (_: any, row: Row) => boolean;
isPaginationRow: (_: any, row: Row) => boolean;
setColumns(config: GridConfig): void;
setPageSize(config: GridConfig): void;
openCustomColumn(): Promise<void>;
removeCustomColumn(poConfirm: PopoverConfirmComponent, column: Column, ddConfigureColumns: BsDropdownDirective): Promise<void>;
removeFilter(filter: Partial<FilterChip>): Promise<void>;
trackByName(index: any, item: any): any;
resolveCellValue(row: any, path: any): any;
changeSortOrder(columnName: any): void;
updateSorting(columnNames: string[], sortOrder: SortOrder): void;
applyFilter(columnName: any, dropdown: any, filteringModifier: any): void;
resetFilter(columnName: any, dropdown: any): void;
clearFilters(reload?: boolean): void;
updateFiltering(columnNames: string[], action: {
type: FilteringActionType;
payload?: {
filteringModifier: FilteringModifier;
};
}, reload?: boolean): void;
updateFilteringApplied(): void;
isColumnFilteringApplied(column: Column): boolean;
updatePagination({ itemsPerPage, page }: {
itemsPerPage: any;
page: any;
}): void;
updateChildPagination({ itemsPerPage, page }: {
itemsPerPage: any;
page: any;
}, { parentRow }: {
parentRow: any;
}): void;
clickReload(): void;
reload(redirect?: boolean): void;
loadNextPage(): Promise<IResultList<object>>;
getCellRendererSpec({ value, row, columnName }: {
value: any;
row: any;
columnName: any;
}): CellRendererSpec;
getHeaderCellRendererSpec({ value, columnName }: {
value: any;
columnName: any;
}): CellRendererSpec;
getFilteringFormRendererSpec({ column, dropdown }: {
column: any;
dropdown: any;
}): FilteringFormRendererSpec;
setAllItemsSelected(selected: any): void;
setAllItemsInCurrentPageSelected(selected: any): void;
setItemsSelected(items: any, selected: any): void;
changeSelectedItem(item: any): void;
cancel(): void;
isItemSelected(item: any): boolean;
onColumnDrop({ previousIndex, currentIndex }: {
previousIndex: any;
currentIndex: any;
}): void;
updateGridColumnsSize(): void;
updateThEls(): void;
isDropDownPlacedRight(column: Column): boolean;
emitConfigChange(eventType?: GridEventType): void;
triggerEvent(eventData: any): void;
handleClick(row: Row): void;
performSearch(searchText: string): void;
private setupSearchObservables;
private onResetFilterAction;
private mapColumnToConfig;
private loadData;
private updateColumns;
private addOrRemoveCellPaddingClass;
private checkIfAnyValuesExist;
private withColumnDefaults;
private updateColumnNames;
private setupResizeHandle;
private clearMouseHighlights;
private _getCellRendererSpec;
private getColumnRenderer;
private updateFilteringLabelsParams;
private updatePaginationLabelParams;
private updatePaginationWhenNoDevicesLastPage;
private createLoadMoreComponent;
private scrollToTop;
private processAndPersistConfigChange;
private trimFilterConfigPipe;
private trimSortConfigPipe;
private trimCustomColumnConfigPipe;
private ignoreColumnOrderPipe;
private ignoreColumnVisibilityPipe;
private checkEventPipe;
private resolveConfigFilter;
private safelyInvokeMatcher;
static ɵfac: i0.ɵɵFactoryDeclaration<DataGridComponent, [{ optional: true; }, null, null, null, null, null, null]>;
static ɵcmp: i0.ɵɵComponentDeclaration<DataGridComponent, "c8y-data-grid", never, { "title": { "alias": "title"; "required": false; }; "loadMoreItemsLabel": { "alias": "loadMoreItemsLabel"; "required": false; }; "loadingItemsLabel": { "alias": "loadingItemsLabel"; "required": false; }; "showSearch": { "alias": "showSearch"; "required": false; }; "refresh": { "alias": "refresh"; "required": false; }; "_columns": { "alias": "columns"; "required": false; }; "_rows": { "alias": "rows"; "required": false; }; "_pagination": { "alias": "pagination"; "required": false; }; "childNodePagination": { "alias": "childNodePagination"; "required": false; }; "_infiniteScroll": { "alias": "infiniteScroll"; "required": false; }; "_serverSideDataCallback": { "alias": "serverSideDataCallback"; "required": false; }; "_selectable": { "alias": "selectable"; "required": false; }; "_singleSelection": { "alias": "singleSelection"; "required": false; }; "_selectionPrimaryKey": { "alias": "selectionPrimaryKey"; "required": false; }; "_displayOptions": { "alias": "displayOptions"; "required": false; }; "_actionControls": { "alias": "actionControls"; "required": false; }; "_bulkActionControls": { "alias": "bulkActionControls"; "required": false; }; "_headerActionControls": { "alias": "headerActionControls"; "required": false; }; "searchText": { "alias": "searchText"; "required": false; }; "configureColumnsEnabled": { "alias": "configureColumnsEnabled"; "required": false; }; "showCounterWarning": { "alias": "showCounterWarning"; "required": false; }; "activeClassName": { "alias": "activeClassName"; "required": false; }; "expandableRows": { "alias": "expandableRows"; "required": false; }; "treeGrid": { "alias": "treeGrid"; "required": false; }; "hideReload": { "alias": "hideReload"; "required": false; }; "childNodesProperty": { "alias": "childNodesProperty"; "required": false; }; "parentNodeLabelProperty": { "alias": "parentNodeLabelProperty"; "required": false; }; }, { "rowMouseOver": "rowMouseOver"; "rowMouseLeave": "rowMouseLeave"; "rowClick": "rowClick"; "onConfigChange": "onConfigChange"; "onBeforeFilter": "onBeforeFilter"; "onBeforeSearch": "onBeforeSearch"; "onFilter": "onFilter"; "itemsSelect": "itemsSelect"; "onReload": "onReload"; "onAddCustomColumn": "onAddCustomColumn"; "onRemoveCustomColumn": "onRemoveCustomColumn"; "onColumnFilterReset": "onColumnFilterReset"; "onSort": "onSort"; "onPageSizeChange": "onPageSizeChange"; "onColumnReordered": "onColumnReordered"; "onColumnVisibilityChange": "onColumnVisibilityChange"; }, ["expandableRow", "emptyState", "columnRenderers"], ["c8y-ui-empty-state, .c8y-empty-state"], true, never>;
}
//# sourceMappingURL=data-grid.component.d.ts.map