ngx-st-tables 17.0.126 → 17.0.128
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.
|
@@ -1227,12 +1227,13 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
|
|
|
1227
1227
|
this.activeRowsEditing[row.id] = { ...row };
|
|
1228
1228
|
}
|
|
1229
1229
|
deleteRow(row, column, index) {
|
|
1230
|
+
const absoluteIndex = this.getAbsoluteIndex(index);
|
|
1230
1231
|
this.stDialogService
|
|
1231
1232
|
.showConfirmation('Are you sure you want to delete this row?')
|
|
1232
1233
|
.pipe(filter(StBaseService.notNull))
|
|
1233
1234
|
.subscribe(res => {
|
|
1234
1235
|
this.tableSource.data = this.tableSource.data.filter(data => data.id !== row.id);
|
|
1235
|
-
this.rowDeleted.emit({ row, index });
|
|
1236
|
+
this.rowDeleted.emit({ row, index: absoluteIndex });
|
|
1236
1237
|
this.changeDetectorRef.markForCheck();
|
|
1237
1238
|
});
|
|
1238
1239
|
}
|
|
@@ -1250,6 +1251,7 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
|
|
|
1250
1251
|
* The library updates its local copy optimistically.
|
|
1251
1252
|
*/
|
|
1252
1253
|
saveEditRow(row, column, index) {
|
|
1254
|
+
const absoluteIndex = this.getAbsoluteIndex(index);
|
|
1253
1255
|
let allowSave = true;
|
|
1254
1256
|
// Check if this specific row is being created or edited
|
|
1255
1257
|
const isCreatingThisRow = !!this.activeRowsCreating[row.id];
|
|
@@ -1285,19 +1287,19 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
|
|
|
1285
1287
|
// Emit edited row to parent for handling
|
|
1286
1288
|
this.saveEditedRow.emit({
|
|
1287
1289
|
row: { ...this.activeRowsEditing[row.id] },
|
|
1288
|
-
index:
|
|
1290
|
+
index: absoluteIndex,
|
|
1289
1291
|
});
|
|
1290
1292
|
delete this.activeRowsEditing[row.id];
|
|
1291
1293
|
}
|
|
1292
1294
|
// Update local table copy
|
|
1293
|
-
if (
|
|
1295
|
+
if (absoluteIndex >= 0) {
|
|
1294
1296
|
const updatedRow = { ...row };
|
|
1295
1297
|
this.columns
|
|
1296
1298
|
.filter(col => col.allowEditColumn)
|
|
1297
1299
|
.forEach(col => {
|
|
1298
1300
|
updatedRow[col.field] = rowData[col.field];
|
|
1299
1301
|
});
|
|
1300
|
-
this.tableSource.data[
|
|
1302
|
+
this.tableSource.data[absoluteIndex] = updatedRow;
|
|
1301
1303
|
this.tableSource.data = [...this.tableSource.data];
|
|
1302
1304
|
}
|
|
1303
1305
|
this.changeDetectorRef.markForCheck();
|
|
@@ -1322,11 +1324,7 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
|
|
|
1322
1324
|
* We only emit to parent so they can update their data copy.
|
|
1323
1325
|
*/
|
|
1324
1326
|
onFieldValueChanged(row, column, value, index) {
|
|
1325
|
-
|
|
1326
|
-
// index is the row index within current page, we need to add the offset
|
|
1327
|
-
const absoluteIndex = this.paginator
|
|
1328
|
-
? this.paginator.pageIndex * this.paginator.pageSize + index
|
|
1329
|
-
: index;
|
|
1327
|
+
const absoluteIndex = this.getAbsoluteIndex(index);
|
|
1330
1328
|
this.tableSource.data[absoluteIndex][column.field] = value;
|
|
1331
1329
|
// Emit to parent immediately
|
|
1332
1330
|
// The row object is already updated by ngModel binding
|
|
@@ -1390,6 +1388,16 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
|
|
|
1390
1388
|
}
|
|
1391
1389
|
}
|
|
1392
1390
|
}
|
|
1391
|
+
getAbsoluteIndex(index) {
|
|
1392
|
+
if (this.lazyLoading()) {
|
|
1393
|
+
return index;
|
|
1394
|
+
}
|
|
1395
|
+
else {
|
|
1396
|
+
return this.paginator
|
|
1397
|
+
? this.paginator.pageIndex * this.paginator.pageSize + index
|
|
1398
|
+
: index;
|
|
1399
|
+
}
|
|
1400
|
+
}
|
|
1393
1401
|
setColumnsFilterRowEditTypes() {
|
|
1394
1402
|
this.initLocalColumns().forEach(column => {
|
|
1395
1403
|
if (column.field === 'actions' && !column.type) {
|
|
@@ -1673,7 +1681,7 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
|
|
|
1673
1681
|
return (editableColumns.length > 0 && editableColumns[0].field === column.field);
|
|
1674
1682
|
}
|
|
1675
1683
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.StSnackBarService }, { token: StTablesTranslationsService }, { token: i3$3.StDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1676
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableComponent, selector: "ngx-st-material-table", inputs: { showGlobalSearch: { classPropertyName: "showGlobalSearch", publicName: "showGlobalSearch", isSignal: true, isRequired: false, transformFunction: null }, tableTitle: { classPropertyName: "tableTitle", publicName: "tableTitle", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, dataLength: { classPropertyName: "dataLength", publicName: "dataLength", isSignal: true, isRequired: false, transformFunction: null }, allowPickColumns: { classPropertyName: "allowPickColumns", publicName: "allowPickColumns", isSignal: true, isRequired: false, transformFunction: null }, allowReorderColumns: { classPropertyName: "allowReorderColumns", publicName: "allowReorderColumns", isSignal: true, isRequired: false, transformFunction: null }, localStorageName: { classPropertyName: "localStorageName", publicName: "localStorageName", isSignal: true, isRequired: false, transformFunction: null }, lazyLoading: { classPropertyName: "lazyLoading", publicName: "lazyLoading", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, initColumns: { classPropertyName: "initColumns", publicName: "initColumns", isSignal: true, isRequired: false, transformFunction: null }, rowClickAction: { classPropertyName: "rowClickAction", publicName: "rowClickAction", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, allowEditRow: { classPropertyName: "allowEditRow", publicName: "allowEditRow", isSignal: true, isRequired: false, transformFunction: null }, showEditAllRows: { classPropertyName: "showEditAllRows", publicName: "showEditAllRows", isSignal: true, isRequired: false, transformFunction: null }, autoSaveOnChange: { classPropertyName: "autoSaveOnChange", publicName: "autoSaveOnChange", isSignal: true, isRequired: false, transformFunction: null }, canEditRowValidator: { classPropertyName: "canEditRowValidator", publicName: "canEditRowValidator", isSignal: true, isRequired: false, transformFunction: null }, canDeleteRowValidator: { classPropertyName: "canDeleteRowValidator", publicName: "canDeleteRowValidator", isSignal: true, isRequired: false, transformFunction: null }, allowSelectRow: { classPropertyName: "allowSelectRow", publicName: "allowSelectRow", isSignal: true, isRequired: false, transformFunction: null }, selectionFieldLabel: { classPropertyName: "selectionFieldLabel", publicName: "selectionFieldLabel", isSignal: true, isRequired: false, transformFunction: null }, selectRowOnlyOne: { classPropertyName: "selectRowOnlyOne", publicName: "selectRowOnlyOne", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, createButtonAction: { classPropertyName: "createButtonAction", publicName: "createButtonAction", isSignal: true, isRequired: false, transformFunction: null }, disableCreateButton: { classPropertyName: "disableCreateButton", publicName: "disableCreateButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonUseAddRow: { classPropertyName: "createButtonUseAddRow", publicName: "createButtonUseAddRow", isSignal: true, isRequired: false, transformFunction: null }, allowExtendRow: { classPropertyName: "allowExtendRow", publicName: "allowExtendRow", isSignal: true, isRequired: false, transformFunction: null }, extendedRowTemplate: { classPropertyName: "extendedRowTemplate", publicName: "extendedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, initSelectedRow: { classPropertyName: "initSelectedRow", publicName: "initSelectedRow", isSignal: true, isRequired: false, transformFunction: null }, extraCustomFilter: { classPropertyName: "extraCustomFilter", publicName: "extraCustomFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadData: "loadData", saveEditedRow: "saveEditedRow", saveCreatedRow: "saveCreatedRow", rowDeleted: "rowDeleted", selectRowChange: "selectRowChange", fieldValueChanged: "fieldValueChanged" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"st-material-table\">\r\n @if (isLoading()) {\r\n <div class=\"loading-spinner\">\r\n <mat-spinner color=\"accent\"></mat-spinner>\r\n </div>\r\n }\r\n\r\n @if (showTable) {\r\n <st-material-table-caption\r\n [tableTitle]=\"tableTitle()\"\r\n [allowPickColumns]=\"allowPickColumns()\"\r\n [showGlobalSearch]=\"showGlobalSearch()\"\r\n [allowReorderColumns]=\"allowReorderColumns()\"\r\n [columns]=\"columns\"\r\n [initFilters]=\"initFilters\"\r\n [initGlobalSearch]=\"initGlobalSearch\"\r\n [showCreateButton]=\"showCreateButton()\"\r\n [createButtonLabel]=\"createButtonLabel()\"\r\n [createButtonAction]=\"createButtonAction()\"\r\n [createButtonUseAddRow]=\"createButtonUseAddRow()\"\r\n [disableCreateButton]=\"disableCreateButton()\"\r\n [extraCustomFilter]=\"extraCustomFilter()\"\r\n [creatingRow]=\"creatingRow()\"\r\n (captionDataChanged)=\"captionDataChanged($event)\"\r\n (resetTableSettings)=\"resetTableSettings()\"\r\n (addNewRow)=\"addNewRow()\"\r\n ></st-material-table-caption>\r\n }\r\n\r\n <table\r\n [ngClass]=\"{ 'no-hover': !rowClickAction() }\"\r\n mat-table\r\n [dataSource]=\"tableSource\"\r\n matSort\r\n [multiTemplateDataRows]=\"allowExtendRow()\"\r\n >\r\n @for (column of selectedColumns; track column) {\r\n <ng-container [matColumnDef]=\"column.field\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n mat-sort-header\r\n [disabled]=\"!column.sort\"\r\n >\r\n @if (column.type === 'actions-row-selecting' && !selectRowOnlyOne()) {\r\n <mat-checkbox\r\n color=\"primary\"\r\n (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n >\r\n </mat-checkbox>\r\n } @else if (\r\n column.type === 'actions-row-editing' && showEditAllRows()\r\n ) {\r\n <div class=\"row justify-content-end\" style=\"width: 98px\">\r\n <button\r\n mat-icon-button\r\n (click)=\"turnOnAllEditRows()\"\r\n [matTooltip]=\"'Edit all rows'\"\r\n >\r\n <mat-icon>edit_arrow_down</mat-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n {{ column.header }}\r\n }\r\n </th>\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element; let i = index\"\r\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n >\r\n <st-material-table-row-cell\r\n [column]=\"column\"\r\n [rowData]=\"element\"\r\n [rowIndex]=\"\r\n this.paginator\r\n ? this.paginator.pageIndex * this.paginator.pageSize + i\r\n : i\r\n \"\r\n [rowDataCopy]=\"\r\n activeRowsEditing[element.id] || activeRowsCreating[element.id]\r\n \"\r\n [rowEditing]=\"\r\n !!activeRowsEditing[element.id] ||\r\n !!activeRowsCreating[element.id]\r\n \"\r\n [rowIsSelected]=\"selection.isSelected(element)\"\r\n [rowIsExpanded]=\"element == expandedRow()\"\r\n [canEditRowValidator]=\"canEditRowValidator()\"\r\n [canDeleteRowValidator]=\"canDeleteRowValidator()\"\r\n [selectRowOnlyOne]=\"selectRowOnlyOne()\"\r\n [isFirstEditableColumn]=\"isFirstEditableColumn(column)\"\r\n [autoSaveOnChange]=\"autoSaveOnChange()\"\r\n (editRowEmitter)=\"editRow(element, column)\"\r\n (deleteRowEmitter)=\"deleteRow(element, column, i)\"\r\n (saveEditRowEmitter)=\"saveEditRow(element, column, i)\"\r\n (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n (selectRowChange)=\"selectRowChanged($event, element)\"\r\n (fieldValueChanged)=\"\r\n onFieldValueChanged(element, column, $event.value, i)\r\n \"\r\n ></st-material-table-row-cell>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n [attr.colspan]=\"selectedColumnsString.length\"\r\n >\r\n <div\r\n class=\"expanded-element-detail-wrapper\"\r\n [@detailExpand]=\"element == expandedRow() ? 'expanded' : 'collapsed'\"\r\n >\r\n <div class=\"expanded-element-detail\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"extendedRowTemplate()!\"\r\n [ngTemplateOutletContext]=\"{ data: element }\"\r\n ></ng-container>\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: selectedColumnsString\"\r\n [class.expanded-expanded-row]=\"expandedRow() === row\"\r\n (click)=\"this.clickRowAction(row)\"\r\n ></tr>\r\n @if (allowExtendRow()) {\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n class=\"extended-detail-row\"\r\n ></tr>\r\n }\r\n </table>\r\n <mat-paginator\r\n [showFirstLastButtons]=\"true\"\r\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n [length]=\"dataLength()\"\r\n ></mat-paginator>\r\n @if (allowSelectRow()) {\r\n <div class=\"st-material-table-selected-rows\">\r\n <button type=\"button\" mat-stroked-button [matMenuTriggerFor]=\"menu\">\r\n {{ selection.selected.length }}\r\n {{ stTableTranslations.getTranslations()().rowSelected }}\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n @for (row of selection.selected; track row) {\r\n <button type=\"button\" mat-menu-item (click)=\"removeSelectedRow(row)\">\r\n <div class=\"d-flex\">\r\n {{ row[selectionFieldLabel()]\r\n }}<mat-icon style=\"margin-right: 0; margin-left: 10px\"\r\n >delete</mat-icon\r\n >\r\n </div>\r\n </button>\r\n }\r\n </mat-menu>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:2rem}.st-material-table .st-material-table-selected-rows{position:absolute;bottom:12px;left:5px}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr.extended-detail-row{height:0;cursor:default}.st-material-table table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}.st-material-table table tbody>tr.expanded-element-row td{border-bottom-width:0}.st-material-table table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr.extended-detail-row{height:0;cursor:default}table.st-material-table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}table.st-material-table tbody>tr.expanded-element-row td{border-bottom-width:0}table.st-material-table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}table.st-material-table .mat-column-active{width:48px}table.st-material-table.no-hover tbody tr{cursor:default}table.st-material-table.no-hover tbody tr.active{background-color:transparent!important}table.st-material-table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}table.st-material-table.no-hover tbody tr:hover{background-color:transparent!important}table.st-material-table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}table.st-material-table.admin-table .actions-cell{width:100px}.dark-theme table.st-material-table thead tr{background-color:#5e4803!important}.dark-theme table.st-material-table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme table.st-material-table tbody tr:hover{background-color:#ffffff08!important}.dark-theme table.st-material-table tbody tr.active{background-color:#1121114d!important}.dark-theme table.st-material-table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table table tbody tr:hover{background-color:#ffffff08!important}.dark-theme .st-material-table table tbody tr.active{background-color:#1121114d!important}.dark-theme .st-material-table table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table mat-paginator{background-color:transparent!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element p,.dark-theme .st-material-table .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .st-material-table .filter .filter-title{color:#eee!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: ["showGlobalSearch", "tableTitle", "allowPickColumns", "allowReorderColumns", "initGlobalSearch", "initFilters", "showCreateButton", "createButtonLabel", "createButtonAction", "createButtonUseAddRow", "disableCreateButton", "creatingRow", "extraCustomFilter", "columns"], outputs: ["captionDataChanged", "resetTableSettings", "addNewRow"] }, { kind: "component", type: MaterialTableRowCellComponent, selector: "st-material-table-row-cell", inputs: ["column", "rowData", "rowIndex", "rowDataCopy", "canEditRowValidator", "canDeleteRowValidator", "selectRowOnlyOne", "isFirstEditableColumn", "autoSaveOnChange", "rowEditing", "rowIsSelected", "rowIsExpanded"], outputs: ["saveEditRowEmitter", "cancelEditRowEmitter", "editRowEmitter", "deleteRowEmitter", "selectRowChange", "fieldValueChanged"] }], animations: [
|
|
1684
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableComponent, selector: "ngx-st-material-table", inputs: { showGlobalSearch: { classPropertyName: "showGlobalSearch", publicName: "showGlobalSearch", isSignal: true, isRequired: false, transformFunction: null }, tableTitle: { classPropertyName: "tableTitle", publicName: "tableTitle", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, dataLength: { classPropertyName: "dataLength", publicName: "dataLength", isSignal: true, isRequired: false, transformFunction: null }, allowPickColumns: { classPropertyName: "allowPickColumns", publicName: "allowPickColumns", isSignal: true, isRequired: false, transformFunction: null }, allowReorderColumns: { classPropertyName: "allowReorderColumns", publicName: "allowReorderColumns", isSignal: true, isRequired: false, transformFunction: null }, localStorageName: { classPropertyName: "localStorageName", publicName: "localStorageName", isSignal: true, isRequired: false, transformFunction: null }, lazyLoading: { classPropertyName: "lazyLoading", publicName: "lazyLoading", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, initColumns: { classPropertyName: "initColumns", publicName: "initColumns", isSignal: true, isRequired: false, transformFunction: null }, rowClickAction: { classPropertyName: "rowClickAction", publicName: "rowClickAction", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, allowEditRow: { classPropertyName: "allowEditRow", publicName: "allowEditRow", isSignal: true, isRequired: false, transformFunction: null }, showEditAllRows: { classPropertyName: "showEditAllRows", publicName: "showEditAllRows", isSignal: true, isRequired: false, transformFunction: null }, autoSaveOnChange: { classPropertyName: "autoSaveOnChange", publicName: "autoSaveOnChange", isSignal: true, isRequired: false, transformFunction: null }, canEditRowValidator: { classPropertyName: "canEditRowValidator", publicName: "canEditRowValidator", isSignal: true, isRequired: false, transformFunction: null }, canDeleteRowValidator: { classPropertyName: "canDeleteRowValidator", publicName: "canDeleteRowValidator", isSignal: true, isRequired: false, transformFunction: null }, allowSelectRow: { classPropertyName: "allowSelectRow", publicName: "allowSelectRow", isSignal: true, isRequired: false, transformFunction: null }, selectionFieldLabel: { classPropertyName: "selectionFieldLabel", publicName: "selectionFieldLabel", isSignal: true, isRequired: false, transformFunction: null }, selectRowOnlyOne: { classPropertyName: "selectRowOnlyOne", publicName: "selectRowOnlyOne", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, createButtonAction: { classPropertyName: "createButtonAction", publicName: "createButtonAction", isSignal: true, isRequired: false, transformFunction: null }, disableCreateButton: { classPropertyName: "disableCreateButton", publicName: "disableCreateButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonUseAddRow: { classPropertyName: "createButtonUseAddRow", publicName: "createButtonUseAddRow", isSignal: true, isRequired: false, transformFunction: null }, allowExtendRow: { classPropertyName: "allowExtendRow", publicName: "allowExtendRow", isSignal: true, isRequired: false, transformFunction: null }, extendedRowTemplate: { classPropertyName: "extendedRowTemplate", publicName: "extendedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, initSelectedRow: { classPropertyName: "initSelectedRow", publicName: "initSelectedRow", isSignal: true, isRequired: false, transformFunction: null }, extraCustomFilter: { classPropertyName: "extraCustomFilter", publicName: "extraCustomFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadData: "loadData", saveEditedRow: "saveEditedRow", saveCreatedRow: "saveCreatedRow", rowDeleted: "rowDeleted", selectRowChange: "selectRowChange", fieldValueChanged: "fieldValueChanged" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"st-material-table\">\r\n @if (isLoading()) {\r\n <div class=\"loading-spinner\">\r\n <mat-spinner color=\"accent\"></mat-spinner>\r\n </div>\r\n }\r\n\r\n @if (showTable) {\r\n <st-material-table-caption\r\n [tableTitle]=\"tableTitle()\"\r\n [allowPickColumns]=\"allowPickColumns()\"\r\n [showGlobalSearch]=\"showGlobalSearch()\"\r\n [allowReorderColumns]=\"allowReorderColumns()\"\r\n [columns]=\"columns\"\r\n [initFilters]=\"initFilters\"\r\n [initGlobalSearch]=\"initGlobalSearch\"\r\n [showCreateButton]=\"showCreateButton()\"\r\n [createButtonLabel]=\"createButtonLabel()\"\r\n [createButtonAction]=\"createButtonAction()\"\r\n [createButtonUseAddRow]=\"createButtonUseAddRow()\"\r\n [disableCreateButton]=\"disableCreateButton()\"\r\n [extraCustomFilter]=\"extraCustomFilter()\"\r\n [creatingRow]=\"creatingRow()\"\r\n (captionDataChanged)=\"captionDataChanged($event)\"\r\n (resetTableSettings)=\"resetTableSettings()\"\r\n (addNewRow)=\"addNewRow()\"\r\n ></st-material-table-caption>\r\n }\r\n\r\n <table\r\n [ngClass]=\"{ 'no-hover': !rowClickAction() }\"\r\n mat-table\r\n [dataSource]=\"tableSource\"\r\n matSort\r\n [multiTemplateDataRows]=\"allowExtendRow()\"\r\n >\r\n @for (column of selectedColumns; track column) {\r\n <ng-container [matColumnDef]=\"column.field\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n mat-sort-header\r\n [disabled]=\"!column.sort\"\r\n >\r\n @if (column.type === 'actions-row-selecting' && !selectRowOnlyOne()) {\r\n <mat-checkbox\r\n color=\"primary\"\r\n (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n >\r\n </mat-checkbox>\r\n } @else if (\r\n column.type === 'actions-row-editing' && showEditAllRows()\r\n ) {\r\n <div class=\"row justify-content-end\" style=\"width: 98px\">\r\n <button\r\n mat-icon-button\r\n (click)=\"turnOnAllEditRows()\"\r\n [matTooltip]=\"'Edit all rows'\"\r\n >\r\n <mat-icon>edit_arrow_down</mat-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n {{ column.header }}\r\n }\r\n </th>\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element; let i = index\"\r\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n >\r\n <st-material-table-row-cell\r\n [column]=\"column\"\r\n [rowData]=\"element\"\r\n [rowIndex]=\"getAbsoluteIndex(i)\"\r\n [rowDataCopy]=\"\r\n activeRowsEditing[element.id] || activeRowsCreating[element.id]\r\n \"\r\n [rowEditing]=\"\r\n !!activeRowsEditing[element.id] ||\r\n !!activeRowsCreating[element.id]\r\n \"\r\n [rowIsSelected]=\"selection.isSelected(element)\"\r\n [rowIsExpanded]=\"element == expandedRow()\"\r\n [canEditRowValidator]=\"canEditRowValidator()\"\r\n [canDeleteRowValidator]=\"canDeleteRowValidator()\"\r\n [selectRowOnlyOne]=\"selectRowOnlyOne()\"\r\n [isFirstEditableColumn]=\"isFirstEditableColumn(column)\"\r\n [autoSaveOnChange]=\"autoSaveOnChange()\"\r\n (editRowEmitter)=\"editRow(element, column)\"\r\n (deleteRowEmitter)=\"deleteRow(element, column, i)\"\r\n (saveEditRowEmitter)=\"saveEditRow(element, column, i)\"\r\n (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n (selectRowChange)=\"selectRowChanged($event, element)\"\r\n (fieldValueChanged)=\"\r\n onFieldValueChanged(element, column, $event.value, i)\r\n \"\r\n ></st-material-table-row-cell>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n [attr.colspan]=\"selectedColumnsString.length\"\r\n >\r\n <div\r\n class=\"expanded-element-detail-wrapper\"\r\n [@detailExpand]=\"element == expandedRow() ? 'expanded' : 'collapsed'\"\r\n >\r\n <div class=\"expanded-element-detail\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"extendedRowTemplate()!\"\r\n [ngTemplateOutletContext]=\"{ data: element }\"\r\n ></ng-container>\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: selectedColumnsString\"\r\n [class.expanded-expanded-row]=\"expandedRow() === row\"\r\n (click)=\"this.clickRowAction(row)\"\r\n ></tr>\r\n @if (allowExtendRow()) {\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n class=\"extended-detail-row\"\r\n ></tr>\r\n }\r\n </table>\r\n <mat-paginator\r\n [showFirstLastButtons]=\"true\"\r\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n [length]=\"dataLength()\"\r\n ></mat-paginator>\r\n @if (allowSelectRow()) {\r\n <div class=\"st-material-table-selected-rows\">\r\n <button type=\"button\" mat-stroked-button [matMenuTriggerFor]=\"menu\">\r\n {{ selection.selected.length }}\r\n {{ stTableTranslations.getTranslations()().rowSelected }}\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n @for (row of selection.selected; track row) {\r\n <button type=\"button\" mat-menu-item (click)=\"removeSelectedRow(row)\">\r\n <div class=\"d-flex\">\r\n {{ row[selectionFieldLabel()]\r\n }}<mat-icon style=\"margin-right: 0; margin-left: 10px\"\r\n >delete</mat-icon\r\n >\r\n </div>\r\n </button>\r\n }\r\n </mat-menu>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:2rem}.st-material-table .st-material-table-selected-rows{position:absolute;bottom:12px;left:5px}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr.extended-detail-row{height:0;cursor:default}.st-material-table table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}.st-material-table table tbody>tr.expanded-element-row td{border-bottom-width:0}.st-material-table table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr.extended-detail-row{height:0;cursor:default}table.st-material-table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}table.st-material-table tbody>tr.expanded-element-row td{border-bottom-width:0}table.st-material-table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}table.st-material-table .mat-column-active{width:48px}table.st-material-table.no-hover tbody tr{cursor:default}table.st-material-table.no-hover tbody tr.active{background-color:transparent!important}table.st-material-table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}table.st-material-table.no-hover tbody tr:hover{background-color:transparent!important}table.st-material-table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}table.st-material-table.admin-table .actions-cell{width:100px}.dark-theme table.st-material-table thead tr{background-color:#5e4803!important}.dark-theme table.st-material-table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme table.st-material-table tbody tr:hover{background-color:#ffffff08!important}.dark-theme table.st-material-table tbody tr.active{background-color:#1121114d!important}.dark-theme table.st-material-table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table table tbody tr:hover{background-color:#ffffff08!important}.dark-theme .st-material-table table tbody tr.active{background-color:#1121114d!important}.dark-theme .st-material-table table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table mat-paginator{background-color:transparent!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element p,.dark-theme .st-material-table .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .st-material-table .filter .filter-title{color:#eee!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: ["showGlobalSearch", "tableTitle", "allowPickColumns", "allowReorderColumns", "initGlobalSearch", "initFilters", "showCreateButton", "createButtonLabel", "createButtonAction", "createButtonUseAddRow", "disableCreateButton", "creatingRow", "extraCustomFilter", "columns"], outputs: ["captionDataChanged", "resetTableSettings", "addNewRow"] }, { kind: "component", type: MaterialTableRowCellComponent, selector: "st-material-table-row-cell", inputs: ["column", "rowData", "rowIndex", "rowDataCopy", "canEditRowValidator", "canDeleteRowValidator", "selectRowOnlyOne", "isFirstEditableColumn", "autoSaveOnChange", "rowEditing", "rowIsSelected", "rowIsExpanded"], outputs: ["saveEditRowEmitter", "cancelEditRowEmitter", "editRowEmitter", "deleteRowEmitter", "selectRowChange", "fieldValueChanged"] }], animations: [
|
|
1677
1685
|
trigger('detailExpand', [
|
|
1678
1686
|
state('collapsed,void', style({ height: '0px', minHeight: '0' })),
|
|
1679
1687
|
state('expanded', style({ height: '*' })),
|
|
@@ -1689,7 +1697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1689
1697
|
state('expanded', style({ height: '*' })),
|
|
1690
1698
|
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
1691
1699
|
]),
|
|
1692
|
-
], template: "<div class=\"st-material-table\">\r\n @if (isLoading()) {\r\n <div class=\"loading-spinner\">\r\n <mat-spinner color=\"accent\"></mat-spinner>\r\n </div>\r\n }\r\n\r\n @if (showTable) {\r\n <st-material-table-caption\r\n [tableTitle]=\"tableTitle()\"\r\n [allowPickColumns]=\"allowPickColumns()\"\r\n [showGlobalSearch]=\"showGlobalSearch()\"\r\n [allowReorderColumns]=\"allowReorderColumns()\"\r\n [columns]=\"columns\"\r\n [initFilters]=\"initFilters\"\r\n [initGlobalSearch]=\"initGlobalSearch\"\r\n [showCreateButton]=\"showCreateButton()\"\r\n [createButtonLabel]=\"createButtonLabel()\"\r\n [createButtonAction]=\"createButtonAction()\"\r\n [createButtonUseAddRow]=\"createButtonUseAddRow()\"\r\n [disableCreateButton]=\"disableCreateButton()\"\r\n [extraCustomFilter]=\"extraCustomFilter()\"\r\n [creatingRow]=\"creatingRow()\"\r\n (captionDataChanged)=\"captionDataChanged($event)\"\r\n (resetTableSettings)=\"resetTableSettings()\"\r\n (addNewRow)=\"addNewRow()\"\r\n ></st-material-table-caption>\r\n }\r\n\r\n <table\r\n [ngClass]=\"{ 'no-hover': !rowClickAction() }\"\r\n mat-table\r\n [dataSource]=\"tableSource\"\r\n matSort\r\n [multiTemplateDataRows]=\"allowExtendRow()\"\r\n >\r\n @for (column of selectedColumns; track column) {\r\n <ng-container [matColumnDef]=\"column.field\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n mat-sort-header\r\n [disabled]=\"!column.sort\"\r\n >\r\n @if (column.type === 'actions-row-selecting' && !selectRowOnlyOne()) {\r\n <mat-checkbox\r\n color=\"primary\"\r\n (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n >\r\n </mat-checkbox>\r\n } @else if (\r\n column.type === 'actions-row-editing' && showEditAllRows()\r\n ) {\r\n <div class=\"row justify-content-end\" style=\"width: 98px\">\r\n <button\r\n mat-icon-button\r\n (click)=\"turnOnAllEditRows()\"\r\n [matTooltip]=\"'Edit all rows'\"\r\n >\r\n <mat-icon>edit_arrow_down</mat-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n {{ column.header }}\r\n }\r\n </th>\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element; let i = index\"\r\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n >\r\n <st-material-table-row-cell\r\n [column]=\"column\"\r\n [rowData]=\"element\"\r\n [rowIndex]=\"\r\n this.paginator\r\n ? this.paginator.pageIndex * this.paginator.pageSize + i\r\n : i\r\n \"\r\n [rowDataCopy]=\"\r\n activeRowsEditing[element.id] || activeRowsCreating[element.id]\r\n \"\r\n [rowEditing]=\"\r\n !!activeRowsEditing[element.id] ||\r\n !!activeRowsCreating[element.id]\r\n \"\r\n [rowIsSelected]=\"selection.isSelected(element)\"\r\n [rowIsExpanded]=\"element == expandedRow()\"\r\n [canEditRowValidator]=\"canEditRowValidator()\"\r\n [canDeleteRowValidator]=\"canDeleteRowValidator()\"\r\n [selectRowOnlyOne]=\"selectRowOnlyOne()\"\r\n [isFirstEditableColumn]=\"isFirstEditableColumn(column)\"\r\n [autoSaveOnChange]=\"autoSaveOnChange()\"\r\n (editRowEmitter)=\"editRow(element, column)\"\r\n (deleteRowEmitter)=\"deleteRow(element, column, i)\"\r\n (saveEditRowEmitter)=\"saveEditRow(element, column, i)\"\r\n (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n (selectRowChange)=\"selectRowChanged($event, element)\"\r\n (fieldValueChanged)=\"\r\n onFieldValueChanged(element, column, $event.value, i)\r\n \"\r\n ></st-material-table-row-cell>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n [attr.colspan]=\"selectedColumnsString.length\"\r\n >\r\n <div\r\n class=\"expanded-element-detail-wrapper\"\r\n [@detailExpand]=\"element == expandedRow() ? 'expanded' : 'collapsed'\"\r\n >\r\n <div class=\"expanded-element-detail\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"extendedRowTemplate()!\"\r\n [ngTemplateOutletContext]=\"{ data: element }\"\r\n ></ng-container>\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: selectedColumnsString\"\r\n [class.expanded-expanded-row]=\"expandedRow() === row\"\r\n (click)=\"this.clickRowAction(row)\"\r\n ></tr>\r\n @if (allowExtendRow()) {\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n class=\"extended-detail-row\"\r\n ></tr>\r\n }\r\n </table>\r\n <mat-paginator\r\n [showFirstLastButtons]=\"true\"\r\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n [length]=\"dataLength()\"\r\n ></mat-paginator>\r\n @if (allowSelectRow()) {\r\n <div class=\"st-material-table-selected-rows\">\r\n <button type=\"button\" mat-stroked-button [matMenuTriggerFor]=\"menu\">\r\n {{ selection.selected.length }}\r\n {{ stTableTranslations.getTranslations()().rowSelected }}\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n @for (row of selection.selected; track row) {\r\n <button type=\"button\" mat-menu-item (click)=\"removeSelectedRow(row)\">\r\n <div class=\"d-flex\">\r\n {{ row[selectionFieldLabel()]\r\n }}<mat-icon style=\"margin-right: 0; margin-left: 10px\"\r\n >delete</mat-icon\r\n >\r\n </div>\r\n </button>\r\n }\r\n </mat-menu>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:2rem}.st-material-table .st-material-table-selected-rows{position:absolute;bottom:12px;left:5px}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr.extended-detail-row{height:0;cursor:default}.st-material-table table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}.st-material-table table tbody>tr.expanded-element-row td{border-bottom-width:0}.st-material-table table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr.extended-detail-row{height:0;cursor:default}table.st-material-table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}table.st-material-table tbody>tr.expanded-element-row td{border-bottom-width:0}table.st-material-table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}table.st-material-table .mat-column-active{width:48px}table.st-material-table.no-hover tbody tr{cursor:default}table.st-material-table.no-hover tbody tr.active{background-color:transparent!important}table.st-material-table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}table.st-material-table.no-hover tbody tr:hover{background-color:transparent!important}table.st-material-table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}table.st-material-table.admin-table .actions-cell{width:100px}.dark-theme table.st-material-table thead tr{background-color:#5e4803!important}.dark-theme table.st-material-table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme table.st-material-table tbody tr:hover{background-color:#ffffff08!important}.dark-theme table.st-material-table tbody tr.active{background-color:#1121114d!important}.dark-theme table.st-material-table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table table tbody tr:hover{background-color:#ffffff08!important}.dark-theme .st-material-table table tbody tr.active{background-color:#1121114d!important}.dark-theme .st-material-table table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table mat-paginator{background-color:transparent!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element p,.dark-theme .st-material-table .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .st-material-table .filter .filter-title{color:#eee!important}\n"] }]
|
|
1700
|
+
], template: "<div class=\"st-material-table\">\r\n @if (isLoading()) {\r\n <div class=\"loading-spinner\">\r\n <mat-spinner color=\"accent\"></mat-spinner>\r\n </div>\r\n }\r\n\r\n @if (showTable) {\r\n <st-material-table-caption\r\n [tableTitle]=\"tableTitle()\"\r\n [allowPickColumns]=\"allowPickColumns()\"\r\n [showGlobalSearch]=\"showGlobalSearch()\"\r\n [allowReorderColumns]=\"allowReorderColumns()\"\r\n [columns]=\"columns\"\r\n [initFilters]=\"initFilters\"\r\n [initGlobalSearch]=\"initGlobalSearch\"\r\n [showCreateButton]=\"showCreateButton()\"\r\n [createButtonLabel]=\"createButtonLabel()\"\r\n [createButtonAction]=\"createButtonAction()\"\r\n [createButtonUseAddRow]=\"createButtonUseAddRow()\"\r\n [disableCreateButton]=\"disableCreateButton()\"\r\n [extraCustomFilter]=\"extraCustomFilter()\"\r\n [creatingRow]=\"creatingRow()\"\r\n (captionDataChanged)=\"captionDataChanged($event)\"\r\n (resetTableSettings)=\"resetTableSettings()\"\r\n (addNewRow)=\"addNewRow()\"\r\n ></st-material-table-caption>\r\n }\r\n\r\n <table\r\n [ngClass]=\"{ 'no-hover': !rowClickAction() }\"\r\n mat-table\r\n [dataSource]=\"tableSource\"\r\n matSort\r\n [multiTemplateDataRows]=\"allowExtendRow()\"\r\n >\r\n @for (column of selectedColumns; track column) {\r\n <ng-container [matColumnDef]=\"column.field\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n mat-sort-header\r\n [disabled]=\"!column.sort\"\r\n >\r\n @if (column.type === 'actions-row-selecting' && !selectRowOnlyOne()) {\r\n <mat-checkbox\r\n color=\"primary\"\r\n (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n >\r\n </mat-checkbox>\r\n } @else if (\r\n column.type === 'actions-row-editing' && showEditAllRows()\r\n ) {\r\n <div class=\"row justify-content-end\" style=\"width: 98px\">\r\n <button\r\n mat-icon-button\r\n (click)=\"turnOnAllEditRows()\"\r\n [matTooltip]=\"'Edit all rows'\"\r\n >\r\n <mat-icon>edit_arrow_down</mat-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n {{ column.header }}\r\n }\r\n </th>\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element; let i = index\"\r\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n >\r\n <st-material-table-row-cell\r\n [column]=\"column\"\r\n [rowData]=\"element\"\r\n [rowIndex]=\"getAbsoluteIndex(i)\"\r\n [rowDataCopy]=\"\r\n activeRowsEditing[element.id] || activeRowsCreating[element.id]\r\n \"\r\n [rowEditing]=\"\r\n !!activeRowsEditing[element.id] ||\r\n !!activeRowsCreating[element.id]\r\n \"\r\n [rowIsSelected]=\"selection.isSelected(element)\"\r\n [rowIsExpanded]=\"element == expandedRow()\"\r\n [canEditRowValidator]=\"canEditRowValidator()\"\r\n [canDeleteRowValidator]=\"canDeleteRowValidator()\"\r\n [selectRowOnlyOne]=\"selectRowOnlyOne()\"\r\n [isFirstEditableColumn]=\"isFirstEditableColumn(column)\"\r\n [autoSaveOnChange]=\"autoSaveOnChange()\"\r\n (editRowEmitter)=\"editRow(element, column)\"\r\n (deleteRowEmitter)=\"deleteRow(element, column, i)\"\r\n (saveEditRowEmitter)=\"saveEditRow(element, column, i)\"\r\n (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n (selectRowChange)=\"selectRowChanged($event, element)\"\r\n (fieldValueChanged)=\"\r\n onFieldValueChanged(element, column, $event.value, i)\r\n \"\r\n ></st-material-table-row-cell>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n [attr.colspan]=\"selectedColumnsString.length\"\r\n >\r\n <div\r\n class=\"expanded-element-detail-wrapper\"\r\n [@detailExpand]=\"element == expandedRow() ? 'expanded' : 'collapsed'\"\r\n >\r\n <div class=\"expanded-element-detail\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"extendedRowTemplate()!\"\r\n [ngTemplateOutletContext]=\"{ data: element }\"\r\n ></ng-container>\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: selectedColumnsString\"\r\n [class.expanded-expanded-row]=\"expandedRow() === row\"\r\n (click)=\"this.clickRowAction(row)\"\r\n ></tr>\r\n @if (allowExtendRow()) {\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n class=\"extended-detail-row\"\r\n ></tr>\r\n }\r\n </table>\r\n <mat-paginator\r\n [showFirstLastButtons]=\"true\"\r\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n [length]=\"dataLength()\"\r\n ></mat-paginator>\r\n @if (allowSelectRow()) {\r\n <div class=\"st-material-table-selected-rows\">\r\n <button type=\"button\" mat-stroked-button [matMenuTriggerFor]=\"menu\">\r\n {{ selection.selected.length }}\r\n {{ stTableTranslations.getTranslations()().rowSelected }}\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n @for (row of selection.selected; track row) {\r\n <button type=\"button\" mat-menu-item (click)=\"removeSelectedRow(row)\">\r\n <div class=\"d-flex\">\r\n {{ row[selectionFieldLabel()]\r\n }}<mat-icon style=\"margin-right: 0; margin-left: 10px\"\r\n >delete</mat-icon\r\n >\r\n </div>\r\n </button>\r\n }\r\n </mat-menu>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:2rem}.st-material-table .st-material-table-selected-rows{position:absolute;bottom:12px;left:5px}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr.extended-detail-row{height:0;cursor:default}.st-material-table table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}.st-material-table table tbody>tr.expanded-element-row td{border-bottom-width:0}.st-material-table table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr.extended-detail-row{height:0;cursor:default}table.st-material-table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}table.st-material-table tbody>tr.expanded-element-row td{border-bottom-width:0}table.st-material-table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}table.st-material-table .mat-column-active{width:48px}table.st-material-table.no-hover tbody tr{cursor:default}table.st-material-table.no-hover tbody tr.active{background-color:transparent!important}table.st-material-table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}table.st-material-table.no-hover tbody tr:hover{background-color:transparent!important}table.st-material-table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}table.st-material-table.admin-table .actions-cell{width:100px}.dark-theme table.st-material-table thead tr{background-color:#5e4803!important}.dark-theme table.st-material-table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme table.st-material-table tbody tr:hover{background-color:#ffffff08!important}.dark-theme table.st-material-table tbody tr.active{background-color:#1121114d!important}.dark-theme table.st-material-table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table table tbody tr:hover{background-color:#ffffff08!important}.dark-theme .st-material-table table tbody tr.active{background-color:#1121114d!important}.dark-theme .st-material-table table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table mat-paginator{background-color:transparent!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element p,.dark-theme .st-material-table .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .st-material-table .filter .filter-title{color:#eee!important}\n"] }]
|
|
1693
1701
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.StSnackBarService }, { type: StTablesTranslationsService }, { type: i3$3.StDialogService }], propDecorators: { paginator: [{
|
|
1694
1702
|
type: ViewChild,
|
|
1695
1703
|
args: [MatPaginator]
|