@cauca-911/datagrid 22.3.0 → 22.3.2-beta1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -173,6 +173,8 @@ class DataGridHeaderComponent {
|
|
|
173
173
|
...(ngDevMode ? [{ debugName: "addButtonLabel" }] : /* istanbul ignore next */ []));
|
|
174
174
|
this.searchPlaceholder = input('', /* @ts-ignore */
|
|
175
175
|
...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
176
|
+
this.showSearchBar = input(true, /* @ts-ignore */
|
|
177
|
+
...(ngDevMode ? [{ debugName: "showSearchBar" }] : /* istanbul ignore next */ []));
|
|
176
178
|
this.disableAddButton = input(false, /* @ts-ignore */
|
|
177
179
|
...(ngDevMode ? [{ debugName: "disableAddButton" }] : /* istanbul ignore next */ []));
|
|
178
180
|
this.filterChange = output();
|
|
@@ -203,12 +205,12 @@ class DataGridHeaderComponent {
|
|
|
203
205
|
this.addButtonClick.emit();
|
|
204
206
|
}
|
|
205
207
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DataGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
206
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: DataGridHeaderComponent, isStandalone: true, selector: "cauca-data-grid-header", inputs: { showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null }, showExportMenu: { classPropertyName: "showExportMenu", publicName: "showExportMenu", isSignal: true, isRequired: false, transformFunction: null }, exportFormats: { classPropertyName: "exportFormats", publicName: "exportFormats", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disableAddButton: { classPropertyName: "disableAddButton", publicName: "disableAddButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", addButtonClick: "addButtonClick", refreshRequest: "refreshRequest", exportRequest: "exportRequest" }, ngImport: i0, template: "<div class=\"grid-header\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\r\n
|
|
208
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: DataGridHeaderComponent, isStandalone: true, selector: "cauca-data-grid-header", inputs: { showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null }, showExportMenu: { classPropertyName: "showExportMenu", publicName: "showExportMenu", isSignal: true, isRequired: false, transformFunction: null }, exportFormats: { classPropertyName: "exportFormats", publicName: "exportFormats", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showSearchBar: { classPropertyName: "showSearchBar", publicName: "showSearchBar", isSignal: true, isRequired: false, transformFunction: null }, disableAddButton: { classPropertyName: "disableAddButton", publicName: "disableAddButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", addButtonClick: "addButtonClick", refreshRequest: "refreshRequest", exportRequest: "exportRequest" }, ngImport: i0, template: "<div class=\"grid-header\">\r\n\r\n @if (showSearchBar()) {\r\n <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\r\n @if (showClearButton()) { <cauca-icon-button matPrefix (buttonClick)=\"clearSearchValue()\" icon=\"close\" /> }\r\n <mat-label>{{ 'dataGrid.keywordsLabel' | translate}}</mat-label>\r\n <input matInput [formControl]=\"filterControl\" [placeholder]=\"searchPlaceholder()\">\r\n <mat-icon matSuffix>search</mat-icon>\r\n </mat-form-field>\r\n }\r\n\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n\r\n @if (showRefreshButton()) { <cauca-icon-button (buttonClick)=\"onRefresh()\" icon=\"refresh\" class=\"grid-refresh-button\" /> }\r\n\r\n @if (showExportMenu()) {\r\n <cauca-data-grid-export-menu [formats]=\"exportFormats()\" (exportRequest)=\"exportRequest.emit($event)\" class=\"grid-export-menu\">\r\n <ng-content select=\"[exportItem]\" ngProjectAs=\"[exportItem]\" />\r\n </cauca-data-grid-export-menu>\r\n }\r\n\r\n @if (showAddButton()) { <cauca-raised-button icon=\"add\" color=\"primary\" [label]=\"addButtonLabel()\" [translateLabel]=\"false\" class=\"grid-new-button\" [isDisabled]=\"disableAddButton()\" (buttonClick)=\"onAddButtonClick()\" /> }\r\n</div>", styles: [".grid-header{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:nowrap;align-content:normal;padding:0 16px}.grid-search-box{display:block;flex-grow:1;flex-basis:0;min-width:0;align-self:auto}.grid-refresh-button,.grid-new-button{flex-shrink:0}@media(max-width:500px){.grid-header{gap:8px}}.grid-new-button{display:block;flex-basis:auto;align-self:auto;margin-left: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$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DataGridExportMenuComponent, selector: "cauca-data-grid-export-menu", inputs: ["formats"], outputs: ["exportRequest"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
207
209
|
}
|
|
208
210
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DataGridHeaderComponent, decorators: [{
|
|
209
211
|
type: Component,
|
|
210
|
-
args: [{ selector: 'cauca-data-grid-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatFormFieldModule, IconButtonComponent, RaisedButtonComponent, MatInputModule, ReactiveFormsModule, TranslatePipe, MatIcon, DataGridExportMenuComponent], template: "<div class=\"grid-header\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\r\n
|
|
211
|
-
}], propDecorators: { showAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddButton", required: false }] }], showRefreshButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefreshButton", required: false }] }], showExportMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportMenu", required: false }] }], exportFormats: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFormats", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], disableAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAddButton", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], addButtonClick: [{ type: i0.Output, args: ["addButtonClick"] }], refreshRequest: [{ type: i0.Output, args: ["refreshRequest"] }], exportRequest: [{ type: i0.Output, args: ["exportRequest"] }] } });
|
|
212
|
+
args: [{ selector: 'cauca-data-grid-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatFormFieldModule, IconButtonComponent, RaisedButtonComponent, MatInputModule, ReactiveFormsModule, TranslatePipe, MatIcon, DataGridExportMenuComponent], template: "<div class=\"grid-header\">\r\n\r\n @if (showSearchBar()) {\r\n <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\r\n @if (showClearButton()) { <cauca-icon-button matPrefix (buttonClick)=\"clearSearchValue()\" icon=\"close\" /> }\r\n <mat-label>{{ 'dataGrid.keywordsLabel' | translate}}</mat-label>\r\n <input matInput [formControl]=\"filterControl\" [placeholder]=\"searchPlaceholder()\">\r\n <mat-icon matSuffix>search</mat-icon>\r\n </mat-form-field>\r\n }\r\n\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n\r\n @if (showRefreshButton()) { <cauca-icon-button (buttonClick)=\"onRefresh()\" icon=\"refresh\" class=\"grid-refresh-button\" /> }\r\n\r\n @if (showExportMenu()) {\r\n <cauca-data-grid-export-menu [formats]=\"exportFormats()\" (exportRequest)=\"exportRequest.emit($event)\" class=\"grid-export-menu\">\r\n <ng-content select=\"[exportItem]\" ngProjectAs=\"[exportItem]\" />\r\n </cauca-data-grid-export-menu>\r\n }\r\n\r\n @if (showAddButton()) { <cauca-raised-button icon=\"add\" color=\"primary\" [label]=\"addButtonLabel()\" [translateLabel]=\"false\" class=\"grid-new-button\" [isDisabled]=\"disableAddButton()\" (buttonClick)=\"onAddButtonClick()\" /> }\r\n</div>", styles: [".grid-header{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:nowrap;align-content:normal;padding:0 16px}.grid-search-box{display:block;flex-grow:1;flex-basis:0;min-width:0;align-self:auto}.grid-refresh-button,.grid-new-button{flex-shrink:0}@media(max-width:500px){.grid-header{gap:8px}}.grid-new-button{display:block;flex-basis:auto;align-self:auto;margin-left:auto}.grid-new-button>mat-icon{color:inherit}\n"] }]
|
|
213
|
+
}], propDecorators: { showAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddButton", required: false }] }], showRefreshButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefreshButton", required: false }] }], showExportMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportMenu", required: false }] }], exportFormats: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFormats", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], showSearchBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearchBar", required: false }] }], disableAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAddButton", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], addButtonClick: [{ type: i0.Output, args: ["addButtonClick"] }], refreshRequest: [{ type: i0.Output, args: ["refreshRequest"] }], exportRequest: [{ type: i0.Output, args: ["exportRequest"] }] } });
|
|
212
214
|
|
|
213
215
|
var Density;
|
|
214
216
|
(function (Density) {
|
|
@@ -519,6 +521,8 @@ class BaseDataGridComponent {
|
|
|
519
521
|
...(ngDevMode ? [{ debugName: "addButtonLabel" }] : /* istanbul ignore next */ []));
|
|
520
522
|
this.searchPlaceholder = input('', /* @ts-ignore */
|
|
521
523
|
...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
524
|
+
this.showSearchBar = input(true, /* @ts-ignore */
|
|
525
|
+
...(ngDevMode ? [{ debugName: "showSearchBar" }] : /* istanbul ignore next */ []));
|
|
522
526
|
this.searchableColumns = input(/* @ts-ignore */
|
|
523
527
|
...(ngDevMode ? [undefined, { debugName: "searchableColumns" }] : /* istanbul ignore next */ []));
|
|
524
528
|
this.showTableOptions = input(false, /* @ts-ignore */
|
|
@@ -629,7 +633,7 @@ class BaseDataGridComponent {
|
|
|
629
633
|
return columns.filter(column => !GRID_OWNED_COLUMNS.includes(column));
|
|
630
634
|
}
|
|
631
635
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: BaseDataGridComponent, deps: [{ token: i1$3.TranslateService }, { token: PREFERENCE_SERVICE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
632
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: BaseDataGridComponent, isStandalone: true, selector: "ng-component", inputs: { resourceName: { classPropertyName: "resourceName", publicName: "resourceName", isSignal: true, isRequired: true, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: true, isRequired: false, transformFunction: null }, disableAddButton: { classPropertyName: "disableAddButton", publicName: "disableAddButton", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchableColumns: { classPropertyName: "searchableColumns", publicName: "searchableColumns", isSignal: true, isRequired: false, transformFunction: null }, showTableOptions: { classPropertyName: "showTableOptions", publicName: "showTableOptions", isSignal: true, isRequired: false, transformFunction: null }, showColumnViewer: { classPropertyName: "showColumnViewer", publicName: "showColumnViewer", isSignal: true, 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 }, allowExport: { classPropertyName: "allowExport", publicName: "allowExport", isSignal: true, isRequired: false, transformFunction: null }, exportFileName: { classPropertyName: "exportFileName", publicName: "exportFileName", isSignal: true, isRequired: false, transformFunction: null }, exportRows: { classPropertyName: "exportRows", publicName: "exportRows", isSignal: true, isRequired: false, transformFunction: null }, exportFormats: { classPropertyName: "exportFormats", publicName: "exportFormats", isSignal: true, isRequired: false, transformFunction: null }, exportTitle: { classPropertyName: "exportTitle", publicName: "exportTitle", 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 }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
636
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: BaseDataGridComponent, isStandalone: true, selector: "ng-component", inputs: { resourceName: { classPropertyName: "resourceName", publicName: "resourceName", isSignal: true, isRequired: true, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: true, isRequired: false, transformFunction: null }, disableAddButton: { classPropertyName: "disableAddButton", publicName: "disableAddButton", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showSearchBar: { classPropertyName: "showSearchBar", publicName: "showSearchBar", isSignal: true, isRequired: false, transformFunction: null }, searchableColumns: { classPropertyName: "searchableColumns", publicName: "searchableColumns", isSignal: true, isRequired: false, transformFunction: null }, showTableOptions: { classPropertyName: "showTableOptions", publicName: "showTableOptions", isSignal: true, isRequired: false, transformFunction: null }, showColumnViewer: { classPropertyName: "showColumnViewer", publicName: "showColumnViewer", isSignal: true, 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 }, allowExport: { classPropertyName: "allowExport", publicName: "allowExport", isSignal: true, isRequired: false, transformFunction: null }, exportFileName: { classPropertyName: "exportFileName", publicName: "exportFileName", isSignal: true, isRequired: false, transformFunction: null }, exportRows: { classPropertyName: "exportRows", publicName: "exportRows", isSignal: true, isRequired: false, transformFunction: null }, exportFormats: { classPropertyName: "exportFormats", publicName: "exportFormats", isSignal: true, isRequired: false, transformFunction: null }, exportTitle: { classPropertyName: "exportTitle", publicName: "exportTitle", 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 }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
633
637
|
}
|
|
634
638
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: BaseDataGridComponent, decorators: [{
|
|
635
639
|
type: Component,
|
|
@@ -638,7 +642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
|
|
|
638
642
|
}], ctorParameters: () => [{ type: i1$3.TranslateService }, { type: undefined, decorators: [{
|
|
639
643
|
type: Inject,
|
|
640
644
|
args: [PREFERENCE_SERVICE_TOKEN]
|
|
641
|
-
}] }], propDecorators: { resourceName: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceName", required: true }] }], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: false }] }], showAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddButton", required: false }] }], disableAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAddButton", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchableColumns", required: false }] }], showTableOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTableOptions", required: false }] }], showColumnViewer: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnViewer", required: false }] }], showPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPaginator", required: false }] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }], showExpandButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpandButton", required: false }] }], allowExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowExport", required: false }] }], exportFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFileName", required: false }] }], exportRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportRows", required: false }] }], exportFormats: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFormats", required: false }] }], exportTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportTitle", required: false }] }], addButtonClick: [{ type: i0.Output, args: ["addButtonClick"] }], header: [{
|
|
645
|
+
}] }], propDecorators: { resourceName: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceName", required: true }] }], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: false }] }], showAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddButton", required: false }] }], disableAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAddButton", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], showSearchBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearchBar", required: false }] }], searchableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchableColumns", required: false }] }], showTableOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTableOptions", required: false }] }], showColumnViewer: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnViewer", required: false }] }], showPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPaginator", required: false }] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }], showExpandButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpandButton", required: false }] }], allowExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowExport", required: false }] }], exportFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFileName", required: false }] }], exportRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportRows", required: false }] }], exportFormats: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFormats", required: false }] }], exportTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportTitle", required: false }] }], addButtonClick: [{ type: i0.Output, args: ["addButtonClick"] }], header: [{
|
|
642
646
|
type: ViewChild,
|
|
643
647
|
args: [DataGridHeaderComponent]
|
|
644
648
|
}], table: [{
|
|
@@ -920,7 +924,7 @@ class DataGridComponent extends BaseDataGridComponent {
|
|
|
920
924
|
}, 0);
|
|
921
925
|
}
|
|
922
926
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DataGridComponent, deps: [{ token: i1$3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
923
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: DataGridComponent, isStandalone: true, selector: "cauca-data-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, showLoadingError: { classPropertyName: "showLoadingError", publicName: "showLoadingError", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, allowReordering: { classPropertyName: "allowReordering", publicName: "allowReordering", isSignal: true, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, headerColor: { classPropertyName: "headerColor", publicName: "headerColor", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowDrop: "rowDrop", refreshData: "refreshData" }, queries: [{ propertyName: "rowDetailTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (showHeader()) {\r\n <cauca-data-grid-header [disableAddButton]=\"disableAddButton()\" [showAddButton]=\"showAddButton()\" [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\"\r\n [showExportMenu]=\"canExport()\" [exportFormats]=\"exportFormats()\" (exportRequest)=\"onExportRequest($event)\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n <ng-content select=\"[exportItem]\" ngProjectAs=\"[exportItem]\" />\r\n </cauca-data-grid-header>\r\n}\r\n\r\n@if (showTableOptions()) {\r\n <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n <ng-content\r\n select=\"[customFilter]\"\r\n ngProjectAs=\"[customFilter]\">\r\n </ng-content>\r\n </cauca-data-grid-table-options>\r\n}\r\n\r\n<table matSort mat-table [dataSource]=\"dataSource\" cdkDropList [cdkDropListData]=\"dataSource\"\r\n (cdkDropListDropped)=\"rowDropped($event)\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n\r\n @if (showExpandButton()) {\r\n <ng-container matColumnDef=\"expand\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <div class=\"align-commands\">\r\n <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n\r\n @if (allowReordering()) {\r\n <ng-container matColumnDef=\"position\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell (mousedown)=\"dragDisabled = false\" (mouseup)=\"dragDisabled = true\" *matCellDef=\"let group\">\r\n <mat-icon class=\"reorder-icon\" cdkDragHandle>drag_indicator</mat-icon>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n\r\n <ng-content></ng-content>\r\n\r\n <tr class=\"grid-header\" [style.background-color]=\"headerColor()\" mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns();\" cdkDrag [cdkDragData]=\"row\"\r\n [cdkDragDisabled]=\"dragDisabled\" (cdkDragReleased)=\"dragDisabled = true\"\r\n [class.compact]=\"preference.gridDensity === density.Compact\" [class.standard]=\"preference.gridDensity === density.Standard\"\r\n [class.comfortable]=\"preference.gridDensity === density.Comfortable\"></tr>\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n <div class=\"grid-element-detail\">\r\n @if (row === expandedElement()) {\r\n <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n @if (showFooter()) {\r\n <tr mat-footer-row *matFooterRowDef=\"allDisplayedColumns(); sticky: false\"></tr>\r\n }\r\n\r\n @if (!isLoading()) {\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n @if (!showLoadingError() && !isLoading()) {\r\n <td class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"noData\" />\r\n </td>\r\n }\r\n @if (showLoadingError()) {\r\n <td class=\"mat-cell data-grid-message error-message\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"error\" />\r\n </td>\r\n }\r\n </tr>\r\n }\r\n\r\n</table>\r\n\r\n<cauca-data-grid-progress-spiner [isLoading]=\"isLoading()\" />\r\n\r\n@if (showPaginator()) {\r\n <mat-paginator #paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n}", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}tr.mat-mdc-row:hover{background:#f5f5f5}.mat-column-position{cursor:move;width:40px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;background:#fff;opacity:1;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;width:100%}.cdk-drag-preview tr,.cdk-drag-preview .mat-column-name{width:100%}.reorder-icon{vertical-align:middle;padding:0;color:#707070}.icon-text{display:flex;align-items:center;gap:8px}.cdk-drag-placeholder{background:gray;opacity:.5}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.error-message{color:red;mat-icon-color:red}.mat-column-expand{width:72px}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: // still needed
|
|
927
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: DataGridComponent, isStandalone: true, selector: "cauca-data-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, showLoadingError: { classPropertyName: "showLoadingError", publicName: "showLoadingError", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, allowReordering: { classPropertyName: "allowReordering", publicName: "allowReordering", isSignal: true, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, headerColor: { classPropertyName: "headerColor", publicName: "headerColor", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowDrop: "rowDrop", refreshData: "refreshData" }, queries: [{ propertyName: "rowDetailTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (showHeader()) {\r\n <cauca-data-grid-header [disableAddButton]=\"disableAddButton()\" [showAddButton]=\"showAddButton()\" [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\" [showSearchBar]=\"showSearchBar()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\"\r\n [showExportMenu]=\"canExport()\" [exportFormats]=\"exportFormats()\" (exportRequest)=\"onExportRequest($event)\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n <ng-content select=\"[exportItem]\" ngProjectAs=\"[exportItem]\" />\r\n </cauca-data-grid-header>\r\n}\r\n\r\n@if (showTableOptions()) {\r\n <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n <ng-content\r\n select=\"[customFilter]\"\r\n ngProjectAs=\"[customFilter]\">\r\n </ng-content>\r\n </cauca-data-grid-table-options>\r\n}\r\n\r\n<table matSort mat-table [dataSource]=\"dataSource\" cdkDropList [cdkDropListData]=\"dataSource\"\r\n (cdkDropListDropped)=\"rowDropped($event)\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n\r\n @if (showExpandButton()) {\r\n <ng-container matColumnDef=\"expand\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <div class=\"align-commands\">\r\n <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n\r\n @if (allowReordering()) {\r\n <ng-container matColumnDef=\"position\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell (mousedown)=\"dragDisabled = false\" (mouseup)=\"dragDisabled = true\" *matCellDef=\"let group\">\r\n <mat-icon class=\"reorder-icon\" cdkDragHandle>drag_indicator</mat-icon>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n\r\n <ng-content></ng-content>\r\n\r\n <tr class=\"grid-header\" [style.background-color]=\"headerColor()\" mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns();\" cdkDrag [cdkDragData]=\"row\"\r\n [cdkDragDisabled]=\"dragDisabled\" (cdkDragReleased)=\"dragDisabled = true\"\r\n [class.compact]=\"preference.gridDensity === density.Compact\" [class.standard]=\"preference.gridDensity === density.Standard\"\r\n [class.comfortable]=\"preference.gridDensity === density.Comfortable\"></tr>\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n <div class=\"grid-element-detail\">\r\n @if (row === expandedElement()) {\r\n <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n @if (showFooter()) {\r\n <tr mat-footer-row *matFooterRowDef=\"allDisplayedColumns(); sticky: false\"></tr>\r\n }\r\n\r\n @if (!isLoading()) {\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n @if (!showLoadingError() && !isLoading()) {\r\n <td class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"noData\" />\r\n </td>\r\n }\r\n @if (showLoadingError()) {\r\n <td class=\"mat-cell data-grid-message error-message\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"error\" />\r\n </td>\r\n }\r\n </tr>\r\n }\r\n\r\n</table>\r\n\r\n<cauca-data-grid-progress-spiner [isLoading]=\"isLoading()\" />\r\n\r\n@if (showPaginator()) {\r\n <mat-paginator #paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n}", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}tr.mat-mdc-row:hover{background:#f5f5f5}.mat-column-position{cursor:move;width:40px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;background:#fff;opacity:1;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;width:100%}.cdk-drag-preview tr,.cdk-drag-preview .mat-column-name{width:100%}.reorder-icon{vertical-align:middle;padding:0;color:#707070}.icon-text{display:flex;align-items:center;gap:8px}.cdk-drag-placeholder{background:gray;opacity:.5}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.error-message{color:red;mat-icon-color:red}.mat-column-expand{width:72px}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: // still needed
|
|
924
928
|
// Material Table structure:
|
|
925
929
|
MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "directive", type:
|
|
926
930
|
// Drag and Drop:
|
|
@@ -928,7 +932,7 @@ class DataGridComponent extends BaseDataGridComponent {
|
|
|
928
932
|
// Material extras:
|
|
929
933
|
MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type:
|
|
930
934
|
// Custom Components:
|
|
931
|
-
DataGridHeaderComponent, selector: "cauca-data-grid-header", inputs: ["showAddButton", "showRefreshButton", "showExportMenu", "exportFormats", "addButtonLabel", "searchPlaceholder", "disableAddButton"], outputs: ["filterChange", "addButtonClick", "refreshRequest", "exportRequest"] }, { kind: "component", type: DataGridTableOptionsComponent, selector: "cauca-data-grid-table-options", inputs: ["gridName", "showColumnViewer", "allColumns"], outputs: ["densityChanged", "columnsChanged"] }, { kind: "component", type: DataGridProgressSpinerComponent, selector: "cauca-data-grid-progress-spiner", inputs: ["isLoading", "useBackground"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: StatusMessageComponent, selector: "cauca-status-message", inputs: ["type", "textKey", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
935
|
+
DataGridHeaderComponent, selector: "cauca-data-grid-header", inputs: ["showAddButton", "showRefreshButton", "showExportMenu", "exportFormats", "addButtonLabel", "searchPlaceholder", "showSearchBar", "disableAddButton"], outputs: ["filterChange", "addButtonClick", "refreshRequest", "exportRequest"] }, { kind: "component", type: DataGridTableOptionsComponent, selector: "cauca-data-grid-table-options", inputs: ["gridName", "showColumnViewer", "allColumns"], outputs: ["densityChanged", "columnsChanged"] }, { kind: "component", type: DataGridProgressSpinerComponent, selector: "cauca-data-grid-progress-spiner", inputs: ["isLoading", "useBackground"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: StatusMessageComponent, selector: "cauca-status-message", inputs: ["type", "textKey", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
932
936
|
}
|
|
933
937
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DataGridComponent, decorators: [{
|
|
934
938
|
type: Component,
|
|
@@ -952,7 +956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
|
|
|
952
956
|
DataGridProgressSpinerComponent,
|
|
953
957
|
IconButtonComponent,
|
|
954
958
|
StatusMessageComponent
|
|
955
|
-
], template: "@if (showHeader()) {\r\n <cauca-data-grid-header [disableAddButton]=\"disableAddButton()\" [showAddButton]=\"showAddButton()\" [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\"\r\n [showExportMenu]=\"canExport()\" [exportFormats]=\"exportFormats()\" (exportRequest)=\"onExportRequest($event)\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n <ng-content select=\"[exportItem]\" ngProjectAs=\"[exportItem]\" />\r\n </cauca-data-grid-header>\r\n}\r\n\r\n@if (showTableOptions()) {\r\n <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n <ng-content\r\n select=\"[customFilter]\"\r\n ngProjectAs=\"[customFilter]\">\r\n </ng-content>\r\n </cauca-data-grid-table-options>\r\n}\r\n\r\n<table matSort mat-table [dataSource]=\"dataSource\" cdkDropList [cdkDropListData]=\"dataSource\"\r\n (cdkDropListDropped)=\"rowDropped($event)\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n\r\n @if (showExpandButton()) {\r\n <ng-container matColumnDef=\"expand\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <div class=\"align-commands\">\r\n <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n\r\n @if (allowReordering()) {\r\n <ng-container matColumnDef=\"position\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell (mousedown)=\"dragDisabled = false\" (mouseup)=\"dragDisabled = true\" *matCellDef=\"let group\">\r\n <mat-icon class=\"reorder-icon\" cdkDragHandle>drag_indicator</mat-icon>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n\r\n <ng-content></ng-content>\r\n\r\n <tr class=\"grid-header\" [style.background-color]=\"headerColor()\" mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns();\" cdkDrag [cdkDragData]=\"row\"\r\n [cdkDragDisabled]=\"dragDisabled\" (cdkDragReleased)=\"dragDisabled = true\"\r\n [class.compact]=\"preference.gridDensity === density.Compact\" [class.standard]=\"preference.gridDensity === density.Standard\"\r\n [class.comfortable]=\"preference.gridDensity === density.Comfortable\"></tr>\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n <div class=\"grid-element-detail\">\r\n @if (row === expandedElement()) {\r\n <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n @if (showFooter()) {\r\n <tr mat-footer-row *matFooterRowDef=\"allDisplayedColumns(); sticky: false\"></tr>\r\n }\r\n\r\n @if (!isLoading()) {\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n @if (!showLoadingError() && !isLoading()) {\r\n <td class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"noData\" />\r\n </td>\r\n }\r\n @if (showLoadingError()) {\r\n <td class=\"mat-cell data-grid-message error-message\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"error\" />\r\n </td>\r\n }\r\n </tr>\r\n }\r\n\r\n</table>\r\n\r\n<cauca-data-grid-progress-spiner [isLoading]=\"isLoading()\" />\r\n\r\n@if (showPaginator()) {\r\n <mat-paginator #paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n}", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}tr.mat-mdc-row:hover{background:#f5f5f5}.mat-column-position{cursor:move;width:40px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;background:#fff;opacity:1;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;width:100%}.cdk-drag-preview tr,.cdk-drag-preview .mat-column-name{width:100%}.reorder-icon{vertical-align:middle;padding:0;color:#707070}.icon-text{display:flex;align-items:center;gap:8px}.cdk-drag-placeholder{background:gray;opacity:.5}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.error-message{color:red;mat-icon-color:red}.mat-column-expand{width:72px}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"] }]
|
|
959
|
+
], template: "@if (showHeader()) {\r\n <cauca-data-grid-header [disableAddButton]=\"disableAddButton()\" [showAddButton]=\"showAddButton()\" [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\" [showSearchBar]=\"showSearchBar()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\"\r\n [showExportMenu]=\"canExport()\" [exportFormats]=\"exportFormats()\" (exportRequest)=\"onExportRequest($event)\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n <ng-content select=\"[exportItem]\" ngProjectAs=\"[exportItem]\" />\r\n </cauca-data-grid-header>\r\n}\r\n\r\n@if (showTableOptions()) {\r\n <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n <ng-content\r\n select=\"[customFilter]\"\r\n ngProjectAs=\"[customFilter]\">\r\n </ng-content>\r\n </cauca-data-grid-table-options>\r\n}\r\n\r\n<table matSort mat-table [dataSource]=\"dataSource\" cdkDropList [cdkDropListData]=\"dataSource\"\r\n (cdkDropListDropped)=\"rowDropped($event)\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n\r\n @if (showExpandButton()) {\r\n <ng-container matColumnDef=\"expand\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <div class=\"align-commands\">\r\n <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n\r\n @if (allowReordering()) {\r\n <ng-container matColumnDef=\"position\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell (mousedown)=\"dragDisabled = false\" (mouseup)=\"dragDisabled = true\" *matCellDef=\"let group\">\r\n <mat-icon class=\"reorder-icon\" cdkDragHandle>drag_indicator</mat-icon>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n\r\n <ng-content></ng-content>\r\n\r\n <tr class=\"grid-header\" [style.background-color]=\"headerColor()\" mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns();\" cdkDrag [cdkDragData]=\"row\"\r\n [cdkDragDisabled]=\"dragDisabled\" (cdkDragReleased)=\"dragDisabled = true\"\r\n [class.compact]=\"preference.gridDensity === density.Compact\" [class.standard]=\"preference.gridDensity === density.Standard\"\r\n [class.comfortable]=\"preference.gridDensity === density.Comfortable\"></tr>\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n <div class=\"grid-element-detail\">\r\n @if (row === expandedElement()) {\r\n <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n @if (showFooter()) {\r\n <tr mat-footer-row *matFooterRowDef=\"allDisplayedColumns(); sticky: false\"></tr>\r\n }\r\n\r\n @if (!isLoading()) {\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n @if (!showLoadingError() && !isLoading()) {\r\n <td class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"noData\" />\r\n </td>\r\n }\r\n @if (showLoadingError()) {\r\n <td class=\"mat-cell data-grid-message error-message\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"error\" />\r\n </td>\r\n }\r\n </tr>\r\n }\r\n\r\n</table>\r\n\r\n<cauca-data-grid-progress-spiner [isLoading]=\"isLoading()\" />\r\n\r\n@if (showPaginator()) {\r\n <mat-paginator #paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n}", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}tr.mat-mdc-row:hover{background:#f5f5f5}.mat-column-position{cursor:move;width:40px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;background:#fff;opacity:1;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;width:100%}.cdk-drag-preview tr,.cdk-drag-preview .mat-column-name{width:100%}.reorder-icon{vertical-align:middle;padding:0;color:#707070}.icon-text{display:flex;align-items:center;gap:8px}.cdk-drag-placeholder{background:gray;opacity:.5}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.error-message{color:red;mat-icon-color:red}.mat-column-expand{width:72px}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"] }]
|
|
956
960
|
}], ctorParameters: () => [{ type: i1$3.TranslateService }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], showLoadingError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLoadingError", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], allowReordering: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowReordering", required: false }] }], filterPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPredicate", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], headerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerColor", required: false }] }], showRefreshButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefreshButton", required: false }] }], rowDrop: [{ type: i0.Output, args: ["rowDrop"] }], refreshData: [{ type: i0.Output, args: ["refreshData"] }], rowDetailTemplate: [{
|
|
957
961
|
type: ContentChild,
|
|
958
962
|
args: [TemplateRef]
|
|
@@ -1363,13 +1367,13 @@ class OdataGridComponent extends BaseDataGridComponent {
|
|
|
1363
1367
|
return state.filter !== undefined || state.sort !== undefined || state.pageIndex !== undefined || state.pageSize !== undefined;
|
|
1364
1368
|
}
|
|
1365
1369
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: OdataGridComponent, deps: [{ token: i1$3.TranslateService }, { token: OdataListingService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1366
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: OdataGridComponent, isStandalone: true, selector: "cauca-odata-grid", inputs: { showTableHeader: { classPropertyName: "showTableHeader", publicName: "showTableHeader", isSignal: true, isRequired: false, transformFunction: null }, persistState: { classPropertyName: "persistState", publicName: "persistState", isSignal: true, isRequired: false, transformFunction: null }, stateKey: { classPropertyName: "stateKey", publicName: "stateKey", isSignal: true, isRequired: false, transformFunction: null }, baseSort: { classPropertyName: "baseSort", publicName: "baseSort", isSignal: true, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, selectedRowId: { classPropertyName: "selectedRowId", publicName: "selectedRowId", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null }, maxExportRows: { classPropertyName: "maxExportRows", publicName: "maxExportRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", refreshRequested: "refreshRequested" }, providers: [OdataListingService], queries: [{ propertyName: "rowDetailTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (showHeader()) {\r\n <cauca-data-grid-header\r\n [disableAddButton]=\"disableAddButton()\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"refreshData()\"\r\n [showExportMenu]=\"canExport()\" [exportFormats]=\"exportFormats()\" (exportRequest)=\"onExportRequest($event)\"\r\n [showAddButton]=\"showAddButton()\"\r\n [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n <ng-content select=\"[exportItem]\" ngProjectAs=\"[exportItem]\" />\r\n </cauca-data-grid-header>\r\n}\r\n\r\n<ng-content select=\"[customHeader]\" ngProjectAs=\"[customHeader]\" />\r\n\r\n@if (showTableOptions()) {\r\n <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n <ng-content select=\"[customFilter]\" ngProjectAs=\"[customFilter]\" />\r\n </cauca-data-grid-table-options>\r\n}\r\n\r\n<div class=\"relative\">\r\n <table mat-table [dataSource]=\"listing.dataSource\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n @if (showExpandButton()) {\r\n <ng-container matColumnDef=\"expand\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <div class=\"align-commands\">\r\n <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <ng-content></ng-content>\r\n @if(showTableHeader()) {\r\n <tr mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n }\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns()\"\r\n [class.showClick]=\"itemClick.observers.length > 0\"\r\n [class.compact]=\"preference.gridDensity === density.Compact\"\r\n [class.standard]=\"preference.gridDensity === density.Standard\"\r\n [class.comfortable]=\"preference.gridDensity === density.Comfortable\"\r\n [class.selected]=\"selectedRowId() === row[idField()]\"\r\n (click)=\"itemClick.emit(row)\"\r\n onkeypress=\"itemClick.emit(row)\">\r\n </tr>\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n <div class=\"grid-element-detail\">\r\n @if (row === expandedElement()) {\r\n <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n <ng-container *matNoDataRow>\r\n @if(listing.loading() === false) {\r\n <ng-container>\r\n <tr class=\"mat-row\">\r\n @if (listing.error() === false) {\r\n <th class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"noData\" />\r\n </th>\r\n } @else {\r\n <th class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"error\" />\r\n </th>\r\n }\r\n </tr>\r\n </ng-container>\r\n }\r\n </ng-container>\r\n </table>\r\n\r\n <cauca-data-grid-progress-spiner [useBackground]=\"false\" [isLoading]=\"listing.loading()\" />\r\n\r\n</div>\r\n\r\n<mat-paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}.relative{position:relative}.mat-column-expand{width:72px}cauca-data-grid-progress-spiner{left:50%;top:50%;transform:translate(-50%,-50%);position:absolute;z-index:101}tr.mat-mdc-row{transition:background-color .2s ease-out .1s}tr.mat-mdc-row:hover{background:#f5f5f5}tr.mat-mdc-row.selected{background:#249edb14}tr.mat-mdc-row.selected:hover{background:#249edb1a}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.showClick{cursor:pointer}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type:
|
|
1370
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: OdataGridComponent, isStandalone: true, selector: "cauca-odata-grid", inputs: { showTableHeader: { classPropertyName: "showTableHeader", publicName: "showTableHeader", isSignal: true, isRequired: false, transformFunction: null }, persistState: { classPropertyName: "persistState", publicName: "persistState", isSignal: true, isRequired: false, transformFunction: null }, stateKey: { classPropertyName: "stateKey", publicName: "stateKey", isSignal: true, isRequired: false, transformFunction: null }, baseSort: { classPropertyName: "baseSort", publicName: "baseSort", isSignal: true, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, selectedRowId: { classPropertyName: "selectedRowId", publicName: "selectedRowId", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null }, maxExportRows: { classPropertyName: "maxExportRows", publicName: "maxExportRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", refreshRequested: "refreshRequested" }, providers: [OdataListingService], queries: [{ propertyName: "rowDetailTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (showHeader()) {\r\n <cauca-data-grid-header\r\n [disableAddButton]=\"disableAddButton()\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"refreshData()\"\r\n [showExportMenu]=\"canExport()\" [exportFormats]=\"exportFormats()\" (exportRequest)=\"onExportRequest($event)\"\r\n [showAddButton]=\"showAddButton()\"\r\n [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\"\r\n [showSearchBar]=\"showSearchBar()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n <ng-content select=\"[exportItem]\" ngProjectAs=\"[exportItem]\" />\r\n </cauca-data-grid-header>\r\n}\r\n\r\n<ng-content select=\"[customHeader]\" ngProjectAs=\"[customHeader]\" />\r\n\r\n@if (showTableOptions()) {\r\n <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n <ng-content select=\"[customFilter]\" ngProjectAs=\"[customFilter]\" />\r\n </cauca-data-grid-table-options>\r\n}\r\n\r\n<div class=\"relative\">\r\n <table mat-table [dataSource]=\"listing.dataSource\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n @if (showExpandButton()) {\r\n <ng-container matColumnDef=\"expand\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <div class=\"align-commands\">\r\n <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <ng-content></ng-content>\r\n @if(showTableHeader()) {\r\n <tr mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n }\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns()\"\r\n [class.showClick]=\"itemClick.observers.length > 0\"\r\n [class.compact]=\"preference.gridDensity === density.Compact\"\r\n [class.standard]=\"preference.gridDensity === density.Standard\"\r\n [class.comfortable]=\"preference.gridDensity === density.Comfortable\"\r\n [class.selected]=\"selectedRowId() === row[idField()]\"\r\n (click)=\"itemClick.emit(row)\"\r\n onkeypress=\"itemClick.emit(row)\">\r\n </tr>\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n <div class=\"grid-element-detail\">\r\n @if (row === expandedElement()) {\r\n <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n <ng-container *matNoDataRow>\r\n @if(listing.loading() === false) {\r\n <ng-container>\r\n <tr class=\"mat-row\">\r\n @if (listing.error() === false) {\r\n <th class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"noData\" />\r\n </th>\r\n } @else {\r\n <th class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"error\" />\r\n </th>\r\n }\r\n </tr>\r\n </ng-container>\r\n }\r\n </ng-container>\r\n </table>\r\n\r\n <cauca-data-grid-progress-spiner [useBackground]=\"false\" [isLoading]=\"listing.loading()\" />\r\n\r\n</div>\r\n\r\n<mat-paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}.relative{position:relative}.mat-column-expand{width:72px}cauca-data-grid-progress-spiner{left:50%;top:50%;transform:translate(-50%,-50%);position:absolute;z-index:101}tr.mat-mdc-row{transition:background-color .2s ease-out .1s}tr.mat-mdc-row:hover{background:#f5f5f5}tr.mat-mdc-row.selected{background:#249edb14}tr.mat-mdc-row.selected:hover{background:#249edb1a}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.showClick{cursor:pointer}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type:
|
|
1367
1371
|
// Material table structure:
|
|
1368
1372
|
MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type:
|
|
1369
1373
|
// Material extras
|
|
1370
1374
|
MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type:
|
|
1371
1375
|
// custom components
|
|
1372
|
-
DataGridHeaderComponent, selector: "cauca-data-grid-header", inputs: ["showAddButton", "showRefreshButton", "showExportMenu", "exportFormats", "addButtonLabel", "searchPlaceholder", "disableAddButton"], outputs: ["filterChange", "addButtonClick", "refreshRequest", "exportRequest"] }, { kind: "component", type: DataGridTableOptionsComponent, selector: "cauca-data-grid-table-options", inputs: ["gridName", "showColumnViewer", "allColumns"], outputs: ["densityChanged", "columnsChanged"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: DataGridProgressSpinerComponent, selector: "cauca-data-grid-progress-spiner", inputs: ["isLoading", "useBackground"] }, { kind: "component", type: StatusMessageComponent, selector: "cauca-status-message", inputs: ["type", "textKey", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1376
|
+
DataGridHeaderComponent, selector: "cauca-data-grid-header", inputs: ["showAddButton", "showRefreshButton", "showExportMenu", "exportFormats", "addButtonLabel", "searchPlaceholder", "showSearchBar", "disableAddButton"], outputs: ["filterChange", "addButtonClick", "refreshRequest", "exportRequest"] }, { kind: "component", type: DataGridTableOptionsComponent, selector: "cauca-data-grid-table-options", inputs: ["gridName", "showColumnViewer", "allColumns"], outputs: ["densityChanged", "columnsChanged"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: DataGridProgressSpinerComponent, selector: "cauca-data-grid-progress-spiner", inputs: ["isLoading", "useBackground"] }, { kind: "component", type: StatusMessageComponent, selector: "cauca-status-message", inputs: ["type", "textKey", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1373
1377
|
}
|
|
1374
1378
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: OdataGridComponent, decorators: [{
|
|
1375
1379
|
type: Component,
|
|
@@ -1388,7 +1392,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
|
|
|
1388
1392
|
IconButtonComponent,
|
|
1389
1393
|
DataGridProgressSpinerComponent,
|
|
1390
1394
|
StatusMessageComponent,
|
|
1391
|
-
], template: "@if (showHeader()) {\r\n <cauca-data-grid-header\r\n [disableAddButton]=\"disableAddButton()\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"refreshData()\"\r\n [showExportMenu]=\"canExport()\" [exportFormats]=\"exportFormats()\" (exportRequest)=\"onExportRequest($event)\"\r\n [showAddButton]=\"showAddButton()\"\r\n [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n <ng-content select=\"[exportItem]\" ngProjectAs=\"[exportItem]\" />\r\n </cauca-data-grid-header>\r\n}\r\n\r\n<ng-content select=\"[customHeader]\" ngProjectAs=\"[customHeader]\" />\r\n\r\n@if (showTableOptions()) {\r\n <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n <ng-content select=\"[customFilter]\" ngProjectAs=\"[customFilter]\" />\r\n </cauca-data-grid-table-options>\r\n}\r\n\r\n<div class=\"relative\">\r\n <table mat-table [dataSource]=\"listing.dataSource\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n @if (showExpandButton()) {\r\n <ng-container matColumnDef=\"expand\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <div class=\"align-commands\">\r\n <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <ng-content></ng-content>\r\n @if(showTableHeader()) {\r\n <tr mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n }\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns()\"\r\n [class.showClick]=\"itemClick.observers.length > 0\"\r\n [class.compact]=\"preference.gridDensity === density.Compact\"\r\n [class.standard]=\"preference.gridDensity === density.Standard\"\r\n [class.comfortable]=\"preference.gridDensity === density.Comfortable\"\r\n [class.selected]=\"selectedRowId() === row[idField()]\"\r\n (click)=\"itemClick.emit(row)\"\r\n onkeypress=\"itemClick.emit(row)\">\r\n </tr>\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n <div class=\"grid-element-detail\">\r\n @if (row === expandedElement()) {\r\n <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n <ng-container *matNoDataRow>\r\n @if(listing.loading() === false) {\r\n <ng-container>\r\n <tr class=\"mat-row\">\r\n @if (listing.error() === false) {\r\n <th class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"noData\" />\r\n </th>\r\n } @else {\r\n <th class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"error\" />\r\n </th>\r\n }\r\n </tr>\r\n </ng-container>\r\n }\r\n </ng-container>\r\n </table>\r\n\r\n <cauca-data-grid-progress-spiner [useBackground]=\"false\" [isLoading]=\"listing.loading()\" />\r\n\r\n</div>\r\n\r\n<mat-paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}.relative{position:relative}.mat-column-expand{width:72px}cauca-data-grid-progress-spiner{left:50%;top:50%;transform:translate(-50%,-50%);position:absolute;z-index:101}tr.mat-mdc-row{transition:background-color .2s ease-out .1s}tr.mat-mdc-row:hover{background:#f5f5f5}tr.mat-mdc-row.selected{background:#249edb14}tr.mat-mdc-row.selected:hover{background:#249edb1a}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.showClick{cursor:pointer}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"] }]
|
|
1395
|
+
], template: "@if (showHeader()) {\r\n <cauca-data-grid-header\r\n [disableAddButton]=\"disableAddButton()\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"refreshData()\"\r\n [showExportMenu]=\"canExport()\" [exportFormats]=\"exportFormats()\" (exportRequest)=\"onExportRequest($event)\"\r\n [showAddButton]=\"showAddButton()\"\r\n [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\"\r\n [showSearchBar]=\"showSearchBar()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n <ng-content select=\"[exportItem]\" ngProjectAs=\"[exportItem]\" />\r\n </cauca-data-grid-header>\r\n}\r\n\r\n<ng-content select=\"[customHeader]\" ngProjectAs=\"[customHeader]\" />\r\n\r\n@if (showTableOptions()) {\r\n <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n <ng-content select=\"[customFilter]\" ngProjectAs=\"[customFilter]\" />\r\n </cauca-data-grid-table-options>\r\n}\r\n\r\n<div class=\"relative\">\r\n <table mat-table [dataSource]=\"listing.dataSource\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n @if (showExpandButton()) {\r\n <ng-container matColumnDef=\"expand\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <div class=\"align-commands\">\r\n <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <ng-content></ng-content>\r\n @if(showTableHeader()) {\r\n <tr mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n }\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns()\"\r\n [class.showClick]=\"itemClick.observers.length > 0\"\r\n [class.compact]=\"preference.gridDensity === density.Compact\"\r\n [class.standard]=\"preference.gridDensity === density.Standard\"\r\n [class.comfortable]=\"preference.gridDensity === density.Comfortable\"\r\n [class.selected]=\"selectedRowId() === row[idField()]\"\r\n (click)=\"itemClick.emit(row)\"\r\n onkeypress=\"itemClick.emit(row)\">\r\n </tr>\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n <div class=\"grid-element-detail\">\r\n @if (row === expandedElement()) {\r\n <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n <ng-container *matNoDataRow>\r\n @if(listing.loading() === false) {\r\n <ng-container>\r\n <tr class=\"mat-row\">\r\n @if (listing.error() === false) {\r\n <th class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"noData\" />\r\n </th>\r\n } @else {\r\n <th class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"error\" />\r\n </th>\r\n }\r\n </tr>\r\n </ng-container>\r\n }\r\n </ng-container>\r\n </table>\r\n\r\n <cauca-data-grid-progress-spiner [useBackground]=\"false\" [isLoading]=\"listing.loading()\" />\r\n\r\n</div>\r\n\r\n<mat-paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}.relative{position:relative}.mat-column-expand{width:72px}cauca-data-grid-progress-spiner{left:50%;top:50%;transform:translate(-50%,-50%);position:absolute;z-index:101}tr.mat-mdc-row{transition:background-color .2s ease-out .1s}tr.mat-mdc-row:hover{background:#f5f5f5}tr.mat-mdc-row.selected{background:#249edb14}tr.mat-mdc-row.selected:hover{background:#249edb1a}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.showClick{cursor:pointer}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"] }]
|
|
1392
1396
|
}], ctorParameters: () => [{ type: i1$3.TranslateService }, { type: OdataListingService }], propDecorators: { showTableHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTableHeader", required: false }] }], persistState: [{ type: i0.Input, args: [{ isSignal: true, alias: "persistState", required: false }] }], stateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateKey", required: false }] }], baseSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseSort", required: false }] }], filterPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPredicate", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], selectedRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRowId", required: false }] }], idField: [{ type: i0.Input, args: [{ isSignal: true, alias: "idField", required: false }] }], showRefreshButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefreshButton", required: false }] }], maxExportRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxExportRows", required: false }] }], refreshRequested: [{ type: i0.Output, args: ["refreshRequested"] }], rowDetailTemplate: [{
|
|
1393
1397
|
type: ContentChild,
|
|
1394
1398
|
args: [TemplateRef]
|
|
@@ -1937,11 +1941,11 @@ class TranslationGridColumnComponent extends BaseGridColumnComponent {
|
|
|
1937
1941
|
return value == null ? null : this.translateService.instant(`${this.prefix()}.${value}`);
|
|
1938
1942
|
}
|
|
1939
1943
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: TranslationGridColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1940
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: TranslationGridColumnComponent, isStandalone: true, selector: "cauca-translation-grid-column", inputs: { prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => TranslationGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n <th mat-header-cell *matHeaderCellDef>\r\n {{ label() ?? capitalize(prop()) }}\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row\">\r\n @if (prefix() && row[prop()]) { <
|
|
1944
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: TranslationGridColumnComponent, isStandalone: true, selector: "cauca-translation-grid-column", inputs: { prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => TranslationGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n <th mat-header-cell *matHeaderCellDef>\r\n {{ label() ?? capitalize(prop()) }}\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row\">\r\n @if (prefix() && row[prop()]) { <cauca-column-label [value]=\"prefix()+'.'+row[prop()] | translate\" [showToolTip]=\"showToolTip()\" /> }\r\n @else if(row[prop()]) { <cauca-column-label [value]=\"row[prop()] | translate\" [showToolTip]=\"showToolTip()\" /> }\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "component", type: ColumnLabelComponent, selector: "cauca-column-label", inputs: ["value", "format", "showToolTip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1941
1945
|
}
|
|
1942
1946
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: TranslationGridColumnComponent, decorators: [{
|
|
1943
1947
|
type: Component,
|
|
1944
|
-
args: [{ selector: 'cauca-translation-grid-column', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => TranslationGridColumnComponent) }], imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, TranslatePipe, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n <th mat-header-cell *matHeaderCellDef>\r\n {{ label() ?? capitalize(prop()) }}\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row\">\r\n @if (prefix() && row[prop()]) { <
|
|
1948
|
+
args: [{ selector: 'cauca-translation-grid-column', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => TranslationGridColumnComponent) }], imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, TranslatePipe, MatFooterCell, MatFooterCellDef, MatTooltip, ColumnLabelComponent], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n <th mat-header-cell *matHeaderCellDef>\r\n {{ label() ?? capitalize(prop()) }}\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row\">\r\n @if (prefix() && row[prop()]) { <cauca-column-label [value]=\"prefix()+'.'+row[prop()] | translate\" [showToolTip]=\"showToolTip()\" /> }\r\n @else if(row[prop()]) { <cauca-column-label [value]=\"row[prop()] | translate\" [showToolTip]=\"showToolTip()\" /> }\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
1945
1949
|
}], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
|
|
1946
1950
|
type: Optional
|
|
1947
1951
|
}] }, { type: DataGridComponent, decorators: [{
|