@notiz/ngx-tablo
Version:
JSON powered material table for Angular
533 lines (513 loc) • 28.6 kB
JavaScript
import { NgTemplateOutlet, DatePipe, DecimalPipe, PercentPipe, CurrencyPipe, TitleCasePipe } from '@angular/common';
import * as i0 from '@angular/core';
import { Pipe, input, model, computed, output, viewChild, effect, Component } from '@angular/core';
import * as i2 from '@angular/material/paginator';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import * as i3 from '@angular/material/sort';
import { MatSort, MatSortModule } from '@angular/material/sort';
import * as i1 from '@angular/material/table';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { Subject, Observable, takeUntil, BehaviorSubject } from 'rxjs';
import { _isNumberValue } from '@angular/cdk/coercion';
function isDefined(value) {
return value !== undefined && value !== null;
}
const resolveNestedValue = (row, path) => path.split(/\./).reduce((o, p) => o && o[p], row);
const resolveNestedColumnValue = (row, columnName) => {
if (columnName.match(/\./)) {
return resolveNestedValue(row, columnName);
}
else {
return row[columnName];
}
};
class CellValuePipe {
transform(row, column) {
if (isDefined(column.cellTemplate)) {
return column.cellTemplate;
}
if (column.cell && isDefined(column.cell(row))) {
return column.cell(row);
}
const resolvedNestedColumnValue = resolveNestedColumnValue(row, column.columnName);
if (isDefined(resolveNestedColumnValue)) {
return resolvedNestedColumnValue;
}
return undefined;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CellValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.13", ngImport: i0, type: CellValuePipe, isStandalone: true, name: "cellValue" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CellValuePipe, decorators: [{
type: Pipe,
args: [{ name: 'cellValue', standalone: true }]
}] });
class HasCellValuePipe {
transform(row, column) {
if (isDefined(column.cellTemplate) ||
(column.cell && isDefined(column.cell(row))) ||
isDefined(resolveNestedColumnValue(row, column.columnName))) {
return true;
}
return false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HasCellValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.13", ngImport: i0, type: HasCellValuePipe, isStandalone: true, name: "hasCellValue" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HasCellValuePipe, decorators: [{
type: Pipe,
args: [{ name: 'hasCellValue', standalone: true }]
}] });
class Tablo {
constructor() {
this.tableClasses = input('', ...(ngDevMode ? [{ debugName: "tableClasses" }] : []));
/**
* Add custom dataSource.
*
* Default: MatTableDataSource
*/
this.dataSource = input(new MatTableDataSource(), ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
this.data = model(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
this.columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
this.displayedColumns = computed(() => this.columns().map((column) => column.columnName), ...(ngDevMode ? [{ debugName: "displayedColumns" }] : []));
this.mode = input('client', ...(ngDevMode ? [{ debugName: "mode" }] : []));
/**
* Sorting
*/
this.sortActive = model('', ...(ngDevMode ? [{ debugName: "sortActive" }] : []));
this.sortDirection = model('', ...(ngDevMode ? [{ debugName: "sortDirection" }] : []));
/**
* Custom sorting function for `MatTableDataSource`.
*
* Use this if data properties don't match column names or for complex data objects.
*
* Default expects column `xyz` to represent `data['xyz']`.
*
*/
this.sortingDataAccessor = input(...(ngDevMode ? [undefined, { debugName: "sortingDataAccessor" }] : []));
/**
* Filter value for `MatTableDataSource`.
*/
this.filter = input(...(ngDevMode ? [undefined, { debugName: "filter" }] : []));
/**
* Custom filter function for `MatTableDataSource`.
*/
this.filterPredicate = input(...(ngDevMode ? [undefined, { debugName: "filterPredicate" }] : []));
/**
* Paging
*/
this.showPaging = model(false, ...(ngDevMode ? [{ debugName: "showPaging" }] : []));
this.pagingDisabled = model(false, ...(ngDevMode ? [{ debugName: "pagingDisabled" }] : []));
this.hidePageSize = model(false, ...(ngDevMode ? [{ debugName: "hidePageSize" }] : []));
this.showFirstLastButtons = model(true, ...(ngDevMode ? [{ debugName: "showFirstLastButtons" }] : []));
this.pageSize = model(0, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
this.pageIndex = model(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : []));
this.length = model(0, ...(ngDevMode ? [{ debugName: "length" }] : []));
this.pageSizeOptions = model([10, 20, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
this.pageAriaLabel = model('Select page', ...(ngDevMode ? [{ debugName: "pageAriaLabel" }] : []));
/**
* default to false
*/
this.resetPageOnSort = model(false, ...(ngDevMode ? [{ debugName: "resetPageOnSort" }] : []));
/**
* Outputs
*/
this.rowClick = output();
this.pageChange = output();
this.sortChange = output();
this.paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "paginator" }] : []));
this.sort = viewChild.required(MatSort);
this.destroy$ = new Subject();
effect(() => {
this.fillData();
});
effect(() => {
const filter = this.filter();
if (this.dataSource() instanceof MatTableDataSource) {
this.getMatTableDataSource().filter = filter || '';
}
});
}
ngOnInit() {
this.columns().forEach((column) => {
if (column.lifecycle?.onInit) {
column.lifecycle.onInit(column);
}
});
if (this.dataSource() instanceof MatTableDataSource) {
if (this.filterPredicate()) {
this.getMatTableDataSource().filterPredicate = this.filterPredicate();
}
if (this.sortingDataAccessor()) {
this.getMatTableDataSource().sortingDataAccessor =
this.sortingDataAccessor();
}
}
}
ngAfterViewInit() {
this.columns().forEach((column) => {
if (column.lifecycle?.afterViewInit) {
column.lifecycle.afterViewInit(column);
}
});
this.sort().sortChange.subscribe((sort) => {
this.sortChange.emit(sort);
if (this.resetPageOnSort()) {
this.firstPage();
}
});
if (this.paginator()) {
this.paginator().page.subscribe((page) => this.pageChange.emit(page));
}
if (this.mode() === 'client' &&
this.dataSource() instanceof MatTableDataSource) {
this.getMatTableDataSource().paginator = this.paginator();
this.getMatTableDataSource().sort = this.sort();
}
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
firstPage() {
if (this.paginator()) {
this.paginator().firstPage();
}
}
lastPage() {
if (this.paginator()) {
this.paginator().lastPage();
}
}
clearFilter() {
if (this.dataSource() instanceof MatTableDataSource) {
this.getMatTableDataSource().filter = '';
}
}
fillData() {
if (this.data() && this.dataSource() instanceof MatTableDataSource) {
if (this.data() instanceof Observable) {
this.data()
.pipe(takeUntil(this.destroy$))
.subscribe((data) => (this.getMatTableDataSource().data = data));
}
else {
this.getMatTableDataSource().data = this.data();
}
}
}
getMatTableDataSource() {
return this.dataSource();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: Tablo, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: Tablo, isStandalone: true, selector: "ngx-tablo", inputs: { tableClasses: { classPropertyName: "tableClasses", publicName: "tableClasses", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, sortActive: { classPropertyName: "sortActive", publicName: "sortActive", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortingDataAccessor: { classPropertyName: "sortingDataAccessor", publicName: "sortingDataAccessor", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: true, isRequired: false, transformFunction: null }, showPaging: { classPropertyName: "showPaging", publicName: "showPaging", isSignal: true, isRequired: false, transformFunction: null }, pagingDisabled: { classPropertyName: "pagingDisabled", publicName: "pagingDisabled", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageAriaLabel: { classPropertyName: "pageAriaLabel", publicName: "pageAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, resetPageOnSort: { classPropertyName: "resetPageOnSort", publicName: "resetPageOnSort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", sortActive: "sortActiveChange", sortDirection: "sortDirectionChange", showPaging: "showPagingChange", pagingDisabled: "pagingDisabledChange", hidePageSize: "hidePageSizeChange", showFirstLastButtons: "showFirstLastButtonsChange", pageSize: "pageSizeChange", pageIndex: "pageIndexChange", length: "lengthChange", pageSizeOptions: "pageSizeOptionsChange", pageAriaLabel: "pageAriaLabelChange", resetPageOnSort: "resetPageOnSortChange", rowClick: "rowClick", pageChange: "pageChange", sortChange: "sortChange" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], ngImport: i0, template: `
<table
[class]="tableClasses()"
mat-table
[dataSource]="dataSource()"
matSort
[matSortActive]="sortActive()"
[matSortDirection]="sortDirection()"
>
@for (column of columns(); track column; let i = $index) {
<ng-container [matColumnDef]="column.columnName">
<th
mat-header-cell
[mat-sort-header]="column.sortHeader || column.columnName"
[disabled]="!column.sort"
*matHeaderCellDef
>
@if (column.headerTemplate; as content) {
<ng-container
[ngTemplateOutlet]="headerContentTemplate"
[ngTemplateOutletContext]="{
content: content,
column: column,
}"
></ng-container>
} @else {
@if (
(column.headerHTMLContent &&
column.headerHTMLContent(column)) ||
column.header;
as content
) {
<div
[class]="column.headerClassName"
[innerHTML]="content"
></div>
}
}
</th>
<td mat-cell *matCellDef="let row" [class]="column.cellClass">
@if (row | hasCellValue: column; as content) {
<ng-container
[ngTemplateOutlet]="cellContentTemplate"
[ngTemplateOutletContext]="{
content: row | cellValue: column,
row: row,
className: column.className,
format: column.format,
}"
>
</ng-container>
}
</td>
</ng-container>
}
<tr mat-header-row *matHeaderRowDef="displayedColumns()"></tr>
<tr
mat-row
*matRowDef="let row; columns: displayedColumns()"
(click)="rowClick.emit(row)"
></tr>
</table>
@if (showPaging()) {
<mat-paginator
[disabled]="pagingDisabled()"
[hidePageSize]="hidePageSize()"
[pageSizeOptions]="pageSizeOptions()"
[pageSize]="pageSize()"
[pageIndex]="pageIndex()"
[length]="length()"
[showFirstLastButtons]="showFirstLastButtons()"
[attr.aria-label]="pageAriaLabel()"
>
</mat-paginator>
}
<ng-template
#headerContentTemplate
let-content="content"
let-column="column"
>
<ng-container
[ngTemplateOutlet]="content"
[ngTemplateOutletContext]="{ column: column }"
></ng-container>
</ng-template>
<ng-template
#cellContentTemplate
let-content="content"
let-row="row"
let-className="className"
let-format="format"
>
@if (!content.createEmbeddedView) {
@if (format) {
<div [class]="className">
<!-- NOTE: each specified format will be displayed currently -->
@if (format.date) {
{{ content | date: format.date }}
}
@if (format.decimal) {
{{ content | number: format.decimal }}
}
@if (format.percent) {
{{ content | percent: format.percent }}
}
@if (format.currency) {
{{ content | currency: format.currency }}
}
@if (format.titleCase) {
{{ content | titlecase }}
}
</div>
} @else {
<div [class]="className" [innerHTML]="content"></div>
}
} @else {
<ng-container
[ngTemplateOutlet]="content"
[ngTemplateOutletContext]="{ row: row }"
></ng-container>
}
</ng-template>
`, isInline: true, styles: ["table{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: HasCellValuePipe, name: "hasCellValue" }, { kind: "pipe", type: CellValuePipe, name: "cellValue" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: Tablo, decorators: [{
type: Component,
args: [{ selector: 'ngx-tablo', imports: [
NgTemplateOutlet,
DatePipe,
DecimalPipe,
PercentPipe,
CurrencyPipe,
TitleCasePipe,
MatTableModule,
MatPaginatorModule,
MatSortModule,
HasCellValuePipe,
CellValuePipe,
], template: `
<table
[class]="tableClasses()"
mat-table
[dataSource]="dataSource()"
matSort
[matSortActive]="sortActive()"
[matSortDirection]="sortDirection()"
>
@for (column of columns(); track column; let i = $index) {
<ng-container [matColumnDef]="column.columnName">
<th
mat-header-cell
[mat-sort-header]="column.sortHeader || column.columnName"
[disabled]="!column.sort"
*matHeaderCellDef
>
@if (column.headerTemplate; as content) {
<ng-container
[ngTemplateOutlet]="headerContentTemplate"
[ngTemplateOutletContext]="{
content: content,
column: column,
}"
></ng-container>
} @else {
@if (
(column.headerHTMLContent &&
column.headerHTMLContent(column)) ||
column.header;
as content
) {
<div
[class]="column.headerClassName"
[innerHTML]="content"
></div>
}
}
</th>
<td mat-cell *matCellDef="let row" [class]="column.cellClass">
@if (row | hasCellValue: column; as content) {
<ng-container
[ngTemplateOutlet]="cellContentTemplate"
[ngTemplateOutletContext]="{
content: row | cellValue: column,
row: row,
className: column.className,
format: column.format,
}"
>
</ng-container>
}
</td>
</ng-container>
}
<tr mat-header-row *matHeaderRowDef="displayedColumns()"></tr>
<tr
mat-row
*matRowDef="let row; columns: displayedColumns()"
(click)="rowClick.emit(row)"
></tr>
</table>
@if (showPaging()) {
<mat-paginator
[disabled]="pagingDisabled()"
[hidePageSize]="hidePageSize()"
[pageSizeOptions]="pageSizeOptions()"
[pageSize]="pageSize()"
[pageIndex]="pageIndex()"
[length]="length()"
[showFirstLastButtons]="showFirstLastButtons()"
[attr.aria-label]="pageAriaLabel()"
>
</mat-paginator>
}
<ng-template
#headerContentTemplate
let-content="content"
let-column="column"
>
<ng-container
[ngTemplateOutlet]="content"
[ngTemplateOutletContext]="{ column: column }"
></ng-container>
</ng-template>
<ng-template
#cellContentTemplate
let-content="content"
let-row="row"
let-className="className"
let-format="format"
>
@if (!content.createEmbeddedView) {
@if (format) {
<div [class]="className">
<!-- NOTE: each specified format will be displayed currently -->
@if (format.date) {
{{ content | date: format.date }}
}
@if (format.decimal) {
{{ content | number: format.decimal }}
}
@if (format.percent) {
{{ content | percent: format.percent }}
}
@if (format.currency) {
{{ content | currency: format.currency }}
}
@if (format.titleCase) {
{{ content | titlecase }}
}
</div>
} @else {
<div [class]="className" [innerHTML]="content"></div>
}
} @else {
<ng-container
[ngTemplateOutlet]="content"
[ngTemplateOutletContext]="{ row: row }"
></ng-container>
}
</ng-template>
`, styles: ["table{width:100%}\n"] }]
}], ctorParameters: () => [], propDecorators: { tableClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableClasses", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }, { type: i0.Output, args: ["dataChange"] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], sortActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortActive", required: false }] }, { type: i0.Output, args: ["sortActiveChange"] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }, { type: i0.Output, args: ["sortDirectionChange"] }], sortingDataAccessor: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortingDataAccessor", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPredicate", required: false }] }], showPaging: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPaging", required: false }] }, { type: i0.Output, args: ["showPagingChange"] }], pagingDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagingDisabled", required: false }] }, { type: i0.Output, args: ["pagingDisabledChange"] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }, { type: i0.Output, args: ["hidePageSizeChange"] }], showFirstLastButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastButtons", required: false }] }, { type: i0.Output, args: ["showFirstLastButtonsChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }, { type: i0.Output, args: ["pageIndexChange"] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }, { type: i0.Output, args: ["lengthChange"] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }, { type: i0.Output, args: ["pageSizeOptionsChange"] }], pageAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageAriaLabel", required: false }] }, { type: i0.Output, args: ["pageAriaLabelChange"] }], resetPageOnSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetPageOnSort", required: false }] }, { type: i0.Output, args: ["resetPageOnSortChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }] } });
class NestedColumnNamePipe {
transform(value, columnName) {
return resolveNestedColumnValue(value, columnName);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NestedColumnNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.13", ngImport: i0, type: NestedColumnNamePipe, isStandalone: true, name: "nestedColumnName" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NestedColumnNamePipe, decorators: [{
type: Pipe,
args: [{ name: 'nestedColumnName', standalone: true }]
}] });
class LoadingDataSource {
constructor() {
this.dataSubject = new BehaviorSubject([]);
this.loadingSubject = new BehaviorSubject(false);
this.disconnect$ = new Subject();
this.loading$ = this.loadingSubject.asObservable();
}
connect(collectionViewer) {
return this.dataSubject.asObservable();
}
disconnect(collectionViewer) {
this.dataSubject.complete();
this.loadingSubject.complete();
this.disconnect$.next();
this.disconnect$.complete();
}
}
/**
* MatTableDataSource that supports sorting for nested objects.
*/
class NestedObjectDataSource extends MatTableDataSource {
constructor(initialData) {
super(initialData);
this.sortingDataAccessor = (data, sortHeaderId) => {
const value = resolveNestedValue(data, sortHeaderId);
return _isNumberValue(value) ? Number(value) : value;
};
}
}
const nestedObjectDataSource = (initialData) => new NestedObjectDataSource(initialData);
/*
* Public API Surface of ngx-tablo
*/
/**
* Generated bundle index. Do not edit.
*/
export { LoadingDataSource, NestedColumnNamePipe, NestedObjectDataSource, Tablo, nestedObjectDataSource, resolveNestedColumnValue, resolveNestedValue };
//# sourceMappingURL=notiz-ngx-tablo.mjs.map