@ng-dominus/dm-table
Version:
Dominus angular material table extension
522 lines (515 loc) • 37.4 kB
JavaScript
import { BehaviorSubject, merge, throwError, catchError, Subject } from 'rxjs';
import * as i3 from '@angular/material/table';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { FormGroup } from '@angular/forms';
import * as i0 from '@angular/core';
import { InjectionToken, Pipe, Injector, booleanAttribute, Component, ChangeDetectionStrategy, Optional, Inject, Input, Output, ViewChild } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i6 from '@angular/material/paginator';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import * as i7 from '@angular/material/sort';
import { MatSort, MatSortModule } from '@angular/material/sort';
import * as i8 from '@angular/material/menu';
import { MatMenuModule } from '@angular/material/menu';
import * as i4 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i5 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i9 from '@angular/material/checkbox';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import * as i10 from '@angular/material/progress-bar';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import * as i1 from '@angular/common/http';
var DmTableIntl;
(function (DmTableIntl) {
DmTableIntl[DmTableIntl["NO_DATA"] = 0] = "NO_DATA";
DmTableIntl[DmTableIntl["LOADING"] = 1] = "LOADING";
})(DmTableIntl || (DmTableIntl = {}));
const DM_TABLE_INTL = new InjectionToken('Dominus table i18n strings');
const DM_TABLE_RENDER_COMPONENT_DATA = new InjectionToken('DM_TABLE_RENDER_COMPONENT_DATA');
class DmTableDataSourceAdapter extends MatTableDataSource {
constructor(requestMethod, http, dataSrc, sort, onBeforeRequest, paginator, mapRowsFn, filters) {
super();
this.requestMethod = requestMethod;
this.http = http;
this.dataSrc = dataSrc;
this.onBeforeRequest = onBeforeRequest;
this.mapRowsFn = mapRowsFn;
this.filters = filters;
this.totalResults = 0;
this.loadingData$ = new BehaviorSubject(false);
this.sortRef = sort;
this.paginatorRef = paginator;
if (typeof dataSrc !== 'string') {
this.sort = sort;
if (paginator) {
this.paginator = paginator;
}
}
this.eventsSub = (paginator?.page ? merge(sort.sortChange, paginator.page) : sort.sortChange).subscribe((event) => this.refresh(event.pageIndex === undefined));
}
connect() {
this.refresh(false);
return super.connect();
}
getTotalResults() {
return this.totalResults;
}
refresh(resetPage = true) {
if (this.loadingData$.getValue()) {
return;
}
const paginator = this.paginatorRef;
const dataSrc = this.dataSrc;
if (resetPage && paginator) {
paginator.pageIndex = 0;
}
if (typeof dataSrc === 'string') {
return this.handleServerSideDataSrc(dataSrc);
}
const mapRowsFn = this.mapRowsFn;
this.data = mapRowsFn ? mapRowsFn(dataSrc) : dataSrc;
this.totalResults = this.data.length;
}
onDataLoading() {
return this.loadingData$.asObservable();
}
handleServerSideDataSrc(dataSource) {
this.loadingData$.next(true);
const requestMethod = this.requestMethod.toUpperCase();
const requestOptions = {
responseType: 'json',
observe: "body"
};
const filters = this.filters;
let requestData;
if (filters instanceof FormGroup) {
requestData = Object.assign({}, filters.value || {});
}
else {
requestData = filters || {};
}
requestData['dm_sort_col'] = this.sortRef?.active || '';
requestData['dm_sort_dir'] = this.sortRef?.direction || '';
requestData['dm_page_index'] = this.paginatorRef?.pageIndex || 0;
requestData['dm_page_len'] = this.paginatorRef?.pageSize || 0;
if (requestMethod === 'GET') {
requestOptions.params = requestData;
}
else {
requestOptions.body = requestData;
}
this.onBeforeRequest(requestOptions).then(options => {
this.http.request(requestMethod, dataSource, options)
.pipe(catchError((error) => {
this.data = [];
this.loadingData$.next(false);
return throwError(() => new Error(`Table data request from ${dataSource} failed! Error: ${error.message || 'Unknown'}`));
}))
.subscribe((response) => {
if (response && response.rows) {
if (this.paginatorRef) {
this.paginatorRef.length = response.totalResults;
}
this.totalResults = response.totalResults;
this.data = this.mapRowsFn ? this.mapRowsFn(response.rows) : response.rows;
}
this.loadingData$.next(false);
});
});
}
disconnect() {
this.eventsSub.unsubscribe();
this.loadingData$.complete();
super.disconnect();
}
}
class DmTableRenderPipe {
constructor(injector) {
this.injector = injector;
}
transform(value, pipeToken, args) {
return this.injector.get(pipeToken).transform(value, ...args);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DmTableRenderPipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: DmTableRenderPipe, isStandalone: true, name: "dmTableRender" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DmTableRenderPipe, decorators: [{
type: Pipe,
args: [{
name: 'dmTableRender',
standalone: true
}]
}], ctorParameters: () => [{ type: i0.Injector }] });
class DmTableComponent {
constructor(changeDetector, http, injector, intl) {
this.changeDetector = changeDetector;
this.http = http;
this.injector = injector;
/**
* The request method used when calling the server side data source(GET, POST, etc.).
*/
this.dataSourceRequestMethod = 'GET';
/**
* Adds a contextual menu on each row in a special column added at the end of the table.
* Use the [rowContextMenuDisplayCondition] @Input to control when this menu is displayed.
*/
this.rowContextMenu = null;
/**
* Function which determines when the contextual menu is displayed
*/
this.rowContextMenuIsVisibleFn = () => true;
/**
* Tracking function that will be used to check the differences in data changes.
* Used similarly to ngFor trackBy function.
* Optimize row operations by identifying a row based on its data relative to the function to know if a row should be added/removed/moved.
* Accepts a function that takes two parameters, index and item.
*/
this.trackBy = (index, item) => item;
/**
* Weather a highlight effect will be rendered when the user hovers the cursor over a row.
*/
this.rowHoverEffectEnabled = false;
/**
* Highlights even rows
*/
this.stripedRows = false;
/**
* Adds a border to the table
*/
this.outline = true;
/**
* Whether to display a loading animation when loading data from a server.
* The animation can also manually be triggered.
*/
this.loadingAnimationEnabled = true;
/**
* Whether pagination will be enabled.
*/
this.paginate = true;
/**
* Shows paginator first/last buttons
*/
this.showFirstLastButtons = true;
/**
* Hides paginator page size info
*/
this.hidePageSize = false;
/**
* The default page size.
*/
this.pageSize = 10;
/**
* The page sizes available to the user.
*/
this.pageSizeOptions = [5, 10, 20, 30, 40, 50];
/**
* The position of the sorting arrow
*/
this.sortingArrowPosition = 'after';
/**
* Sets the header row as sticky.
* This only works if you set a max height for the table using the [maxHeight] input.
*/
this.freezeHeaderRow = true;
/**
* Event triggered when a row has been clicked.
* The event contains the row data.
*/
this.rowClicked$ = new Subject();
this.displayedColumns = [];
this._isLoading = false;
this.masterCheckboxChecked = false;
this.masterCheckboxIndeterminate = false;
this.DominusTableIntl = DmTableIntl;
this.containerClasses = {};
this.intl = Object.assign({
[DmTableIntl.NO_DATA]: 'No data',
[DmTableIntl.LOADING]: 'Loading...'
}, intl || {});
}
ngOnInit() {
this.prepareDisplayedColumns();
this.updateContainerClasses();
}
ngAfterViewInit() {
this.setDataSrcAdapter(true);
}
ngOnChanges(changes) {
if ((changes['dataSource'] && !changes['dataSource'].firstChange)
|| (changes['filters'] && !changes['filters'].firstChange)) {
this.setDataSrcAdapter();
}
const headerNeedsUpdate = (changes['columns'] && !changes['columns'].firstChange) || (changes['rowSelectionModel'] && !changes['rowSelectionModel'].firstChange);
const updateContainerClasses = (changes['outline'] && !changes['outline'].firstChange) || (changes['stripedRows'] && !changes['stripedRows'].firstChange);
if (headerNeedsUpdate
|| updateContainerClasses
|| (changes['rowHoverEffectEnabled'] && !changes['rowHoverEffectEnabled'].firstChange)
|| (changes['pageSizeOptions'] && !changes['pageSizeOptions'].firstChange)
|| (changes['paginate'] && !changes['paginate'].firstChange)
|| (changes['loadingDataOverlay'] && !changes['loadingDataOverlay'].firstChange)
|| (changes['sortingArrowPosition'] && !changes['sortingArrowPosition'].firstChange)
|| (changes['rowContextMenu'] && !changes['rowContextMenu'].firstChange)
|| (changes['intl'] && !changes['intl'].firstChange)
|| (changes['maxHeight'] && !changes['maxHeight'].firstChange)) {
headerNeedsUpdate && this.prepareDisplayedColumns();
updateContainerClasses && this.updateContainerClasses();
this.changeDetector.markForCheck();
}
}
/**
* Refreshes the table data
* @param resetPage whether the page will be reset as well
*/
refresh(resetPage = true) {
this.dataSourceAdapter.refresh(resetPage);
}
/**
* Hides/shows or toggles the specified table column's visibility
* @param columnId
* @param visible If not specified, the visibility will be toggled
*/
changeColumnVisibility(columnId, visible) {
const column = this.getColumn(columnId);
if (!column) {
return;
}
column.visible = typeof visible === 'undefined' ? !column.visible : visible;
this.prepareDisplayedColumns();
this.changeDetector.markForCheck();
}
/**
* Changes the visibility of multiple columns
* @param columns The columns and their visibility. Example: [{columnId: 'myColumn1', visible: true}, {columnId: 'myOtherColumn', visible: false}] -- sets myColumn1 to visible and hides myOtherColumn
*/
changeColumnsVisibility(columns) {
for (let i = columns.length; i--;) {
const colVisibilityConfig = columns[i];
const column = this.getColumn(colVisibilityConfig.columnId);
if (!column) {
continue;
}
column.visible = typeof colVisibilityConfig.visible !== "undefined" ? colVisibilityConfig.visible : !column.visible;
}
this.prepareDisplayedColumns();
this.changeDetector.markForCheck();
}
/**
* Returns the table current loading state
*/
get isLoading() {
return this._isLoading;
}
/**
* Activates or deactivates the table's loading state
* @param state
*/
set isLoading(state) {
if (this._isLoading !== state) {
this._isLoading = state;
this.changeDetector.detectChanges();
}
}
identifyColumn(index, column) {
return column.id;
}
toggleAllRowsSelection($event) {
const rowSelectionModel = this.rowSelectionModel;
if (!rowSelectionModel) {
return;
}
const rows = this.dataSourceAdapter.data;
if ($event.checked) {
for (let i = rows.length; i--;) {
rowSelectionModel.select(rows[i]);
}
this.masterCheckboxChecked = true;
this.masterCheckboxIndeterminate = rowSelectionModel.selected.length !== this.dataSourceAdapter.getTotalResults();
}
else {
rowSelectionModel.clear();
this.masterCheckboxChecked = false;
this.masterCheckboxIndeterminate = false;
}
}
toggleRowSelection(row) {
const rowSelectionModel = this.rowSelectionModel;
if (!rowSelectionModel) {
return;
}
rowSelectionModel.toggle(row);
if (rowSelectionModel.isEmpty()) {
this.masterCheckboxChecked = false;
this.masterCheckboxIndeterminate = false;
}
else {
this.masterCheckboxChecked = true;
this.masterCheckboxIndeterminate = rowSelectionModel.selected.length !== this.dataSourceAdapter.getTotalResults();
}
}
createRenderComponentInjector(column, columnData) {
return Injector.create({
providers: [{
provide: DM_TABLE_RENDER_COMPONENT_DATA,
useValue: {
columnId: column.id,
columnData,
arguments: column.renderUsing?.arguments
}
}],
parent: this.injector
});
}
updateContainerClasses() {
this.containerClasses = {
'outline': this.outline,
'striped': this.stripedRows
};
}
getColumn(columnId) {
const columns = this.columns;
let foundColumn;
for (let i = columns.length; i--;) {
const col = columns[i];
if (col.id === columnId) {
foundColumn = col;
break;
}
}
return foundColumn;
}
prepareDisplayedColumns() {
const columns = this.columns;
const colLen = columns.length;
const _displayedColumns = [];
if (this.rowSelectionModel) {
_displayedColumns.push('dm_table_row_selection_column');
}
for (let colIndex = 0; colIndex < colLen; ++colIndex) {
const column = columns[colIndex];
if (column.visible === undefined || column.visible) {
_displayedColumns.push(column.id);
}
}
if (this.rowContextMenu) {
_displayedColumns.push('dm_table_row_contextual_menu_column');
}
this.displayedColumns = _displayedColumns;
}
setDataSrcAdapter(initialSet = false) {
if (!initialSet) {
this.loadingDataSub?.unsubscribe();
if (this.sort.active !== '') {
this.sort.active = '';
this.sort.direction = '';
this.sort._stateChanges.next();
}
if (this.paginator) {
this.paginator.length = 0;
this.paginator.pageIndex = 0;
}
}
const dataSourceAdapter = new DmTableDataSourceAdapter(this.dataSourceRequestMethod, this.http, this.dataSource, this.sort, this.onBeforeServerRequestFn || ((requestOptions) => new Promise((resolve) => { resolve(requestOptions); })), this.paginator, this.mapRowsFn, this.filters);
if (this.loadingAnimationEnabled) {
this.loadingDataSub = dataSourceAdapter.onDataLoading().subscribe(loading => this.isLoading = loading);
}
this.dataSourceAdapter = dataSourceAdapter;
}
ngOnDestroy() {
this.rowClicked$.complete();
this.loadingDataSub?.unsubscribe();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DmTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.HttpClient }, { token: i0.Injector }, { token: DM_TABLE_INTL, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.4", type: DmTableComponent, isStandalone: true, selector: "dm-table", inputs: { columns: "columns", dataSource: "dataSource", intl: "intl", dataSourceRequestMethod: "dataSourceRequestMethod", filters: "filters", onBeforeServerRequestFn: "onBeforeServerRequestFn", rowContextMenu: "rowContextMenu", rowContextMenuIsVisibleFn: "rowContextMenuIsVisibleFn", rowSelectionModel: "rowSelectionModel", mapRowsFn: "mapRowsFn", trackBy: "trackBy", rowHoverEffectEnabled: "rowHoverEffectEnabled", stripedRows: "stripedRows", outline: "outline", loadingAnimationEnabled: "loadingAnimationEnabled", paginate: "paginate", showFirstLastButtons: "showFirstLastButtons", hidePageSize: "hidePageSize", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", sortingArrowPosition: "sortingArrowPosition", freezeHeaderRow: "freezeHeaderRow", maxHeight: "maxHeight", isLoading: ["isLoading", "isLoading", booleanAttribute] }, outputs: { rowClicked$: "rowClicked" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dm-table-container\" [ngClass]=\"containerClasses\">\n <div *ngIf=\"_isLoading\" class=\"loading-overlay\">\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n </div>\n <div class=\"dm-table-overflow\" [ngStyle]=\"{'max-height': maxHeight}\">\n <table mat-table matSort [dataSource]=\"dataSourceAdapter\" class=\"dm-table\" [trackBy]=\"trackBy\">\n <!-- ROW SELECTION COLUMN -->\n <ng-container *ngIf=\"rowSelectionModel\" matColumnDef=\"dm_table_row_selection_column\">\n <th mat-header-cell *matHeaderCellDef>\n <mat-checkbox *ngIf=\"rowSelectionModel.isMultipleSelection()\" color=\"primary\"\n [disabled]=\"_isLoading\"\n (change)=\"toggleAllRowsSelection($event)\"\n [checked]=\"masterCheckboxChecked\"\n [indeterminate]=\"masterCheckboxIndeterminate\">\n </mat-checkbox>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <mat-checkbox color=\"primary\"\n [disabled]=\"_isLoading\"\n (change)=\"toggleRowSelection(row)\"\n [checked]=\"rowSelectionModel.isSelected(row)\">\n </mat-checkbox>\n </td>\n </ng-container>\n\n <!-- NORMAL DATA COLUMN -->\n <ng-container *ngFor=\"let column of columns; trackBy: identifyColumn\" [matColumnDef]=\"column.id\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]=\"column.classes\" [arrowPosition]=\"sortingArrowPosition\" [disabled]=\"_isLoading || column.sortable === false\">\n {{ column.name }}\n </th>\n <td mat-cell *matCellDef=\"let row\" [ngClass]=\"column.classes\">\n <ng-container\n [ngTemplateOutlet]=\"!column.renderUsing ? renderDefault : (column.renderUsing.component ? renderComponent : renderPipe)\"\n [ngTemplateOutletContext]=\"{column, row}\">\n </ng-container>\n </td>\n </ng-container>\n\n <!-- ROW CONTEXTUAL MENU COLUMN -->\n <ng-container *ngIf=\"rowContextMenu\" matColumnDef=\"dm_table_row_contextual_menu_column\">\n <th mat-header-cell *matHeaderCellDef class=\"dm-table-row-contextual-menu-column\"> </th>\n <td mat-cell *matCellDef=\"let row\">\n <button *ngIf=\"rowContextMenuIsVisibleFn(row)\" [disabled]=\"_isLoading\" (click)=\"$event.stopPropagation()\"\n mat-icon-button [matMenuTriggerFor]=\"rowContextMenu\" [matMenuTriggerData]=\"{row: row}\">\n <mat-icon>menu</mat-icon>\n </button>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: freezeHeaderRow\" class=\"dm-table-header-row\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n class=\"dm-table-row\" [ngClass]=\"{'dm-table-row-hover-effect': rowHoverEffectEnabled, 'dm-table-row-hover-pointer': rowClicked$.observed}\" (click)=\"!_isLoading && rowClicked$.next(row)\"></tr>\n\n <tr *matNoDataRow class=\"dm-table-row\">\n <td class=\"dm-no-data-cell\" [attr.colspan]=\"columns.length + (rowContextMenu ? 1 : 0) + (rowSelectionModel ? 1 : 0)\">{{ intl[_isLoading ? DominusTableIntl.LOADING : DominusTableIntl.NO_DATA] }}</td>\n </tr>\n </table>\n </div>\n <mat-paginator *ngIf=\"paginate\" class=\"paginator\" [disabled]=\"_isLoading\" [pageSizeOptions]=\"pageSizeOptions\" [pageSize]=\"pageSize\" [showFirstLastButtons]=\"showFirstLastButtons\" [hidePageSize]=\"hidePageSize\" aria-label=\"Select page\"></mat-paginator>\n</div>\n<ng-template #renderDefault let-column=\"column\" let-row=\"row\">\n {{ row[column.id] }}\n</ng-template>\n\n<ng-template #renderComponent let-column=\"column\" let-row=\"row\">\n <ng-container\n [ngComponentOutlet]=\"column.renderUsing.component\"\n [ngComponentOutletInjector]=\"createRenderComponentInjector(column, row[column.id])\"></ng-container>\n</ng-template>\n\n<ng-template #renderPipe let-column=\"column\" let-row=\"row\">\n {{ row[column.id] | dmTableRender: column.renderUsing.pipe : column.renderUsing.pipeArguments || [] }}\n</ng-template>\n", styles: [".dm-table-container{position:relative}.dm-table-container.outline{border:1px solid var(--dm-table-border-color, rgba(0, 0, 0, .2))}.dm-table-container.striped .dm-table .dm-table-row:nth-child(2n){background:var(--dm-table-striped-row-background, rgba(0, 0, 0, .02))}.dm-table-container .loading-overlay{width:100%;position:absolute;left:0;top:0;z-index:1}.dm-table-container .dm-table-overflow{overflow:auto}.dm-table-container .dm-table{width:100%}.dm-table-container .dm-table .dm-table-header-row .dm-table-row-contextual-menu-column{width:90px}.dm-table-container .dm-table .dm-table-row.dm-table-row-hover-effect:hover{background:var(--dm-table-hover-background, rgba(0, 0, 0, .04))}.dm-table-container .dm-table .dm-table-row.dm-table-row-hover-effect:hover.dm-table-row-hover-pointer{cursor:pointer}.dm-table-container .dm-table .dm-table-row .dm-no-data-cell{padding:15px 0;text-align:center;font-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i6.MatPaginator, selector: "mat-paginator", inputs: ["disabled", "color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i9.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: DmTableRenderPipe, name: "dmTableRender" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DmTableComponent, decorators: [{
type: Component,
args: [{ selector: 'dm-table', standalone: true, imports: [
CommonModule,
MatTableModule,
MatButtonModule,
MatIconModule,
MatPaginatorModule,
MatSortModule,
MatMenuModule,
MatCheckboxModule,
MatProgressSpinnerModule,
MatProgressBarModule,
DmTableRenderPipe
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dm-table-container\" [ngClass]=\"containerClasses\">\n <div *ngIf=\"_isLoading\" class=\"loading-overlay\">\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n </div>\n <div class=\"dm-table-overflow\" [ngStyle]=\"{'max-height': maxHeight}\">\n <table mat-table matSort [dataSource]=\"dataSourceAdapter\" class=\"dm-table\" [trackBy]=\"trackBy\">\n <!-- ROW SELECTION COLUMN -->\n <ng-container *ngIf=\"rowSelectionModel\" matColumnDef=\"dm_table_row_selection_column\">\n <th mat-header-cell *matHeaderCellDef>\n <mat-checkbox *ngIf=\"rowSelectionModel.isMultipleSelection()\" color=\"primary\"\n [disabled]=\"_isLoading\"\n (change)=\"toggleAllRowsSelection($event)\"\n [checked]=\"masterCheckboxChecked\"\n [indeterminate]=\"masterCheckboxIndeterminate\">\n </mat-checkbox>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <mat-checkbox color=\"primary\"\n [disabled]=\"_isLoading\"\n (change)=\"toggleRowSelection(row)\"\n [checked]=\"rowSelectionModel.isSelected(row)\">\n </mat-checkbox>\n </td>\n </ng-container>\n\n <!-- NORMAL DATA COLUMN -->\n <ng-container *ngFor=\"let column of columns; trackBy: identifyColumn\" [matColumnDef]=\"column.id\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]=\"column.classes\" [arrowPosition]=\"sortingArrowPosition\" [disabled]=\"_isLoading || column.sortable === false\">\n {{ column.name }}\n </th>\n <td mat-cell *matCellDef=\"let row\" [ngClass]=\"column.classes\">\n <ng-container\n [ngTemplateOutlet]=\"!column.renderUsing ? renderDefault : (column.renderUsing.component ? renderComponent : renderPipe)\"\n [ngTemplateOutletContext]=\"{column, row}\">\n </ng-container>\n </td>\n </ng-container>\n\n <!-- ROW CONTEXTUAL MENU COLUMN -->\n <ng-container *ngIf=\"rowContextMenu\" matColumnDef=\"dm_table_row_contextual_menu_column\">\n <th mat-header-cell *matHeaderCellDef class=\"dm-table-row-contextual-menu-column\"> </th>\n <td mat-cell *matCellDef=\"let row\">\n <button *ngIf=\"rowContextMenuIsVisibleFn(row)\" [disabled]=\"_isLoading\" (click)=\"$event.stopPropagation()\"\n mat-icon-button [matMenuTriggerFor]=\"rowContextMenu\" [matMenuTriggerData]=\"{row: row}\">\n <mat-icon>menu</mat-icon>\n </button>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: freezeHeaderRow\" class=\"dm-table-header-row\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n class=\"dm-table-row\" [ngClass]=\"{'dm-table-row-hover-effect': rowHoverEffectEnabled, 'dm-table-row-hover-pointer': rowClicked$.observed}\" (click)=\"!_isLoading && rowClicked$.next(row)\"></tr>\n\n <tr *matNoDataRow class=\"dm-table-row\">\n <td class=\"dm-no-data-cell\" [attr.colspan]=\"columns.length + (rowContextMenu ? 1 : 0) + (rowSelectionModel ? 1 : 0)\">{{ intl[_isLoading ? DominusTableIntl.LOADING : DominusTableIntl.NO_DATA] }}</td>\n </tr>\n </table>\n </div>\n <mat-paginator *ngIf=\"paginate\" class=\"paginator\" [disabled]=\"_isLoading\" [pageSizeOptions]=\"pageSizeOptions\" [pageSize]=\"pageSize\" [showFirstLastButtons]=\"showFirstLastButtons\" [hidePageSize]=\"hidePageSize\" aria-label=\"Select page\"></mat-paginator>\n</div>\n<ng-template #renderDefault let-column=\"column\" let-row=\"row\">\n {{ row[column.id] }}\n</ng-template>\n\n<ng-template #renderComponent let-column=\"column\" let-row=\"row\">\n <ng-container\n [ngComponentOutlet]=\"column.renderUsing.component\"\n [ngComponentOutletInjector]=\"createRenderComponentInjector(column, row[column.id])\"></ng-container>\n</ng-template>\n\n<ng-template #renderPipe let-column=\"column\" let-row=\"row\">\n {{ row[column.id] | dmTableRender: column.renderUsing.pipe : column.renderUsing.pipeArguments || [] }}\n</ng-template>\n", styles: [".dm-table-container{position:relative}.dm-table-container.outline{border:1px solid var(--dm-table-border-color, rgba(0, 0, 0, .2))}.dm-table-container.striped .dm-table .dm-table-row:nth-child(2n){background:var(--dm-table-striped-row-background, rgba(0, 0, 0, .02))}.dm-table-container .loading-overlay{width:100%;position:absolute;left:0;top:0;z-index:1}.dm-table-container .dm-table-overflow{overflow:auto}.dm-table-container .dm-table{width:100%}.dm-table-container .dm-table .dm-table-header-row .dm-table-row-contextual-menu-column{width:90px}.dm-table-container .dm-table .dm-table-row.dm-table-row-hover-effect:hover{background:var(--dm-table-hover-background, rgba(0, 0, 0, .04))}.dm-table-container .dm-table .dm-table-row.dm-table-row-hover-effect:hover.dm-table-row-hover-pointer{cursor:pointer}.dm-table-container .dm-table .dm-table-row .dm-no-data-cell{padding:15px 0;text-align:center;font-size:1rem}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.HttpClient }, { type: i0.Injector }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [DM_TABLE_INTL]
}] }], propDecorators: { columns: [{
type: Input,
args: [{ required: true }]
}], dataSource: [{
type: Input,
args: [{ required: true }]
}], intl: [{
type: Input
}], dataSourceRequestMethod: [{
type: Input
}], filters: [{
type: Input
}], onBeforeServerRequestFn: [{
type: Input
}], rowContextMenu: [{
type: Input
}], rowContextMenuIsVisibleFn: [{
type: Input
}], rowSelectionModel: [{
type: Input
}], mapRowsFn: [{
type: Input
}], trackBy: [{
type: Input
}], rowHoverEffectEnabled: [{
type: Input
}], stripedRows: [{
type: Input
}], outline: [{
type: Input
}], loadingAnimationEnabled: [{
type: Input
}], paginate: [{
type: Input
}], showFirstLastButtons: [{
type: Input
}], hidePageSize: [{
type: Input
}], pageSize: [{
type: Input
}], pageSizeOptions: [{
type: Input
}], sortingArrowPosition: [{
type: Input
}], freezeHeaderRow: [{
type: Input
}], maxHeight: [{
type: Input
}], rowClicked$: [{
type: Output,
args: ['rowClicked']
}], paginator: [{
type: ViewChild,
args: [MatPaginator]
}], sort: [{
type: ViewChild,
args: [MatSort]
}], isLoading: [{
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
/*
* Public API Surface of dm-table
*/
/**
* Generated bundle index. Do not edit.
*/
export { DM_TABLE_INTL, DM_TABLE_RENDER_COMPONENT_DATA, DmTableComponent, DmTableDataSourceAdapter, DmTableIntl, DmTableRenderPipe };
//# sourceMappingURL=ng-dominus-dm-table.mjs.map