UNPKG

@c8y/ngx-components

Version:

Angular modules for Cumulocity IoT applications

368 lines 19 kB
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