@cauca-911/datagrid
Version:
Run `npm install @cauca-911/datagrid --save` to add this library to your project
648 lines (637 loc) • 159 kB
JavaScript
import * as i0 from '@angular/core';
import { ViewChild, HostBinding, Input, Optional, ViewEncapsulation, Component, EventEmitter, Output, Injectable, input, signal, ContentChild, ContentChildren, ChangeDetectionStrategy, QueryList, output, effect, TemplateRef, inject, forwardRef, computed, model } from '@angular/core';
import * as i1 from '@angular/material/table';
import { MatColumnDef, MatCellDef, MatHeaderCellDef, MatFooterCellDef, MatTable, MatHeaderRowDef, MatFooterRowDef, MatNoDataRow, MatRowDef, MatTableDataSource, MatHeaderCell, MatFooterCell, MatRow, MatHeaderRow, MatFooterRow, MatCell } from '@angular/material/table';
import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle, CDK_DRAG_CONFIG } from '@angular/cdk/drag-drop';
import * as i1$5 from '@cauca-911/core';
import { toLowerCaseAndWithoutDiacritics, CaucaCoreService } from '@cauca-911/core';
import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
import * as i3 from '@angular/forms';
import { FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
import * as i1$1 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIcon } from '@angular/material/icon';
import * as i2 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import { IconButtonComponent, RaisedButtonComponent, BasicButtonComponent, StrokedButtonComponent, MenuItemComponent, IconComponent } from '@cauca-911/material';
import * as i1$2 from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';
import { Subject, debounceTime, takeUntil, BehaviorSubject, of, distinctUntilChanged } from 'rxjs';
import { MatSort, MatSortHeader } from '@angular/material/sort';
import { trigger, state, transition, style, animate } from '@angular/animations';
import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
import * as i2$1 from '@angular/material/card';
import { MatCardModule } from '@angular/material/card';
import * as i3$1 from '@angular/material/checkbox';
import { MatCheckboxModule } from '@angular/material/checkbox';
import * as i4 from '@angular/material/menu';
import { MatMenuModule } from '@angular/material/menu';
import { NgTemplateOutlet, NgStyle, NgClass, DatePipe } from '@angular/common';
import * as i1$3 from '@angular/material/progress-spinner';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { ODataDataSource } from 'odata-data-source';
import * as i1$4 from '@angular/common/http';
import { MatTooltip } from '@angular/material/tooltip';
import { RouterLink } from '@angular/router';
import dayjs from 'dayjs';
class DataGridRowDropEvent {
constructor(data) {
Object.assign(this, data);
}
}
class BaseGridColumnComponent {
constructor(table) {
this.table = table;
this.prop = '';
this.showLabel = true;
this.isInColumnChooser = true;
this.width = "";
this.showToolTip = false;
this.selected = true;
}
ngOnInit() {
if (this.columnDef) {
if (!this.columnDef.name) {
this.columnDef.name = this.prop;
}
this.columnDef.cell = this.cellDef;
this.columnDef.headerCell = this.headerCellDef;
this.columnDef.footerCell = this.footerCellDef;
}
}
ngOnDestroy() {
if (this.table) {
this.table.removeColumnDef(this.columnDef);
}
}
capitalize(value) {
return value.charAt(0).toUpperCase() + value.slice(1);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BaseGridColumnComponent, deps: [{ token: i1.MatTable, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: BaseGridColumnComponent, isStandalone: true, selector: "ng-component", inputs: { prop: "prop", showLabel: "showLabel", label: "label", isInColumnChooser: "isInColumnChooser", width: "width", showToolTip: "showToolTip" }, host: { properties: { "attr.ariaHidden": "this.ariaHidden", "class": "this.classes" } }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true, static: true }, { propertyName: "cellDef", first: true, predicate: MatCellDef, descendants: true, static: true }, { propertyName: "headerCellDef", first: true, predicate: MatHeaderCellDef, descendants: true, static: true }, { propertyName: "footerCellDef", first: true, predicate: MatFooterCellDef, descendants: true, static: true }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BaseGridColumnComponent, decorators: [{
type: Component,
args: [{ template: '',
encapsulation: ViewEncapsulation.None
}]
}], ctorParameters: () => [{ type: i1.MatTable, decorators: [{
type: Optional
}] }], propDecorators: { prop: [{
type: Input
}], showLabel: [{
type: Input
}], label: [{
type: Input
}], isInColumnChooser: [{
type: Input
}], width: [{
type: Input
}], showToolTip: [{
type: Input
}], ariaHidden: [{
type: HostBinding,
args: ['attr.ariaHidden']
}], classes: [{
type: HostBinding,
args: ['class']
}], columnDef: [{
type: ViewChild,
args: [MatColumnDef, { static: true }]
}], cellDef: [{
type: ViewChild,
args: [MatCellDef, { static: true }]
}], headerCellDef: [{
type: ViewChild,
args: [MatHeaderCellDef, { static: true }]
}], footerCellDef: [{
type: ViewChild,
args: [MatFooterCellDef, { static: true }]
}] } });
class DataGridHeaderComponent {
constructor() {
this.filterControl = new FormControl('');
this.showAddButton = false;
this.showRefreshButton = false;
this.addButtonLabel = '';
this.filterChange = new EventEmitter();
this.addButtonClick = new EventEmitter();
this.refreshRequest = new EventEmitter();
this._onDestroy = new Subject();
}
ngOnInit() {
this.filterControl.valueChanges
.pipe(debounceTime(500), takeUntil(this._onDestroy))
.subscribe((filter) => {
this.filterChange.emit(filter);
this.showClearButton = !!filter;
});
}
ngOnDestroy() {
this._onDestroy.next();
this._onDestroy.complete();
}
onRefresh() {
this.refreshRequest.emit();
}
clearSearchValue() {
this.filterControl.setValue('');
}
onAddButtonClick() {
this.addButtonClick.emit(null);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DataGridHeaderComponent, isStandalone: true, selector: "cauca-data-grid-header", inputs: { showAddButton: "showAddButton", showRefreshButton: "showRefreshButton", addButtonLabel: "addButtonLabel" }, outputs: { filterChange: "filterChange", addButtonClick: "addButtonClick", refreshRequest: "refreshRequest" }, ngImport: i0, template: "<div class=\"grid-header\">\n\n <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\n @if (showClearButton) { <cauca-icon-button matPrefix (buttonClick)=\"clearSearchValue()\" icon=\"close\" /> }\n <mat-label>{{ 'dataGrid.keywordsLabel' | translate}}</mat-label>\n <input matInput [formControl]=\"filterControl\">\n <mat-icon matSuffix>search</mat-icon>\n </mat-form-field>\n\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\n\n @if (showRefreshButton) { <cauca-icon-button (buttonClick)=\"onRefresh()\" icon=\"refresh\" class=\"grid-refresh-button\" /> }\n\n @if (showAddButton) { <cauca-raised-button icon=\"add\" color=\"primary\" [label]=\"addButtonLabel\" [translateLabel]=\"false\" class=\"grid-new-button\" (buttonClick)=\"onAddButtonClick()\" /> }\n</div>", styles: [".grid-header{display:flex;justify-content:space-between;gap:16px;align-items:center;align-content:normal;padding:0 16px}@media (max-width: 500px){.grid-header{flex-wrap:wrap;justify-content:flex-end}}.grid-search-box{display:block;flex-grow:1;flex-basis:auto;align-self:auto}.grid-new-button{display:block;flex-shrink:0;flex-basis:auto;align-self:auto}.grid-new-button>mat-icon{color:inherit}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: RaisedButtonComponent, selector: "cauca-raised-button" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridHeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'cauca-data-grid-header', imports: [MatFormFieldModule, IconButtonComponent, RaisedButtonComponent, MatInputModule, ReactiveFormsModule, TranslateModule, MatIcon], template: "<div class=\"grid-header\">\n\n <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\n @if (showClearButton) { <cauca-icon-button matPrefix (buttonClick)=\"clearSearchValue()\" icon=\"close\" /> }\n <mat-label>{{ 'dataGrid.keywordsLabel' | translate}}</mat-label>\n <input matInput [formControl]=\"filterControl\">\n <mat-icon matSuffix>search</mat-icon>\n </mat-form-field>\n\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\n\n @if (showRefreshButton) { <cauca-icon-button (buttonClick)=\"onRefresh()\" icon=\"refresh\" class=\"grid-refresh-button\" /> }\n\n @if (showAddButton) { <cauca-raised-button icon=\"add\" color=\"primary\" [label]=\"addButtonLabel\" [translateLabel]=\"false\" class=\"grid-new-button\" (buttonClick)=\"onAddButtonClick()\" /> }\n</div>", styles: [".grid-header{display:flex;justify-content:space-between;gap:16px;align-items:center;align-content:normal;padding:0 16px}@media (max-width: 500px){.grid-header{flex-wrap:wrap;justify-content:flex-end}}.grid-search-box{display:block;flex-grow:1;flex-basis:auto;align-self:auto}.grid-new-button{display:block;flex-shrink:0;flex-basis:auto;align-self:auto}.grid-new-button>mat-icon{color:inherit}\n"] }]
}], propDecorators: { showAddButton: [{
type: Input
}], showRefreshButton: [{
type: Input
}], addButtonLabel: [{
type: Input
}], filterChange: [{
type: Output
}], addButtonClick: [{
type: Output
}], refreshRequest: [{
type: Output
}] } });
var Density;
(function (Density) {
Density["Compact"] = "compact";
Density["Standard"] = "standard";
Density["Comfortable"] = "comfortable";
})(Density || (Density = {}));
class Preference {
}
class GridConfiguration {
}
class PreferenceService {
constructor() {
this.preference = new BehaviorSubject(new Preference());
this.gridConfiguration = [];
const data = localStorage.getItem('GridPreference');
const configuration = localStorage.getItem('GridConfiguration');
if (data) {
this.preference.next(JSON.parse(data));
}
if (configuration) {
this.gridConfiguration = JSON.parse(configuration);
}
}
getPreference() {
return this.preference.value;
}
setPreferenceDensity(density) {
const preference = this.getPreference();
if (density === preference.gridDensity)
return;
preference.gridDensity = density;
this.preference.next(preference);
this.addOrUpdatePreference();
}
addOrUpdatePreference() {
localStorage.setItem('GridPreference', JSON.stringify(this.getPreference()));
}
getPreferenceForGrid(gridName) {
return of(this.getPreferenceForGridNotObservable(gridName));
}
addOrUpdateGridPreference(gridName, visibleColumns) {
const configuration = this.getPreferenceForGridNotObservable(gridName);
configuration.visibleColumns = visibleColumns || [];
localStorage.setItem('GridConfiguration', JSON.stringify(this.gridConfiguration));
return of();
}
getPreferenceForGridNotObservable(gridName) {
const configuration = this.gridConfiguration.find(g => g.name == gridName);
if (configuration) {
return configuration;
}
const newConfiguration = new GridConfiguration();
newConfiguration.name = gridName;
this.gridConfiguration.push(newConfiguration);
return newConfiguration;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PreferenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PreferenceService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PreferenceService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
class BaseDataGridComponent {
get density() {
return Density;
}
constructor(translateService, preferenceService) {
this.preferenceService = preferenceService;
this.displayedColumns = [];
this.showAddButton = false;
this.addButtonLabel = '';
this.showTableOptions = false;
this.showColumnViewer = true;
this.addButtonClick = new EventEmitter();
this.showPaginator = input(false, ...(ngDevMode ? [{ debugName: "showPaginator" }] : []));
this.hidePageSize = input(false, ...(ngDevMode ? [{ debugName: "hidePageSize" }] : []));
this.showExpandButton = input(false, ...(ngDevMode ? [{ debugName: "showExpandButton" }] : []));
this.expandedElement = signal(null, ...(ngDevMode ? [{ debugName: "expandedElement" }] : []));
this.defaultAddButtonLabel = '';
this.allDisplayedColumns = signal([], ...(ngDevMode ? [{ debugName: "allDisplayedColumns" }] : []));
this.sort = null;
this.defaultAddButtonLabel = translateService.instant('dataGrid.defaultAddButtonLabel');
}
ngAfterContentInit() {
this.setUpPaginator(this.paginator, this.showPaginator());
this.setUpFilterPredicate();
if (this.table && this.regularColumns && this.rowDefs && this.columnDefs) {
this.applyColumns();
}
if (this.showTableOptions) {
this.preferenceService.preference.subscribe((preference) => {
this.preference = preference;
});
}
else {
this.showColumnsWhenTableOptionsIsFalse();
this.preference = new Preference();
}
}
ngOnChanges(changes) {
this.updateDataWhenNeeded(changes);
this.updateColumnsWhenNeeded(changes);
}
onExpand(element) {
if (this.expandedElement() === element) {
this.expandedElement.set(null);
}
else {
this.expandedElement.set(element);
}
}
clearFilter() {
this.header?.clearSearchValue();
}
renderRows() {
this.forceReloadFilter();
this.applyColumns();
this.table.renderRows();
}
onDensityChanged(density) {
this.preferenceService.setPreferenceDensity(density);
}
setUpPaginator(_paginator, _showPaginator) {
// nothing
}
onColumnsChanged(columns) {
this.allDisplayedColumns.set([...columns]);
const columnsToSave = this.removeMandatoryColumns([...columns]);
this.preferenceService.addOrUpdateGridPreference(this.resourceName, columnsToSave).subscribe();
}
applyColumns() {
this.regularColumns.forEach(dynColumn => this.table.addColumnDef(dynColumn.columnDef));
this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef));
this.table.setNoDataRow(this.noDataRow);
this.columnDefs.forEach(columnDef => {
this.table.addColumnDef(columnDef);
this.sort.register({ id: columnDef.name, start: 'desc', disableClear: false });
});
}
updateColumnsWhenNeeded(changes) {
if (changes.displayedColumns) {
this.allDisplayedColumns.set([...this.displayedColumns]);
}
}
removeMandatoryColumns(columns) {
let index = columns.indexOf("");
if (index > -1) {
columns.splice(index, 1);
}
index = columns.indexOf("position");
if (index > -1) {
columns.splice(index, 1);
}
index = columns.indexOf("buttons");
if (index > -1) {
columns.splice(index, 1);
}
index = columns.indexOf("menu");
if (index > -1) {
columns.splice(index, 1);
}
index = columns.indexOf("expand");
if (index > -1) {
columns.splice(index, 1);
}
return columns;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BaseDataGridComponent, deps: [{ token: i1$2.TranslateService }, { token: PreferenceService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: BaseDataGridComponent, isStandalone: true, selector: "ng-component", inputs: { resourceName: { classPropertyName: "resourceName", publicName: "resourceName", isSignal: false, isRequired: true, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: false, isRequired: false, transformFunction: null }, showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: false, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, searchableColumns: { classPropertyName: "searchableColumns", publicName: "searchableColumns", isSignal: false, isRequired: false, transformFunction: null }, showTableOptions: { classPropertyName: "showTableOptions", publicName: "showTableOptions", isSignal: false, isRequired: false, transformFunction: null }, showColumnViewer: { classPropertyName: "showColumnViewer", publicName: "showColumnViewer", isSignal: false, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, showExpandButton: { classPropertyName: "showExpandButton", publicName: "showExpandButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addButtonClick: "addButtonClick" }, queries: [{ propertyName: "headerRowDef", first: true, predicate: MatHeaderRowDef, descendants: true }, { propertyName: "footerRowDef", first: true, predicate: MatFooterRowDef, descendants: true }, { propertyName: "noDataRow", first: true, predicate: MatNoDataRow, descendants: true }, { propertyName: "regularColumns", predicate: BaseGridColumnComponent }, { propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "rowDefs", predicate: MatRowDef }], viewQueries: [{ propertyName: "header", first: true, predicate: DataGridHeaderComponent, descendants: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BaseDataGridComponent, decorators: [{
type: Component,
args: [{ template: '' }]
}], ctorParameters: () => [{ type: i1$2.TranslateService }, { type: PreferenceService }], propDecorators: { resourceName: [{
type: Input,
args: [{ required: true }]
}], displayedColumns: [{
type: Input
}], showAddButton: [{
type: Input
}], addButtonLabel: [{
type: Input
}], searchableColumns: [{
type: Input
}], showTableOptions: [{
type: Input
}], showColumnViewer: [{
type: Input
}], addButtonClick: [{
type: Output
}], header: [{
type: ViewChild,
args: [DataGridHeaderComponent]
}], table: [{
type: ViewChild,
args: [MatTable, { static: true }]
}], regularColumns: [{
type: ContentChildren,
args: [BaseGridColumnComponent]
}], columnDefs: [{
type: ContentChildren,
args: [MatColumnDef]
}], headerRowDef: [{
type: ContentChild,
args: [MatHeaderRowDef]
}], footerRowDef: [{
type: ContentChild,
args: [MatFooterRowDef]
}], rowDefs: [{
type: ContentChildren,
args: [MatRowDef]
}], noDataRow: [{
type: ContentChild,
args: [MatNoDataRow]
}], paginator: [{
type: ViewChild,
args: [MatPaginator]
}] } });
class ButtonPopoverComponent {
constructor() {
this.buttonLabel = input(null, ...(ngDevMode ? [{ debugName: "buttonLabel" }] : []));
this.buttonIcon = input('', ...(ngDevMode ? [{ debugName: "buttonIcon" }] : []));
this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
this.isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
}
;
toggle() {
this.isActive.set(!this.isActive());
}
close() {
if (this.isActive()) {
this.isActive.set(false);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ButtonPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: ButtonPopoverComponent, isStandalone: true, selector: "cauca-button-popover", inputs: { buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, buttonIcon: { classPropertyName: "buttonIcon", publicName: "buttonIcon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<cauca-basic-button [icon]=\"buttonIcon()\" [color]=\"color()\" [label]=\"buttonLabel()\" [translateLabel]=\"false\" (buttonClick)=\"toggle()\" cdkOverlayOrigin #popoverTrigger=\"cdkOverlayOrigin\" />\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"popoverTrigger\"\n [cdkConnectedOverlayOpen]=\"isActive()\"\n [cdkConnectedOverlayHasBackdrop]=\"isActive()\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop-cs'\"\n (backdropClick)=\"toggle()\">\n <ng-content></ng-content>\n</ng-template>", styles: [".popover{background-color:#fff;border:1px solid #DDD;pointer-events:none;opacity:0;position:absolute;transition:all .5s ease 0s}.active{opacity:1;pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: BasicButtonComponent, selector: "cauca-basic-button" }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ButtonPopoverComponent, decorators: [{
type: Component,
args: [{ selector: 'cauca-button-popover', imports: [CdkConnectedOverlay, BasicButtonComponent, CdkOverlayOrigin], changeDetection: ChangeDetectionStrategy.OnPush, template: "<cauca-basic-button [icon]=\"buttonIcon()\" [color]=\"color()\" [label]=\"buttonLabel()\" [translateLabel]=\"false\" (buttonClick)=\"toggle()\" cdkOverlayOrigin #popoverTrigger=\"cdkOverlayOrigin\" />\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"popoverTrigger\"\n [cdkConnectedOverlayOpen]=\"isActive()\"\n [cdkConnectedOverlayHasBackdrop]=\"isActive()\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop-cs'\"\n (backdropClick)=\"toggle()\">\n <ng-content></ng-content>\n</ng-template>", styles: [".popover{background-color:#fff;border:1px solid #DDD;pointer-events:none;opacity:0;position:absolute;transition:all .5s ease 0s}.active{opacity:1;pointer-events:auto}\n"] }]
}] });
class DataGridTableOptionsComponent {
get density() {
return Density;
}
get columns() {
return this.allColumns.filter(c => c.prop !== 'buttons' && c.prop !== 'menu' && c.prop !== '' && c.isInColumnChooser);
}
get currentDensityIcon() {
const currentDensity = this.preferenceService.getPreference()?.gridDensity;
if (currentDensity === Density.Compact) {
return 'density_small';
}
if (currentDensity === Density.Comfortable) {
return 'density_large';
}
return 'density_medium';
}
constructor(preferenceService) {
this.preferenceService = preferenceService;
this.showColumnViewer = true;
this.densityChanged = new EventEmitter();
this.allColumns = new QueryList();
this.columnsChanged = new EventEmitter();
this.columnsSearch = '';
}
ngOnInit() {
this.preferenceService.getPreferenceForGrid(this.gridName).subscribe({
next: configuration => {
if (configuration?.visibleColumns) {
this.selectOnlyUserColumns(configuration.visibleColumns);
}
else {
this.selectAllColumns();
}
this.onColumnsChanged();
}
});
}
closeColumnViewer() {
if (this.columnViewer) {
this.columnViewer.close();
}
}
changeDensity(newDensity) {
this.densityChanged.emit(newDensity);
}
onColumnsChanged() {
const newColumns = this.allColumns.filter(column => column.selected);
this.columnsChanged.emit(newColumns.map((column) => column.prop));
}
resetColumns() {
this.allColumns.forEach((column => column.selected = true));
this.columnsChanged.emit(this.allColumns.map((column) => column.prop));
}
selectOnlyUserColumns(configurationVisibleColumns) {
this.allColumns.forEach((column => {
const index = configurationVisibleColumns.findIndex(c => c === column.prop);
if (index === -1 && column.prop !== 'buttons' && column.prop !== 'menu' && column.prop !== '') {
column.selected = false;
}
}));
}
selectAllColumns() {
this.allColumns.forEach((column => {
column.selected = true;
}));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridTableOptionsComponent, deps: [{ token: PreferenceService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DataGridTableOptionsComponent, isStandalone: true, selector: "cauca-data-grid-table-options", inputs: { gridName: "gridName", showColumnViewer: "showColumnViewer", allColumns: "allColumns" }, outputs: { densityChanged: "densityChanged", columnsChanged: "columnsChanged" }, viewQueries: [{ propertyName: "columnViewer", first: true, predicate: ButtonPopoverComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"table-options-bar\">\n <div class=\"table-options\">\n @if (showColumnViewer) { <cauca-button-popover [buttonLabel]=\"'dataGrid.columns' | translate\" buttonIcon=\"view_column\">\n <mat-card>\n <mat-card-content>\n <div class=\"columns\">\n @for (column of columns; track column) {\n <mat-checkbox color=\"primary\" [(ngModel)]=\"column.selected\"\n (change)=\"onColumnsChanged()\">\n {{column.label}}\n </mat-checkbox>\n }\n </div>\n </mat-card-content>\n <mat-card-actions>\n <cauca-stroked-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.reset\" [translateLabel]=\"true\" />\n <cauca-raised-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.showAll\" [translateLabel]=\"true\" />\n </mat-card-actions>\n </mat-card>\n </cauca-button-popover> }\n <cauca-basic-button color=\"primary\" [matMenuTriggerFor]=\"densityMenu\" class=\"open-menu-button\" [icon]=\"currentDensityIcon\" label=\"dataGrid.density.title\" [translateLabel]=\"true\" />\n </div>\n\n <ng-content select=\"[customFilter]\"> </ng-content>\n</div>\n\n<mat-menu #densityMenu=\"matMenu\">\n <cauca-menu-item label=\"dataGrid.density.compact\" [translateLabel]=\"true\" icon=\"density_small\" (buttonClick)=\"changeDensity(density.Compact)\" class=\"density-compact\" />\n <cauca-menu-item label=\"dataGrid.density.standard\" [translateLabel]=\"true\" icon=\"density_medium\" (buttonClick)=\"changeDensity(density.Standard)\" class=\"density-standard\" />\n <cauca-menu-item label=\"dataGrid.density.comfortable\" [translateLabel]=\"true\" icon=\"density_large\" (buttonClick)=\"changeDensity(density.Comfortable)\" class=\"density-comfortable\" />\n</mat-menu>", styles: [".table-options-bar{display:flex;padding:8px 16px;align-items:center;align-self:stretch}.table-options{flex:1 0 0;display:flex;gap:8px;align-items:center;align-content:normal;text-transform:capitalize}.columns{display:flex;flex-direction:column;max-height:650px}mat-card{box-shadow:0 8px 10px 1px #00000024}mat-card>mat-card-actions{gap:32px;padding:16px;justify-content:space-between}.column-viewer-header{display:flex;flex-direction:row-reverse;padding:4px 4px 0px px 0px}.mat-mdc-icon-button.mat-mdc-button-base{height:24px}mat-card-content{padding:0 8px}.button-small{height:32px;line-height:18px}.small-icon-button{height:24px;width:24px;padding:0}.small-icon-button>span{height:24px!important;width:24px!important}.small-icon-button>.mat-mdc-icon-button .mat-mdc-button-touch-target{display:none;height:24px!important;width:24px!important}.small-icon{font-size:18px;height:unset;width:unset}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: ButtonPopoverComponent, selector: "cauca-button-popover", inputs: ["buttonLabel", "buttonIcon", "color"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: StrokedButtonComponent, selector: "cauca-stroked-button" }, { kind: "component", type: RaisedButtonComponent, selector: "cauca-raised-button" }, { kind: "component", type: BasicButtonComponent, selector: "cauca-basic-button" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4.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: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: MenuItemComponent, selector: "cauca-menu-item", inputs: ["translateLabel", "trigger"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridTableOptionsComponent, decorators: [{
type: Component,
args: [{ selector: 'cauca-data-grid-table-options', imports: [MatCardModule, ButtonPopoverComponent, MatCheckboxModule, StrokedButtonComponent, RaisedButtonComponent, BasicButtonComponent, MatMenuModule, FormsModule, TranslateModule, MenuItemComponent], template: "<div class=\"table-options-bar\">\n <div class=\"table-options\">\n @if (showColumnViewer) { <cauca-button-popover [buttonLabel]=\"'dataGrid.columns' | translate\" buttonIcon=\"view_column\">\n <mat-card>\n <mat-card-content>\n <div class=\"columns\">\n @for (column of columns; track column) {\n <mat-checkbox color=\"primary\" [(ngModel)]=\"column.selected\"\n (change)=\"onColumnsChanged()\">\n {{column.label}}\n </mat-checkbox>\n }\n </div>\n </mat-card-content>\n <mat-card-actions>\n <cauca-stroked-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.reset\" [translateLabel]=\"true\" />\n <cauca-raised-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.showAll\" [translateLabel]=\"true\" />\n </mat-card-actions>\n </mat-card>\n </cauca-button-popover> }\n <cauca-basic-button color=\"primary\" [matMenuTriggerFor]=\"densityMenu\" class=\"open-menu-button\" [icon]=\"currentDensityIcon\" label=\"dataGrid.density.title\" [translateLabel]=\"true\" />\n </div>\n\n <ng-content select=\"[customFilter]\"> </ng-content>\n</div>\n\n<mat-menu #densityMenu=\"matMenu\">\n <cauca-menu-item label=\"dataGrid.density.compact\" [translateLabel]=\"true\" icon=\"density_small\" (buttonClick)=\"changeDensity(density.Compact)\" class=\"density-compact\" />\n <cauca-menu-item label=\"dataGrid.density.standard\" [translateLabel]=\"true\" icon=\"density_medium\" (buttonClick)=\"changeDensity(density.Standard)\" class=\"density-standard\" />\n <cauca-menu-item label=\"dataGrid.density.comfortable\" [translateLabel]=\"true\" icon=\"density_large\" (buttonClick)=\"changeDensity(density.Comfortable)\" class=\"density-comfortable\" />\n</mat-menu>", styles: [".table-options-bar{display:flex;padding:8px 16px;align-items:center;align-self:stretch}.table-options{flex:1 0 0;display:flex;gap:8px;align-items:center;align-content:normal;text-transform:capitalize}.columns{display:flex;flex-direction:column;max-height:650px}mat-card{box-shadow:0 8px 10px 1px #00000024}mat-card>mat-card-actions{gap:32px;padding:16px;justify-content:space-between}.column-viewer-header{display:flex;flex-direction:row-reverse;padding:4px 4px 0px px 0px}.mat-mdc-icon-button.mat-mdc-button-base{height:24px}mat-card-content{padding:0 8px}.button-small{height:32px;line-height:18px}.small-icon-button{height:24px;width:24px;padding:0}.small-icon-button>span{height:24px!important;width:24px!important}.small-icon-button>.mat-mdc-icon-button .mat-mdc-button-touch-target{display:none;height:24px!important;width:24px!important}.small-icon{font-size:18px;height:unset;width:unset}\n"] }]
}], ctorParameters: () => [{ type: PreferenceService }], propDecorators: { gridName: [{
type: Input,
args: [{ required: true }]
}], showColumnViewer: [{
type: Input
}], densityChanged: [{
type: Output
}], allColumns: [{
type: Input
}], columnsChanged: [{
type: Output
}], columnViewer: [{
type: ViewChild,
args: [ButtonPopoverComponent, { static: true }]
}] } });
class DataGridProgressSpinerComponent {
constructor() {
this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
this.useBackground = input(true, ...(ngDevMode ? [{ debugName: "useBackground" }] : []));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridProgressSpinerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DataGridProgressSpinerComponent, isStandalone: true, selector: "cauca-data-grid-progress-spiner", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, useBackground: { classPropertyName: "useBackground", publicName: "useBackground", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isLoading()) {\n <div class=\"spiner-container\" [class.use-background]=\"useBackground()\">\n <mat-progress-spinner\n color=\"primary\"\n mode=\"indeterminate\">\n </mat-progress-spinner>\n </div>\n}", styles: [".spiner-container{display:flex;justify-content:center;align-items:center}.use-background{background:#fff}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridProgressSpinerComponent, decorators: [{
type: Component,
args: [{ selector: 'cauca-data-grid-progress-spiner', imports: [MatProgressSpinnerModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isLoading()) {\n <div class=\"spiner-container\" [class.use-background]=\"useBackground()\">\n <mat-progress-spinner\n color=\"primary\"\n mode=\"indeterminate\">\n </mat-progress-spinner>\n </div>\n}", styles: [".spiner-container{display:flex;justify-content:center;align-items:center}.use-background{background:#fff}\n"] }]
}] });
class DataGridComponent extends BaseDataGridComponent {
constructor(translateService, preferenceService) {
super(translateService, preferenceService);
this.data = [];
this.showLoadingError = false;
this.isLoading = false;
this.allowReordering = false;
this.rowDrop = new EventEmitter();
this.showPaginator = input(false, ...(ngDevMode ? [{ debugName: "showPaginator" }] : []));
this.showFooter = input(false, ...(ngDevMode ? [{ debugName: "showFooter" }] : []));
this.showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : []));
this.headerColor = input(undefined, ...(ngDevMode ? [{ debugName: "headerColor" }] : []));
this.showRefreshButton = input(false, ...(ngDevMode ? [{ debugName: "showRefreshButton" }] : []));
this.refreshData = output();
this.dragDisabled = true;
this.currentFilter = '';
this.dataSource = new MatTableDataSource([]);
effect(() => {
this.setUpPaginator(this.paginator, this.showPaginator());
});
}
onRefreshData() {
this.dataSource.data = [];
this.refreshData.emit();
}
applyFilter(filter) {
if (this.paginator) {
this.paginator.firstPage();
}
this.dataSource.filter = toLowerCaseAndWithoutDiacritics(filter);
}
setUpSort(sort) {
this.sort = sort;
this.dataSource.sort = this.sort;
}
getData() {
return this.dataSource.data;
}
getFilteredData() {
return this.dataSource.filteredData;
}
refreshDisplayedColumns(columns) {
this.onColumnsChanged(columns);
}
rowDropped(event) {
const data = this.getData();
const filteredData = this.getFilteredData();
const fromIndex = data.findIndex((d) => d === filteredData[event.previousIndex]);
const toIndex = data.findIndex((d) => d === filteredData[event.currentIndex]);
if (fromIndex >= 0 && toIndex >= 0) {
moveItemInArray(data, fromIndex, toIndex);
this.renderRows();
this.rowDrop.emit(new DataGridRowDropEvent({
item: data[fromIndex],
data,
fromIndex,
toIndex,
}));
}
}
setUpPaginator(paginator, showPaginator) {
this.dataSource.paginator = paginator && showPaginator ? paginator : null;
}
showColumnsWhenTableOptionsIsFalse() {
if (this.allowReordering) {
this.allDisplayedColumns.set(['position', ...this.displayedColumns]);
}
else {
this.allDisplayedColumns.set([...this.displayedColumns]);
}
if (this.showExpandButton() && !this.allDisplayedColumns().includes('expand')) {
this.allDisplayedColumns.set(['expand', ...this.displayedColumns]);
}
}
updateColumnsWhenNeeded(changes) {
if (changes.displayedColumns || changes.allowReordering) {
if (this.allowReordering && !this.allDisplayedColumns().includes('position')) {
this.allDisplayedColumns.set(['position', ...this.allDisplayedColumns()]);
}
else {
this.allDisplayedColumns.set([...this.allDisplayedColumns()]);
}
}
if (this.showExpandButton() && !this.allDisplayedColumns().includes('expand')) {
this.allDisplayedColumns.set(['expand', ...this.displayedColumns]);
}
}
onColumnsChanged(columns) {
super.onColumnsChanged(columns);
if (this.allowReordering && !columns.includes('position')) {
this.allDisplayedColumns.set(['position', ...columns]);
}
else {
this.allDisplayedColumns.set([...columns]);
}
if (this.showExpandButton() && !this.allDisplayedColumns().includes('expand')) {
this.allDisplayedColumns.set(['expand', ...this.displayedColumns]);
}
}
setUpFilterPredicate() {
if (this.filterPredicate) {
this.dataSource.filterPredicate = this.filterPredicate;
}
else if (this.searchableColumns?.length > 0) {
this.dataSource.filterPredicate = (data, filter) => {
return this.searchableColumns.some((column) => {
const value = data[column];
return value?.toString().toLowerCaseAndWithoutDiacritics().includes(filter);
});
};
}
}
forceReloadFilter() {
// eslint-disable-next-line no-self-assign
this.dataSource.filter = this.dataSource.filter;
}
updateDataWhenNeeded(changes) {
if (changes.data?.currentValue && this.data) {
this.setData(this.data);
}
}
async setData(data) {
if (Array.isArray(data)) {
this.dataSource.data = data;
setTimeout(() => {
this.table.setNoDataRow(this.noDataRow);
this.table.renderRows();
}, 0);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridComponent, deps: [{ token: i1$2.TranslateService }, { token: PreferenceService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DataGridComponent, isStandalone: true, selector: "cauca-data-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, showLoadingError: { classPropertyName: "showLoadingError", publicName: "showLoadingError", isSignal: false, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: false, isRequired: false, transformFunction: null }, allowReordering: { classPropertyName: "allowReordering", publicName: "allowReordering", isSignal: false, isRequired: false, transformFunction: null }, searchableColumns: { classPropertyName: "searchableColumns", publicName: "searchableColumns", isSignal: false, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: false, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, showFooter