ornamentum
Version:
Angular Toolkit
1,374 lines (1,360 loc) • 258 kB
JavaScript
import { InjectionToken, Injectable, Inject, EventEmitter, Component, ContentChild, Input, Output, Directive, ElementRef, Pipe, ComponentFactoryResolver, ApplicationRef, ɵɵdefineInjectable, NgModule, Injector, Renderer2, ViewChild, forwardRef, NgZone, ContentChildren } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { ReplaySubject, Subject, fromEvent, of } from 'rxjs';
import { debounceTime, switchMap, take, catchError, map, pairwise } from 'rxjs/operators';
import { HttpParams, HttpClient } from '@angular/common/http';
import { webSocket } from 'rxjs/webSocket';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const DATA_TABLE_CONFIG = new InjectionToken('dataTableConfig');
/**
* Data table config service
* Manage all the global configurations of grid which can be overridden while importing the module.
*/
class DataTableConfigService {
/**
* @param {?} dataTableConfig
*/
constructor(dataTableConfig) {
this.dataTableConfig = dataTableConfig;
// Table base config
this.persistTableState = false;
this.storageMode = 'session';
this.multiColumnSortable = false;
this.showHeader = false;
this.title = '';
this.width = undefined;
this.minContentHeight = 200;
this.minContentWidth = undefined;
this.contentHeight = undefined;
this.pageable = false;
this.loadOnScroll = false;
this.loadViewDistanceRatio = 1;
this.showIndexColumn = false;
this.indexColumnTitle = '#';
this.rowSelectable = false;
this.selectMode = 'single';
this.showRowSelectCheckbox = true;
this.showRowSelectAllCheckbox = false;
this.showSubstituteRows = false;
this.expandableRows = false;
this.selectOnRowClick = false;
this.expandOnRowClick = false;
this.autoFetch = true;
this.showLoadingSpinner = true;
this.selectTrackBy = 'id';
this.filterDebounceTime = 500;
this.filterDebounce = true;
this.showRefreshButton = false;
this.showColumnSelector = false;
this.columnSelectorWidth = 240;
this.expanderColumnWidth = 30;
this.indexColumnWidth = 30;
this.selectionColumnWidth = 30;
this.showRowExpandLoadingSpinner = false;
this.offset = 0;
this.limit = 10;
this.maxLimit = 100;
this.stateKeyPrefix = 'grid_state_';
this.baseTranslations = {
noDataMessage: {
header: 'Whoops!',
body: 'No data to display. Added data will appear here.',
},
pagination: {
limit: 'Limit:',
rangeKey: 'Results:',
rangeSeparator: 'of',
nextTooltip: 'Next',
previousTooltip: 'Previous',
lastTooltip: 'Last',
firstTooltip: 'First'
},
columnSelector: {
header: 'Show/Hide Column'
},
dropdownFilter: {
noDataMessage: 'No Results Available',
filterPlaceholder: 'Search',
selectedOptionWrapPlaceholder: 'Options',
selectPlaceholder: 'Select'
}
};
// Table column config
this.sortable = false;
this.sortOrder = '';
this.filterable = false;
this.filterPlaceholder = 'Search';
this.columnResizable = false;
this.columnVisible = true;
this.showDropdownFilter = false;
this.showFilterClearButton = true;
// Column dropdown filter options
this.dropdownFilterMenuPosition = 'bottom-left';
this.dropdownFilterSelectMode = 'multi';
this.dropdownFilterSearchable = true;
this.dropdownFilterSearchDebounceTime = 500;
this.dropdownFilterSearchDebounce = true;
this.dropdownFilterWrapDisplaySelectLimit = 1;
this.dropdownFilterGroupByField = undefined;
this.dropdownFilterShowSelectedOptionRemoveButton = false;
this.dropdownFilterShowClearSelectionButton = true;
this.dropdownFilterMenuWidth = 320;
this.dropdownFilterMenuHeight = 250;
this.dropdownFilterMultiSelectOptionMaxWidth = 135;
this.dropdownFilterCloseMenuOnSelect = true;
this.dropdownFilterDynamicDimensionCalculation = true;
this.dropdownFilterDynamicWidthRatio = 1.25;
this.dropdownFilterDynamicHeightRatio = 1.25;
if (dataTableConfig) {
Object.assign(this, dataTableConfig);
}
}
/**
* @param {?} value
* @return {?}
*/
set translations(value) {
if (!value) {
return;
}
// all keys are object type.
for (const [key, val] of Object.entries(value)) {
this.baseTranslations[key] = Object.assign({}, this.baseTranslations[key], val);
}
}
/**
* Returns translations.
* @return {?}
*/
get translations() {
return this.baseTranslations;
}
/**
* Get row select checkbox column.
* @return {?}
*/
get showRowSelectCheckboxColumn() {
return this.rowSelectable && this.showRowSelectCheckbox;
}
}
DataTableConfigService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
DataTableConfigService.ctorParameters = () => [
{ type: undefined, decorators: [{ type: Inject, args: [DATA_TABLE_CONFIG,] }] }
];
if (false) {
/** @type {?} */
DataTableConfigService.prototype.persistTableState;
/** @type {?} */
DataTableConfigService.prototype.storageMode;
/** @type {?} */
DataTableConfigService.prototype.multiColumnSortable;
/** @type {?} */
DataTableConfigService.prototype.showHeader;
/** @type {?} */
DataTableConfigService.prototype.title;
/** @type {?} */
DataTableConfigService.prototype.width;
/** @type {?} */
DataTableConfigService.prototype.minContentHeight;
/** @type {?} */
DataTableConfigService.prototype.minContentWidth;
/** @type {?} */
DataTableConfigService.prototype.contentHeight;
/** @type {?} */
DataTableConfigService.prototype.pageable;
/** @type {?} */
DataTableConfigService.prototype.loadOnScroll;
/** @type {?} */
DataTableConfigService.prototype.loadViewDistanceRatio;
/** @type {?} */
DataTableConfigService.prototype.showIndexColumn;
/** @type {?} */
DataTableConfigService.prototype.indexColumnTitle;
/** @type {?} */
DataTableConfigService.prototype.rowSelectable;
/** @type {?} */
DataTableConfigService.prototype.selectMode;
/** @type {?} */
DataTableConfigService.prototype.showRowSelectCheckbox;
/** @type {?} */
DataTableConfigService.prototype.showRowSelectAllCheckbox;
/** @type {?} */
DataTableConfigService.prototype.showSubstituteRows;
/** @type {?} */
DataTableConfigService.prototype.expandableRows;
/** @type {?} */
DataTableConfigService.prototype.selectOnRowClick;
/** @type {?} */
DataTableConfigService.prototype.expandOnRowClick;
/** @type {?} */
DataTableConfigService.prototype.autoFetch;
/** @type {?} */
DataTableConfigService.prototype.showLoadingSpinner;
/** @type {?} */
DataTableConfigService.prototype.selectTrackBy;
/** @type {?} */
DataTableConfigService.prototype.filterDebounceTime;
/** @type {?} */
DataTableConfigService.prototype.filterDebounce;
/** @type {?} */
DataTableConfigService.prototype.showRefreshButton;
/** @type {?} */
DataTableConfigService.prototype.showColumnSelector;
/** @type {?} */
DataTableConfigService.prototype.columnSelectorWidth;
/** @type {?} */
DataTableConfigService.prototype.expanderColumnWidth;
/** @type {?} */
DataTableConfigService.prototype.indexColumnWidth;
/** @type {?} */
DataTableConfigService.prototype.selectionColumnWidth;
/** @type {?} */
DataTableConfigService.prototype.showRowExpandLoadingSpinner;
/** @type {?} */
DataTableConfigService.prototype.offset;
/** @type {?} */
DataTableConfigService.prototype.limit;
/** @type {?} */
DataTableConfigService.prototype.maxLimit;
/** @type {?} */
DataTableConfigService.prototype.stateKeyPrefix;
/** @type {?} */
DataTableConfigService.prototype.baseTranslations;
/** @type {?} */
DataTableConfigService.prototype.sortable;
/** @type {?} */
DataTableConfigService.prototype.sortOrder;
/** @type {?} */
DataTableConfigService.prototype.filterable;
/** @type {?} */
DataTableConfigService.prototype.filterPlaceholder;
/** @type {?} */
DataTableConfigService.prototype.columnResizable;
/** @type {?} */
DataTableConfigService.prototype.columnVisible;
/** @type {?} */
DataTableConfigService.prototype.showDropdownFilter;
/** @type {?} */
DataTableConfigService.prototype.showFilterClearButton;
/** @type {?} */
DataTableConfigService.prototype.dropdownFilterMenuPosition;
/** @type {?} */
DataTableConfigService.prototype.dropdownFilterSelectMode;
/** @type {?} */
DataTableConfigService.prototype.dropdownFilterSearchable;
/** @type {?} */
DataTableConfigService.prototype.dropdownFilterSearchDebounceTime;
/** @type {?} */
DataTableConfigService.prototype.dropdownFilterSearchDebounce;
/** @type {?} */
DataTableConfigService.prototype.dropdownFilterWrapDisplaySelectLimit;
/** @type {?} */
DataTableConfigService.prototype.dropdownFilterGroupByField;
/** @type {?} */
DataTableConfigService.prototype.dropdownFilterShowSelectedOptionRemoveButton;
/** @type {?} */
DataTableConfigService.prototype.dropdownFilterShowClearSelectionButton;
/** @type {?} */
DataTableConfigService.prototype.dropdownFilterMenuWidth;
/** @type {?} */
DataTableConfigService.prototype.dropdownFilterMenuHeight;
/** @type {?} */
DataTableConfigService.prototype.dropdownFilterMultiSelectOptionMaxWidth;
/** @type {?} */
DataTableConfigService.prototype.dropdownFilterCloseMenuOnSelect;
/** @type {?} */
DataTableConfigService.prototype.dropdownFilterDynamicDimensionCalculation;
/** @type {?} */
DataTableConfigService.prototype.dropdownFilterDynamicWidthRatio;
/** @type {?} */
DataTableConfigService.prototype.dropdownFilterDynamicHeightRatio;
/**
* @type {?}
* @private
*/
DataTableConfigService.prototype.dataTableConfig;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Data table event state service; Manage all internal data tale event streams.
*/
class DataTableEventStateService {
constructor() {
this.allRowSelectChangeStream = new EventEmitter();
this.dataFetchStream = new EventEmitter();
this.headerClickStream = new EventEmitter();
this.rowBindStream = new EventEmitter();
this.rowClickStream = new EventEmitter();
this.rowDoubleClickStream = new EventEmitter();
this.rowSelectChangeStream = new EventEmitter();
this.cellBindStream = new EventEmitter();
this.cellClickStream = new EventEmitter();
this.initStream = new EventEmitter();
this.dataBoundStream = new EventEmitter();
this.columnBind = new EventEmitter();
this.fetchFilterOptionsStream = new ReplaySubject(1);
this.staticDataSourceStream = new ReplaySubject(1);
}
}
DataTableEventStateService.decorators = [
{ type: Injectable }
];
if (false) {
/** @type {?} */
DataTableEventStateService.prototype.allRowSelectChangeStream;
/** @type {?} */
DataTableEventStateService.prototype.dataFetchStream;
/** @type {?} */
DataTableEventStateService.prototype.headerClickStream;
/** @type {?} */
DataTableEventStateService.prototype.rowBindStream;
/** @type {?} */
DataTableEventStateService.prototype.rowClickStream;
/** @type {?} */
DataTableEventStateService.prototype.rowDoubleClickStream;
/** @type {?} */
DataTableEventStateService.prototype.rowSelectChangeStream;
/** @type {?} */
DataTableEventStateService.prototype.cellBindStream;
/** @type {?} */
DataTableEventStateService.prototype.cellClickStream;
/** @type {?} */
DataTableEventStateService.prototype.initStream;
/** @type {?} */
DataTableEventStateService.prototype.dataBoundStream;
/** @type {?} */
DataTableEventStateService.prototype.columnBind;
/** @type {?} */
DataTableEventStateService.prototype.fetchFilterOptionsStream;
/** @type {?} */
DataTableEventStateService.prototype.staticDataSourceStream;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Data table state manager service; Manage current data table state snapshot.
*/
class DataTableDataStateService {
constructor() {
this.allRowSelected = false;
this.selectedRows = [];
this.dataRows = [];
this.dataLoading = true;
this.substituteRows = [];
this.heardReload = false;
this.currentSortPriority = 0;
this.onDynamicRowSpanExtract = (/**
* @return {?}
*/
() => 1);
}
/**
* Get show no data overlay status.
* @return {?} True if no data overlay should be shown.
*/
get showNoDataOverlay() {
return !this.dataRows.length && !this.dataLoading;
}
/**
* Get data table row unique id.
* @param {?} append Target identifier.
* @param {?} index Target index.
* @return {?}
*/
getUniqueId(append, index) {
return `${this.id}-dt-${append}-${index}`;
}
}
DataTableDataStateService.decorators = [
{ type: Injectable }
];
if (false) {
/** @type {?} */
DataTableDataStateService.prototype.id;
/** @type {?} */
DataTableDataStateService.prototype.allRowSelected;
/** @type {?} */
DataTableDataStateService.prototype.selectedRow;
/** @type {?} */
DataTableDataStateService.prototype.selectedRows;
/** @type {?} */
DataTableDataStateService.prototype.dataRows;
/** @type {?} */
DataTableDataStateService.prototype.itemCount;
/** @type {?} */
DataTableDataStateService.prototype.tableWidth;
/** @type {?} */
DataTableDataStateService.prototype.dataLoading;
/** @type {?} */
DataTableDataStateService.prototype.substituteRows;
/** @type {?} */
DataTableDataStateService.prototype.heardReload;
/** @type {?} */
DataTableDataStateService.prototype.currentSortPriority;
/** @type {?} */
DataTableDataStateService.prototype.relativeParentElement;
/** @type {?} */
DataTableDataStateService.prototype.onFilterValueExtract;
/** @type {?} */
DataTableDataStateService.prototype.onDataBind;
/** @type {?} */
DataTableDataStateService.prototype.onDynamicRowSpanExtract;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Data table column component. Data table columns associated data is captured via this component.
*/
class DataTableColumnComponent {
/**
* @param {?} dataTableConfigService
* @param {?} eventStateService
* @param {?} dataStateService
*/
constructor(dataTableConfigService, eventStateService, dataStateService) {
this.dataTableConfigService = dataTableConfigService;
this.eventStateService = eventStateService;
this.dataStateService = dataStateService;
this.currentSortOrder = '';
this.baseSortOrder = '';
/**
* Show filed in column selector popup if true.
*/
this.showInColumnSelector = true; // TODO: move to base conf
// Table column config
this.sortable = dataTableConfigService.sortable;
this.currentSortOrder = dataTableConfigService.sortOrder;
this.filterable = dataTableConfigService.filterable;
this.filterPlaceholder = dataTableConfigService.filterPlaceholder;
this.resizable = dataTableConfigService.columnResizable;
this.visible = dataTableConfigService.columnVisible;
this.showDropdownFilter = dataTableConfigService.showDropdownFilter;
this.showFilterClearButton = dataTableConfigService.showFilterClearButton;
// Dropdown filter config
this.dropdownFilterMenuPosition = dataTableConfigService.dropdownFilterMenuPosition;
this.dropdownFilterSelectMode = dataTableConfigService.dropdownFilterSelectMode;
this.dropdownFilterSearchable = dataTableConfigService.dropdownFilterSearchable;
this.dropdownFilterSearchDebounceTime = dataTableConfigService.dropdownFilterSearchDebounceTime;
this.dropdownFilterSearchDebounce = dataTableConfigService.dropdownFilterSearchDebounce;
this.dropdownFilterWrapDisplaySelectLimit = dataTableConfigService.dropdownFilterWrapDisplaySelectLimit;
this.dropdownFilterGroupByField = dataTableConfigService.dropdownFilterGroupByField;
this.dropdownFilterShowSelectedOptionRemoveButton = dataTableConfigService.dropdownFilterShowSelectedOptionRemoveButton;
this.dropdownFilterShowClearSelectionButton = dataTableConfigService.dropdownFilterShowClearSelectionButton;
this.dropdownFilterMenuWidth = dataTableConfigService.dropdownFilterMenuWidth;
this.dropdownFilterMenuHeight = dataTableConfigService.dropdownFilterMenuHeight;
this.dropdownFilterMultiSelectOptionMaxWidth = dataTableConfigService.dropdownFilterMultiSelectOptionMaxWidth;
this.dropdownFilterCloseMenuOnSelect = dataTableConfigService.dropdownFilterCloseMenuOnSelect;
this.dropdownFilterDynamicDimensionCalculation = dataTableConfigService.dropdownFilterDynamicDimensionCalculation;
this.dropdownFilterDynamicWidthRatio = dataTableConfigService.dropdownFilterDynamicWidthRatio;
this.dropdownFilterDynamicHeightRatio = dataTableConfigService.dropdownFilterDynamicHeightRatio;
}
/**
* Set initial column sort order.
* @param {?} value
* @return {?}
*/
set sortOrder(value) {
this.currentSortOrder = value;
this.baseSortOrder = value;
}
/**
* Get initial column sort order.
* @return {?}
*/
get sortOrder() {
return this.currentSortOrder;
}
/**
* Reset data sort order.
* @return {?}
*/
resetSortOrder() {
this.currentSortOrder = this.baseSortOrder;
}
/**
* Get dynamic cell color.
* @param {?} row Data row object.
* @return {?} Cell color string.
*/
getCellColor(row) {
if (this.onCellColorRender !== undefined) {
return this.onCellColorRender(row, this);
}
}
/**
* Get new sort order upon sort click.
* @return {?} New sort order enum value.
*/
getNewSortOrder() {
/** @type {?} */
let newSortOrder;
switch (this.sortOrder) {
case 'asc':
newSortOrder = 'desc';
break;
case 'desc':
newSortOrder = '';
break;
case '':
newSortOrder = 'asc';
break;
}
return newSortOrder;
}
/**
* Get current sort state icon css class enabled state.
* @return {?} Sort order icon css class collection object.
*/
getSortIconClass() {
return {
'sort-asc': this.sortOrder === 'asc',
'sort-dsc': this.sortOrder === 'desc',
'sort-reset': !this.sortOrder
};
}
/**
* Component destroy lifecycle event handler.
* @return {?}
*/
ngOnDestroy() {
if (this.filterValueExtractorSubscription) {
this.filterValueExtractorSubscription.unsubscribe();
}
}
/**
* Component initialize lifecycle event handler.
* @return {?}
*/
ngOnInit() {
if (!this.cssClass && this.field) {
if (/^[a-zA-Z0-9_]+$/.test(this.field)) {
this.cssClass = 'column-' + this.field;
}
else {
this.cssClass = 'column-' + this.field.replace(/[^a-zA-Z0-9_]/g, '');
}
}
this.eventStateService.columnBind.emit(this);
if (this.dataTableConfigService.multiColumnSortable && this.sortable) {
if (this.sortOrder === '') {
if (this.sortPriority !== undefined) {
throw Error('[sortPriority] should be ignored when multi column sorting is enabled with natural sort order.');
}
}
else {
if (this.sortPriority === undefined) {
throw Error('[sortPriority] is required when multi column sorting is enabled with an explicit sort order.');
}
}
if (this.sortPriority < 1) {
throw Error('[sortPriority] must be greater than 1.');
}
if (this.dataStateService.currentSortPriority < this.sortPriority) {
this.dataStateService.currentSortPriority = this.sortPriority;
}
}
}
}
DataTableColumnComponent.decorators = [
{ type: Component, args: [{
selector: 'ng-data-table-column',
template: ''
}] }
];
/** @nocollapse */
DataTableColumnComponent.ctorParameters = () => [
{ type: DataTableConfigService },
{ type: DataTableEventStateService },
{ type: DataTableDataStateService }
];
DataTableColumnComponent.propDecorators = {
cellTemplate: [{ type: ContentChild, args: ['ngDataTableCell', { static: true },] }],
headerTemplate: [{ type: ContentChild, args: ['ngDataTableHeader', { static: true },] }],
filterTemplate: [{ type: ContentChild, args: ['ngDataTableFilter', { static: true },] }],
dropdownFilterLoadingSpinnerTemplate: [{ type: ContentChild, args: ['ngFilterDropdownLoadingSpinner', { static: true },] }],
dropdownFilterOptionTemplate: [{ type: ContentChild, args: ['ngFilterDropdownOption', { static: true },] }],
dropdownFilterOptionGroupHeaderTemplate: [{ type: ContentChild, args: ['ngFilterDropdownOptionGroupHeader', { static: true },] }],
filterExpression: [{ type: Input }],
filterFieldMapper: [{ type: Input }],
onCellColorRender: [{ type: Input }],
title: [{ type: Input }],
sortable: [{ type: Input }],
sortPriority: [{ type: Input }],
sortOrder: [{ type: Input }],
filterable: [{ type: Input }],
resizable: [{ type: Input }],
field: [{ type: Input }],
filterField: [{ type: Input }],
sortField: [{ type: Input }],
cssClass: [{ type: Input }],
width: [{ type: Input }],
visible: [{ type: Input }],
showInColumnSelector: [{ type: Input }],
filterPlaceholder: [{ type: Input }],
filter: [{ type: Input }],
showFilterClearButton: [{ type: Input }],
resizeMinLimit: [{ type: Input }],
showDropdownFilter: [{ type: Input }],
dropdownFilterMenuPosition: [{ type: Input }],
dropdownFilterSelectMode: [{ type: Input }],
dropdownFilterSearchable: [{ type: Input }],
dropdownFilterSearchDebounceTime: [{ type: Input }],
dropdownFilterSearchDebounce: [{ type: Input }],
dropDownFilterShowOptionSelectCheckbox: [{ type: Input }],
dropdownFilterWrapDisplaySelectLimit: [{ type: Input }],
dropdownFilterGroupByField: [{ type: Input }],
dropdownFilterShowSelectedOptionRemoveButton: [{ type: Input }],
dropdownFilterShowClearSelectionButton: [{ type: Input }],
dropdownFilterMenuWidth: [{ type: Input }],
dropdownFilterMenuHeight: [{ type: Input }],
dropdownFilterMultiSelectOptionMaxWidth: [{ type: Input }],
dropdownFilterCloseMenuOnSelect: [{ type: Input }],
dropdownFilterDynamicDimensionCalculation: [{ type: Input }],
dropdownFilterDynamicWidthRatio: [{ type: Input }],
dropdownFilterDynamicHeightRatio: [{ type: Input }]
};
if (false) {
/**
* @type {?}
* @private
*/
DataTableColumnComponent.prototype.filterValueExtractorSubscription;
/**
* @type {?}
* @private
*/
DataTableColumnComponent.prototype.currentSortOrder;
/**
* @type {?}
* @private
*/
DataTableColumnComponent.prototype.baseSortOrder;
/** @type {?} */
DataTableColumnComponent.prototype.actualWidth;
/** @type {?} */
DataTableColumnComponent.prototype.cellTemplate;
/** @type {?} */
DataTableColumnComponent.prototype.headerTemplate;
/** @type {?} */
DataTableColumnComponent.prototype.filterTemplate;
/** @type {?} */
DataTableColumnComponent.prototype.dropdownFilterLoadingSpinnerTemplate;
/** @type {?} */
DataTableColumnComponent.prototype.dropdownFilterOptionTemplate;
/** @type {?} */
DataTableColumnComponent.prototype.dropdownFilterOptionGroupHeaderTemplate;
/**
* Filter expression event handler callback. Used to apply custom data filter expression logic.
* @type {?}
*/
DataTableColumnComponent.prototype.filterExpression;
/**
* Custom filter field map event handler callback. Used to extract filter field when showDropdownFilter option is true.
* @type {?}
*/
DataTableColumnComponent.prototype.filterFieldMapper;
/**
* Cell color render event handler callback.
* @type {?}
*/
DataTableColumnComponent.prototype.onCellColorRender;
/**
* Column display title.
* @type {?}
*/
DataTableColumnComponent.prototype.title;
/**
* Columns sortable if true. Show sort indicator on column title.
* @type {?}
*/
DataTableColumnComponent.prototype.sortable;
/**
* Multi column sort priority. Lowest number will get the height precedence. Usage of same precedence number in
* multiple columns may lead to unexpected behaviors. This priority number will be displayed in the column header
* when multi column sorting is enabled hence, consider indexing accordingly.
* @type {?}
*/
DataTableColumnComponent.prototype.sortPriority;
/**
* Column filterable if true. Show filter options on filter header row when enabled.
* @type {?}
*/
DataTableColumnComponent.prototype.filterable;
/**
* Column resizeable if true. Show column resize indicator on column right corner.
* @type {?}
*/
DataTableColumnComponent.prototype.resizable;
/**
* Data item mapping field name.
* @type {?}
*/
DataTableColumnComponent.prototype.field;
/**
* Filter field identifier. Fallback to field if not provided.
* @type {?}
*/
DataTableColumnComponent.prototype.filterField;
/**
* Sort field identifier. Fallback to field if not provided.
* @type {?}
*/
DataTableColumnComponent.prototype.sortField;
/**
* Column title CSS class names. Use space delimiter to separate class names.
* @type {?}
*/
DataTableColumnComponent.prototype.cssClass;
/**
* Static column width in pixels or percentage.
* @type {?}
*/
DataTableColumnComponent.prototype.width;
/**
* Render column if true. Else include in column selector but not rendered.
* @type {?}
*/
DataTableColumnComponent.prototype.visible;
/**
* Show filed in column selector popup if true.
* @type {?}
*/
DataTableColumnComponent.prototype.showInColumnSelector;
/**
* Filter placeholder value. Placeholder text to show on filter text box. Applicable only for none dropdown filter mode.
* @type {?}
*/
DataTableColumnComponent.prototype.filterPlaceholder;
/**
* Applied filter value on initialize.
* @type {?}
*/
DataTableColumnComponent.prototype.filter;
/**
* Show filter clear button if true. Applicable only for none dropdown filter mode.
* @type {?}
*/
DataTableColumnComponent.prototype.showFilterClearButton;
/**
* Resize minimum limit. Column cannot be resized to fit less than the number of pixels specified here.
* @type {?}
*/
DataTableColumnComponent.prototype.resizeMinLimit;
/**
* Show dropdown filter if true. Filter data using dropdown filter.
* @type {?}
*/
DataTableColumnComponent.prototype.showDropdownFilter;
/**
* Dropdown filter menu position. Placement of filter popup menu.
* @type {?}
*/
DataTableColumnComponent.prototype.dropdownFilterMenuPosition;
/**
* Dropdown select mode. Filter option select mode.
* @type {?}
*/
DataTableColumnComponent.prototype.dropdownFilterSelectMode;
/**
* Dropdown filter searchable if true. Display search box within filter option menu.
* @type {?}
*/
DataTableColumnComponent.prototype.dropdownFilterSearchable;
/**
* Dropdown filter search debounce time in milliseconds. Applicable only when dropdownFilterSearchDebounce is true.
* @type {?}
*/
DataTableColumnComponent.prototype.dropdownFilterSearchDebounceTime;
/**
* Enable dropdown filter data search debounce with provided dropdownFilterSearchDebounceTime if true.
* @type {?}
*/
DataTableColumnComponent.prototype.dropdownFilterSearchDebounce;
/**
* Dropdown filter show option select checkbox.
* @type {?}
*/
DataTableColumnComponent.prototype.dropDownFilterShowOptionSelectCheckbox;
/**
* Dropdown filter selected items display limit.
* @type {?}
*/
DataTableColumnComponent.prototype.dropdownFilterWrapDisplaySelectLimit;
/**
* Dropdown filter group by field name in item schema.
* @type {?}
*/
DataTableColumnComponent.prototype.dropdownFilterGroupByField;
/**
* Dropdown filter show selected option remove button if true.
* @type {?}
*/
DataTableColumnComponent.prototype.dropdownFilterShowSelectedOptionRemoveButton;
/**
* Dropdown filter show all select options clear button if true.
* @type {?}
*/
DataTableColumnComponent.prototype.dropdownFilterShowClearSelectionButton;
/**
* Dropdown filter menu width in pixels.
* @type {?}
*/
DataTableColumnComponent.prototype.dropdownFilterMenuWidth;
/**
* Dropdown filter menu height in pixels.
* @type {?}
*/
DataTableColumnComponent.prototype.dropdownFilterMenuHeight;
/**
* Dropdown filter multi select option max width.
* @type {?}
*/
DataTableColumnComponent.prototype.dropdownFilterMultiSelectOptionMaxWidth;
/**
* Dropdown filter close menu on select if true.
* @type {?}
*/
DataTableColumnComponent.prototype.dropdownFilterCloseMenuOnSelect;
/**
* Dynamically calculate Dropdown filter menu dimensions relative to column width; dropdownFilterMenuWidth and
* dropdownFilterMenuHeight configuration are ignored when true.
* @type {?}
*/
DataTableColumnComponent.prototype.dropdownFilterDynamicDimensionCalculation;
/**
* Dynamic dropdown view width ratio. Used for dynamic dimension calculation.
* @type {?}
*/
DataTableColumnComponent.prototype.dropdownFilterDynamicWidthRatio;
/**
* Dynamic dropdown view height ratio. Used for dynamic dimension calculation.
* @type {?}
*/
DataTableColumnComponent.prototype.dropdownFilterDynamicHeightRatio;
/**
* @type {?}
* @private
*/
DataTableColumnComponent.prototype.dataTableConfigService;
/**
* @type {?}
* @private
*/
DataTableColumnComponent.prototype.eventStateService;
/**
* @type {?}
* @private
*/
DataTableColumnComponent.prototype.dataStateService;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {number} */
const DataFetchMode = {
/**
* Re-fetch data from source and load data after resetting table state.
*/
HARD_RELOAD: 0,
/**
* Re-fetch data from source and load data without resetting table state.
*/
SOFT_RELOAD: 1,
/**
* Load data without changing table state state.
*/
SOFT_LOAD: 2,
};
DataFetchMode[DataFetchMode.HARD_RELOAD] = 'HARD_RELOAD';
DataFetchMode[DataFetchMode.SOFT_RELOAD] = 'SOFT_RELOAD';
DataFetchMode[DataFetchMode.SOFT_LOAD] = 'SOFT_LOAD';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Data table column filter header component. Apply columns associated data filtering.
*/
class DataTableColumnFilterHeaderComponent {
/**
* @param {?} config
* @param {?} eventStateService
*/
constructor(config, eventStateService) {
this.config = config;
this.eventStateService = eventStateService;
this.columnFilterStream = new Subject();
this.customFilterStream = new EventEmitter();
}
/**
* Component initialize lifecycle event handler.
* @return {?}
*/
ngOnInit() {
this.initCustomFilterEvent();
this.initDebounceDefaultFilterEvent();
}
/**
* Component destroy lifecycle event handler.
* @return {?}
*/
ngOnDestroy() {
if (this.customFilterSubscription) {
this.customFilterSubscription.unsubscribe();
}
if (this.columnFilterSubscription) {
this.columnFilterSubscription.unsubscribe();
}
}
/**
* Initialize custom filter event.
* @private
* @return {?}
*/
initCustomFilterEvent() {
this.customFilterSubscription = this.customFilterStream.subscribe((/**
* @param {?} filterEventArgs
* @return {?}
*/
(filterEventArgs) => {
filterEventArgs.column.filter = filterEventArgs.filter;
this.onFilter();
}));
}
/**
* Initialize debounce default filtering logic.
* @private
* @return {?}
*/
initDebounceDefaultFilterEvent() {
this.columnFilterSubscription = this.columnFilterStream.pipe(debounceTime(this.config.filterDebounceTime)).subscribe((/**
* @return {?}
*/
() => {
this.eventStateService.dataFetchStream.next(DataFetchMode.SOFT_LOAD);
}));
}
/**
* Filter event handler.
* @return {?}
*/
onFilter() {
if (this.config.filterDebounce) {
this.columnFilterStream.next();
}
else {
this.eventStateService.dataFetchStream.next(DataFetchMode.SOFT_LOAD);
}
}
}
DataTableColumnFilterHeaderComponent.decorators = [
{ type: Component, args: [{
exportAs: 'ngDataTableColumnFilterHeader',
// tslint:disable-next-line
selector: '[ngDataTableColumnFilterHeader]',
template: "<th *ngIf=\"config.expandableRows\" class=\"ng-data-table-expand-column-header\"></th>\n<th *ngIf=\"config.showIndexColumn\" class=\"ng-data-table-index-column-header\"></th>\n<th *ngIf=\"config.showRowSelectCheckboxColumn\" class=\"ng-data-table-select-column-header\"></th>\n<ng-container *ngFor=\"let column of columns; index as i;\">\n <th *ngIf=\"column.visible\">\n <ng-data-table-column-filter-template [column]=\"column\"\n [customFilterStream]=\"customFilterStream\"\n [index]=\"i\"\n (filter)=\"onFilter()\">\n </ng-data-table-column-filter-template>\n </th>\n</ng-container>\n"
}] }
];
/** @nocollapse */
DataTableColumnFilterHeaderComponent.ctorParameters = () => [
{ type: DataTableConfigService },
{ type: DataTableEventStateService }
];
DataTableColumnFilterHeaderComponent.propDecorators = {
columns: [{ type: Input }]
};
if (false) {
/**
* @type {?}
* @private
*/
DataTableColumnFilterHeaderComponent.prototype.columnFilterStream;
/**
* @type {?}
* @private
*/
DataTableColumnFilterHeaderComponent.prototype.customFilterSubscription;
/**
* @type {?}
* @private
*/
DataTableColumnFilterHeaderComponent.prototype.columnFilterSubscription;
/** @type {?} */
DataTableColumnFilterHeaderComponent.prototype.customFilterStream;
/** @type {?} */
DataTableColumnFilterHeaderComponent.prototype.columns;
/** @type {?} */
DataTableColumnFilterHeaderComponent.prototype.config;
/**
* @type {?}
* @private
*/
DataTableColumnFilterHeaderComponent.prototype.eventStateService;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Scroll position stream service; Manage common scroll position observable.
*/
class DataTableScrollPositionService {
constructor() {
this.scrollPositionStream = new Subject();
}
}
DataTableScrollPositionService.decorators = [
{ type: Injectable }
];
if (false) {
/** @type {?} */
DataTableScrollPositionService.prototype.scrollPositionStream;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Column filter template component. Render column filter template via this component.
*/
class DataTableColumnFilterTemplateComponent {
/**
* @param {?} config
* @param {?} dataStateService
* @param {?} eventStateService
* @param {?} scrollPositionService
*/
constructor(config, dataStateService, eventStateService, scrollPositionService) {
this.config = config;
this.dataStateService = dataStateService;
this.eventStateService = eventStateService;
this.scrollPositionService = scrollPositionService;
this.filter = new EventEmitter();
this.filterDataStream = new Subject();
}
/**
* Component initialize lifecycle event.
* @return {?}
*/
ngOnInit() {
if (this.column.showDropdownFilter) {
this.scrollPositionStreamSubscription = this.scrollPositionService.scrollPositionStream
.subscribe((/**
* @param {?} pos
* @return {?}
*/
(pos) => {
if (pos.isHorizontal) {
this.filterDropdown.close();
}
}));
if (this.dataStateService.onFilterValueExtract) {
this.fetchFilterOptionsStreamSubscription = this.eventStateService.fetchFilterOptionsStream
.pipe(switchMap((/**
* @return {?}
*/
() => {
return this.dataStateService.onFilterValueExtract(this.column);
})))
.subscribe((/**
* @param {?} options
* @return {?}
*/
(options) => {
setTimeout((/**
* @return {?}
*/
() => this.filterDataStream.next(options)), 0); // TODO: remove the timeout
}));
}
}
}
/**
* Component destroy lifecycle event.
* @return {?}
*/
ngOnDestroy() {
if (this.fetchFilterOptionsStreamSubscription) {
this.fetchFilterOptionsStreamSubscription.unsubscribe();
}
if (this.scrollPositionStreamSubscription) {
this.scrollPositionStreamSubscription.unsubscribe();
}
this.filterDataStream.complete();
}
/**
* @param {?} filterDropdown
* @return {?}
*/
onFilterDropdownInit(filterDropdown) {
this.filterDropdown = filterDropdown;
}
/**
* Clear current column filter value.
* @return {?}
*/
clearFilter() {
this.column.filter = '';
this.filter.emit();
}
}
DataTableColumnFilterTemplateComponent.decorators = [
{ type: Component, args: [{
selector: 'ng-data-table-column-filter-template',
template: "<ng-container *ngIf=\"column.filterable\">\n <ng-container\n *ngIf=\"column.filterTemplate\"\n [ngTemplateOutlet]=\"column.filterTemplate\"\n [ngTemplateOutletContext]=\"{ column: column, filter: customFilterStream }\"\n >\n </ng-container>\n <ng-container *ngIf=\"!column.filterTemplate\">\n <div class=\"ng-data-table-header-input-box\" *ngIf=\"!column.showDropdownFilter\">\n <input\n type=\"text\"\n class=\"ng-data-table-header-input\"\n [(ngModel)]=\"column.filter\"\n [class.ng-data-table-clear-filter]=\"column.showFilterClearButton\"\n (keyup)=\"filter.emit()\"\n [placeholder]=\"column.filterPlaceholder\"\n />\n <span class=\"ng-data-table-input-group-btn\">\n <button\n *ngIf=\"column.showFilterClearButton\"\n [hidden]=\"!column.filter\"\n class=\"ng-data-table-delete-button\"\n type=\"button\"\n (click)=\"clearFilter()\"\n ></button>\n </span>\n </div>\n <ng-dropdown\n *ngIf=\"column.showDropdownFilter\"\n [id]=\"dataStateService.getUniqueId('col', index)\"\n [relativeParentElement]=\"dataStateService.relativeParentElement\"\n [dataSource]=\"filterDataStream\"\n [menuPosition]=\"column.dropdownFilterMenuPosition\"\n [filterable]=\"column.dropdownFilterSearchable\"\n [filterDebounceTime]=\"column.dropdownFilterSearchDebounceTime\"\n [filterDebounce]=\"column.dropdownFilterSearchDebounce\"\n [selectMode]=\"column.dropdownFilterSelectMode\"\n [showSelectedOptionRemoveButton]=\"column.dropdownFilterShowSelectedOptionRemoveButton\"\n [showClearSelectionButton]=\"column.dropdownFilterShowClearSelectionButton\"\n [wrapDisplaySelectLimit]=\"column.dropdownFilterWrapDisplaySelectLimit\"\n [groupByField]=\"column.dropdownFilterGroupByField\"\n [showOptionSelectCheckbox]=\"column.dropDownFilterShowOptionSelectCheckbox\"\n [menuHeight]=\"column.dropdownFilterMenuHeight\"\n [menuWidth]=\"column.dropdownFilterMenuWidth\"\n [multiSelectOptionMaxWidth]=\"column.dropdownFilterMultiSelectOptionMaxWidth\"\n [closeMenuOnSelect]=\"column.dropdownFilterCloseMenuOnSelect\"\n [dynamicDimensionCalculation]=\"column.dropdownFilterDynamicDimensionCalculation\"\n [dynamicWidthRatio]=\"column.dropdownFilterDynamicWidthRatio\"\n [dynamicHeightRatio]=\"column.dropdownFilterDynamicHeightRatio\"\n [loadingSpinnerTemplateRef]=\"column.dropdownFilterLoadingSpinnerTemplate\"\n [optionTemplateRef]=\"column.dropdownFilterOptionTemplate\"\n [optionGroupHeaderTemplateRef]=\"column.dropdownFilterOptionGroupHeaderTemplate\"\n [translations]=\"config.translations.dropdownFilter\"\n [(ngModel)]=\"column.filter\"\n (selectChange)=\"filter.emit()\"\n (init)=\"onFilterDropdownInit($event)\"\n >\n </ng-dropdown>\n </ng-container>\n</ng-container>\n"
}] }
];
/** @nocollapse */
DataTableColumnFilterTemplateComponent.ctorParameters = () => [
{ type: DataTableConfigService },
{ type: DataTableDataStateService },
{ type: DataTableEventStateService },
{ type: DataTableScrollPositionService }
];
DataTableColumnFilterTemplateComponent.propDecorators = {
column: [{ type: Input }],
customFilterStream: [{ type: Input }],
index: [{ type: Input }],
filter: [{ type: Output }]
};
if (false) {
/** @type {?} */
DataTableColumnFilterTemplateComponent.prototype.column;
/** @type {?} */
DataTableColumnFilterTemplateComponent.prototype.customFilterStream;
/** @type {?} */
DataTableColumnFilterTemplateComponent.prototype.index;
/** @type {?} */
DataTableColumnFilterTemplateComponent.prototype.filter;
/** @type {?} */
DataTableColumnFilterTemplateComponent.prototype.filterDataStream;
/**
* @type {?}
* @private
*/
DataTableColumnFilterTemplateComponent.prototype.fetchFilterOptionsStreamSubscription;
/**
* @type {?}
* @private
*/
DataTableColumnFilterTemplateComponent.prototype.scrollPositionStreamSubscription;
/**
* @type {?}
* @private
*/
DataTableColumnFilterTemplateComponent.prototype.filterDropdown;
/** @type {?} */
DataTableColumnFilterTemplateComponent.prototype.config;
/** @type {?} */
DataTableColumnFilterTemplateComponent.prototype.dataStateService;
/**
* @type {?}
* @private
*/
DataTableColumnFilterTemplateComponent.prototype.eventStateService;
/**
* @type {?}
* @private
*/
DataTableColumnFilterTemplateComponent.prototype.scrollPositionService;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const splitPathExpression = /[,[\].]+?/;
/**
* @param {?} obj
* @param {?} path
* @return {?}
*/
function get(obj, path) {
if (obj === null || obj === undefined) {
return obj;
}
return String.prototype.split.call(path, splitPathExpression)
.filter(Boolean)
.reduce((/**
* @param {?} res
* @param {?} key
* @return {?}
*/
(res, key) => {
if (res !== null && typeof res === 'object') {
return res[key];
}
return undefined;
}), obj);
}
/**
* @param {?} collection
* @param {?} fields
* @param {?} orders
* @return {?}
*/
function orderBy(collection, fields, orders) {
console.log(fields);
return collection.concat().sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => {
for (let i = 0; i < fields.length; i++) {
/** @type {?} */
const field = fields[i];
/** @type {?} */
const order = orders[i];
if (a[field] > b[field]) {
return order === 'asc' ? 1 : -1;
}
if (a[field] < b[field]) {
return order === 'asc' ? -1 : 1;
}
}
return 0;
}));
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Element initialize directive; Notify on target element initialize.
*/
class InitDirective {
constructor() {
this.ngInit = new EventEmitter();
}
/**
* On directive initialize.
* @return {?}
*/
ngOnInit() {
this.ngInit.emit();
}
}
InitDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngInit]'
},] }
];
InitDirective.propDecorators = {
ngInit: [{ type: Output }]
};
if (false) {
/** @type {?} */
InitDirective.prototype.ngInit;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Element focus directive; Set focus to target element on initialize.
*/
class FocusDirective {
/**
* @param {?} el
*/
constructor(el) {
this.el = el;
}
/**
* On directive initialize.
* @return {?}
*/
ngOnInit() {
this.el.nativeElement.focus();
}
}
FocusDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngFocus]'
},] }
];
/** @nocollapse */
FocusDirective.ctorParameters = () => [
{ type: ElementRef }
];
if (false) {
/**
* @type {?}
* @private
*/
FocusDirective.prototype.el;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Pixel converter pipe.
* Append 'px' if value is number type, else return the same.
*/
class PixelConverterPipe {
/**
* Pipe transform implementation.
* @param {?} value Source value.
* @return {?} Converted pixel value.
*/
transform(value) {
if (value === undefined) {
return;
}
if (typeof value === 'string') {
return value;
}
if (typeof value === 'number') {
return `${value}px`;
}
}
}
PixelConverterPipe.decorators = [
{ type: Pipe, args: [{
name: 'ngPx'
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Utility config service holds all the global configurations of utility which can be overridden while
* importing the module.
*/
class UtilityConfigService {
}
UtilityConfigService.decorators = [
{ type: Injectable }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Element drag and drop service.
*/
class DragAndDropService {
/**
* Register drag and drop event.
* @param {?} event Mouse event reference.
* @param {?} __1
* @