ngx-st-tables 17.0.21 → 17.0.22
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.
- package/esm2022/lib/components/material-table/material-table-caption/material-table-caption.component.mjs +7 -4
- package/esm2022/lib/components/material-table/material-table.component.mjs +8 -4
- package/fesm2022/ngx-st-tables.mjs +13 -6
- package/fesm2022/ngx-st-tables.mjs.map +1 -1
- package/lib/components/material-table/material-table-caption/material-table-caption.component.d.ts +3 -3
- package/lib/components/material-table/material-table.component.d.ts +3 -3
- package/package.json +1 -1
|
@@ -580,6 +580,7 @@ class MaterialTableCaptionComponent extends StSubscribeDestroyComponent {
|
|
|
580
580
|
constructor(dialog) {
|
|
581
581
|
super();
|
|
582
582
|
this.dialog = dialog;
|
|
583
|
+
this.tableTitle = '';
|
|
583
584
|
this.allowPickColumns = true;
|
|
584
585
|
this.allowReorderColumns = true;
|
|
585
586
|
this.initGlobalSearch = '';
|
|
@@ -678,12 +679,14 @@ class MaterialTableCaptionComponent extends StSubscribeDestroyComponent {
|
|
|
678
679
|
filtersKeys.filter(key => this.filters[key]).length || 0;
|
|
679
680
|
}
|
|
680
681
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableCaptionComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
681
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: {
|
|
682
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: { showGlobalSearch: "showGlobalSearch", tableTitle: "tableTitle", allowPickColumns: "allowPickColumns", allowReorderColumns: "allowReorderColumns", initGlobalSearch: "initGlobalSearch", initFilters: "initFilters", columns: "columns" }, outputs: { captionDataChanged: "captionDataChanged", resetTableSettings: "resetTableSettings" }, usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"st-material-table-caption row align-items-center\"\r\n [ngClass]=\"{\r\n 'justify-content-between':\r\n allowPickColumns && (showGlobalSearch || showFilterButton),\r\n 'justify-content-end': !allowPickColumns && showGlobalSearch\r\n }\"\r\n>\r\n @if (allowPickColumns) {\r\n <div class=\"col-auto d-flex align-items-center\">\r\n @if (tableTitle) {\r\n <p class=\"table-title\">{{ tableTitle }}</p>\r\n }\r\n\r\n <mat-form-field appearance=\"outline\">\r\n <mat-select [formControl]=\"selectedColumns\" multiple>\r\n <mat-select-trigger>\r\n {{ selectedColumns.value ? selectedColumns.value.length : 0 }}\r\n columns selected\r\n </mat-select-trigger>\r\n @for (column of columns; track column.field) {\r\n <mat-option [value]=\"column.field\">{{\r\n column.selectColumnLabel || column.header\r\n }}</mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <button mat-icon-button (click)=\"resetTable()\">\r\n <mat-icon class=\"reorder-icon\">refresh</mat-icon>\r\n </button>\r\n\r\n @if (allowReorderColumns) {\r\n <button mat-icon-button (click)=\"openReorderColumnsDialog()\">\r\n <mat-icon class=\"reorder-icon\">low_priority</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n @if (showGlobalSearch || showFilterButton) {\r\n <div class=\"col-auto d-flex align-items-center\">\r\n @if (showFilterButton) {\r\n <!-- @if (activeFiltersCount) {-->\r\n <!-- <button-->\r\n <!-- mat-icon-button-->\r\n <!-- (click)=\"clearAllFilters()\"-->\r\n <!-- [matTooltip]=\"'Clear Filters'\"-->\r\n <!-- >-->\r\n <!-- <mat-icon>filter_alt_off</mat-icon>-->\r\n <!-- </button>-->\r\n <!-- }-->\r\n\r\n <button mat-icon-button (click)=\"openFilterDialog()\">\r\n <mat-icon\r\n [matBadge]=\"activeFiltersCount\"\r\n [matBadgeHidden]=\"!activeFiltersCount\"\r\n [matBadgeSize]=\"'small'\"\r\n matBadgePosition=\"before\"\r\n >filter_alt</mat-icon\r\n >\r\n </button>\r\n }\r\n\r\n @if (showGlobalSearch) {\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n [formControl]=\"globalSearch\"\r\n [placeholder]=\"'Search'\"\r\n />\r\n <button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"globalSearch.setValue('')\"\r\n >\r\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".st-material-table-caption{width:100%;margin-top:5px}.st-material-table-caption>.col-auto{padding:0}.st-material-table-caption .table-title{font-size:1.4rem;margin-bottom:0}.st-material-table-caption .reorder-icon{transform:scaleX(-1) rotate(90deg)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i8$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i10$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
682
683
|
}
|
|
683
684
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableCaptionComponent, decorators: [{
|
|
684
685
|
type: Component,
|
|
685
|
-
args: [{ selector: 'st-material-table-caption', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"st-material-table-caption row align-items-center\"\r\n [ngClass]=\"{\r\n 'justify-content-between':\r\n allowPickColumns && (
|
|
686
|
-
}], ctorParameters: () => [{ type: i1.MatDialog }], propDecorators: {
|
|
686
|
+
args: [{ selector: 'st-material-table-caption', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"st-material-table-caption row align-items-center\"\r\n [ngClass]=\"{\r\n 'justify-content-between':\r\n allowPickColumns && (showGlobalSearch || showFilterButton),\r\n 'justify-content-end': !allowPickColumns && showGlobalSearch\r\n }\"\r\n>\r\n @if (allowPickColumns) {\r\n <div class=\"col-auto d-flex align-items-center\">\r\n @if (tableTitle) {\r\n <p class=\"table-title\">{{ tableTitle }}</p>\r\n }\r\n\r\n <mat-form-field appearance=\"outline\">\r\n <mat-select [formControl]=\"selectedColumns\" multiple>\r\n <mat-select-trigger>\r\n {{ selectedColumns.value ? selectedColumns.value.length : 0 }}\r\n columns selected\r\n </mat-select-trigger>\r\n @for (column of columns; track column.field) {\r\n <mat-option [value]=\"column.field\">{{\r\n column.selectColumnLabel || column.header\r\n }}</mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <button mat-icon-button (click)=\"resetTable()\">\r\n <mat-icon class=\"reorder-icon\">refresh</mat-icon>\r\n </button>\r\n\r\n @if (allowReorderColumns) {\r\n <button mat-icon-button (click)=\"openReorderColumnsDialog()\">\r\n <mat-icon class=\"reorder-icon\">low_priority</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n @if (showGlobalSearch || showFilterButton) {\r\n <div class=\"col-auto d-flex align-items-center\">\r\n @if (showFilterButton) {\r\n <!-- @if (activeFiltersCount) {-->\r\n <!-- <button-->\r\n <!-- mat-icon-button-->\r\n <!-- (click)=\"clearAllFilters()\"-->\r\n <!-- [matTooltip]=\"'Clear Filters'\"-->\r\n <!-- >-->\r\n <!-- <mat-icon>filter_alt_off</mat-icon>-->\r\n <!-- </button>-->\r\n <!-- }-->\r\n\r\n <button mat-icon-button (click)=\"openFilterDialog()\">\r\n <mat-icon\r\n [matBadge]=\"activeFiltersCount\"\r\n [matBadgeHidden]=\"!activeFiltersCount\"\r\n [matBadgeSize]=\"'small'\"\r\n matBadgePosition=\"before\"\r\n >filter_alt</mat-icon\r\n >\r\n </button>\r\n }\r\n\r\n @if (showGlobalSearch) {\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n [formControl]=\"globalSearch\"\r\n [placeholder]=\"'Search'\"\r\n />\r\n <button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"globalSearch.setValue('')\"\r\n >\r\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".st-material-table-caption{width:100%;margin-top:5px}.st-material-table-caption>.col-auto{padding:0}.st-material-table-caption .table-title{font-size:1.4rem;margin-bottom:0}.st-material-table-caption .reorder-icon{transform:scaleX(-1) rotate(90deg)}\n"] }]
|
|
687
|
+
}], ctorParameters: () => [{ type: i1.MatDialog }], propDecorators: { showGlobalSearch: [{
|
|
688
|
+
type: Input
|
|
689
|
+
}], tableTitle: [{
|
|
687
690
|
type: Input
|
|
688
691
|
}], allowPickColumns: [{
|
|
689
692
|
type: Input
|
|
@@ -790,6 +793,8 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
|
|
|
790
793
|
super();
|
|
791
794
|
this.changeDetectorRef = changeDetectorRef;
|
|
792
795
|
this.snackbar = snackbar;
|
|
796
|
+
this.showGlobalSearch = false;
|
|
797
|
+
this.tableTitle = '';
|
|
793
798
|
this.pageSize = 10;
|
|
794
799
|
this.dataLength = 0;
|
|
795
800
|
this.allowPickColumns = true;
|
|
@@ -1059,18 +1064,20 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
|
|
|
1059
1064
|
};
|
|
1060
1065
|
}
|
|
1061
1066
|
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 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1062
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableComponent, selector: "ngx-st-material-table", inputs: {
|
|
1067
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableComponent, selector: "ngx-st-material-table", inputs: { showGlobalSearch: "showGlobalSearch", tableTitle: "tableTitle", pageSize: "pageSize", dataLength: "dataLength", allowPickColumns: "allowPickColumns", allowReorderColumns: "allowReorderColumns", localStorageName: "localStorageName", lazyLoading: "lazyLoading", isLoading: "isLoading", initColumns: "initColumns", rowClickAction: "rowClickAction", data: "data", rowEditing: "rowEditing" }, outputs: { loadData: "loadData", saveNewRow: "saveNewRow" }, 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\">\n @if (isLoading) {\n <div class=\"loading-spinner\">\n <mat-spinner color=\"accent\"></mat-spinner>\n </div>\n }\n\n @if (showTable) {\n <st-material-table-caption\n [tableTitle]=\"tableTitle\"\n [allowPickColumns]=\"allowPickColumns\"\n [showGlobalSearch]=\"showGlobalSearch\"\n [columns]=\"columns\"\n [initFilters]=\"initFilters\"\n [initGlobalSearch]=\"initGlobalSearch\"\n (captionDataChanged)=\"captionDataChanged($event)\"\n (resetTableSettings)=\"resetTableSettings()\"\n ></st-material-table-caption>\n }\n\n <table\n [ngClass]=\"{ 'no-hover': !rowClickAction }\"\n mat-table\n [dataSource]=\"tableSource\"\n matSort\n >\n @for (column of selectedColumns; track column) {\n <ng-container [matColumnDef]=\"column.field\">\n <th\n mat-header-cell\n *matHeaderCellDef\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\n mat-sort-header\n [disabled]=\"!column.sort\"\n >\n {{ column.header }}\n </th>\n <td\n mat-cell\n *matCellDef=\"let element\"\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\n >\n <st-material-table-row-cell\n [column]=\"column\"\n [rowData]=\"element\"\n [rowDataCopy]=\"activeRowsEditing[element.id]\"\n [rowEditing]=\"!!activeRowsEditing[element.id]\"\n (editRowEmitter)=\"editRow(element, column)\"\n (saveEditRowEmitter)=\"saveEditRow(element, column)\"\n (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\n ></st-material-table-row-cell>\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: selectedColumnsString\"\n (click)=\"rowClickAction ? rowClickAction(row) : null\"\n ></tr>\n </table>\n <mat-paginator\n [showFirstLastButtons]=\"true\"\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\n [length]=\"dataLength\"\n ></mat-paginator>\n</div>\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;align-items:center;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:2rem}\n", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:600;color:#424242}table::ng-deep tbody{background-color:transparent!important}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#f5f5f5}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a mat-icon{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr.active td{border-bottom-color:#0000001f!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover td{border-bottom-color:#0000001f!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6$1.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", "columns"], outputs: ["captionDataChanged", "resetTableSettings"] }, { kind: "component", type: MaterialTableRowCellComponent, selector: "st-material-table-row-cell", inputs: ["column", "rowData", "rowDataCopy", "rowEditing"], outputs: ["saveEditRowEmitter", "cancelEditRowEmitter", "editRowEmitter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1063
1068
|
}
|
|
1064
1069
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableComponent, decorators: [{
|
|
1065
1070
|
type: Component,
|
|
1066
|
-
args: [{ selector: 'ngx-st-material-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"st-material-table\">\n @if (isLoading) {\n <div class=\"loading-spinner\">\n <mat-spinner color=\"accent\"></mat-spinner>\n </div>\n }\n\n @if (showTable) {\n <st-material-table-caption\n [allowPickColumns]=\"allowPickColumns\"\n [
|
|
1071
|
+
args: [{ selector: 'ngx-st-material-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"st-material-table\">\n @if (isLoading) {\n <div class=\"loading-spinner\">\n <mat-spinner color=\"accent\"></mat-spinner>\n </div>\n }\n\n @if (showTable) {\n <st-material-table-caption\n [tableTitle]=\"tableTitle\"\n [allowPickColumns]=\"allowPickColumns\"\n [showGlobalSearch]=\"showGlobalSearch\"\n [columns]=\"columns\"\n [initFilters]=\"initFilters\"\n [initGlobalSearch]=\"initGlobalSearch\"\n (captionDataChanged)=\"captionDataChanged($event)\"\n (resetTableSettings)=\"resetTableSettings()\"\n ></st-material-table-caption>\n }\n\n <table\n [ngClass]=\"{ 'no-hover': !rowClickAction }\"\n mat-table\n [dataSource]=\"tableSource\"\n matSort\n >\n @for (column of selectedColumns; track column) {\n <ng-container [matColumnDef]=\"column.field\">\n <th\n mat-header-cell\n *matHeaderCellDef\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\n mat-sort-header\n [disabled]=\"!column.sort\"\n >\n {{ column.header }}\n </th>\n <td\n mat-cell\n *matCellDef=\"let element\"\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\n >\n <st-material-table-row-cell\n [column]=\"column\"\n [rowData]=\"element\"\n [rowDataCopy]=\"activeRowsEditing[element.id]\"\n [rowEditing]=\"!!activeRowsEditing[element.id]\"\n (editRowEmitter)=\"editRow(element, column)\"\n (saveEditRowEmitter)=\"saveEditRow(element, column)\"\n (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\n ></st-material-table-row-cell>\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: selectedColumnsString\"\n (click)=\"rowClickAction ? rowClickAction(row) : null\"\n ></tr>\n </table>\n <mat-paginator\n [showFirstLastButtons]=\"true\"\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\n [length]=\"dataLength\"\n ></mat-paginator>\n</div>\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;align-items:center;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:2rem}\n", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:600;color:#424242}table::ng-deep tbody{background-color:transparent!important}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#f5f5f5}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a mat-icon{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr.active td{border-bottom-color:#0000001f!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover td{border-bottom-color:#0000001f!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"] }]
|
|
1067
1072
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.StSnackBarService }], propDecorators: { paginator: [{
|
|
1068
1073
|
type: ViewChild,
|
|
1069
1074
|
args: [MatPaginator]
|
|
1070
1075
|
}], sort: [{
|
|
1071
1076
|
type: ViewChild,
|
|
1072
1077
|
args: [MatSort]
|
|
1073
|
-
}],
|
|
1078
|
+
}], showGlobalSearch: [{
|
|
1079
|
+
type: Input
|
|
1080
|
+
}], tableTitle: [{
|
|
1074
1081
|
type: Input
|
|
1075
1082
|
}], pageSize: [{
|
|
1076
1083
|
type: Input
|