ngx-st-tables 17.0.69 → 17.0.71

package/fesm2022/ngx-st-tables.mjs

@@ -885,6 +885,7 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
         this.createButtonAction = input(() => { });
         this.allowExtendRow = input(false);
         this.extendedRowTemplate = input();
+        this.initSelectedRow = input();
         this.loadData = output();
         this.saveNewRow = output();
         this.selectRowChange = output();
@@ -910,6 +911,10 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
                 width: '60px',
                 selectColumnLabel: this.stTableTranslations.getTranslations()().rowSelectColumnLabel,
             });
+            if (this.initSelectedRow()) {
+                this.selection.select(...this.initSelectedRow());
+                console.log(this.selection);
+            }
         }
         else {
             this.initColumns.update(oldVal => oldVal.filter(column => column.field !== 'action-row-selecting'));
@@ -1039,8 +1044,13 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
     }
     isAllSelected() {
         const numSelected = this.selection.selected.length;
-        const numRows = this.tableSource.data.length;
-        return numSelected === numRows;
+        if (this.tableSource) {
+            const numRows = this.tableSource.data.length;
+            return numSelected === numRows;
+        }
+        else {
+            return false;
+        }
     }
     toggleAllRows() {
         if (this.isAllSelected()) {
@@ -1346,7 +1356,7 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
         };
     }
     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 }], target: i0.ɵɵFactoryTarget.Component }); }
-    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 }, allowSelectRow: { classPropertyName: "allowSelectRow", publicName: "allowSelectRow", isSignal: true, isRequired: false, transformFunction: null }, selectionFieldLabel: { classPropertyName: "selectionFieldLabel", publicName: "selectionFieldLabel", 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 }, allowExtendRow: { classPropertyName: "allowExtendRow", publicName: "allowExtendRow", isSignal: true, isRequired: false, transformFunction: null }, extendedRowTemplate: { classPropertyName: "extendedRowTemplate", publicName: "extendedRowTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { initColumns: "initColumnsChange", loadData: "loadData", saveNewRow: "saveNewRow", selectRowChange: "selectRowChange" }, 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      (captionDataChanged)=\"captionDataChanged($event)\"\r\n      (resetTableSettings)=\"resetTableSettings()\"\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\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') {\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 {\r\n            {{ column.header }}\r\n          }\r\n        </th>\r\n        <td\r\n          mat-cell\r\n          *matCellDef=\"let element\"\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            [rowDataCopy]=\"activeRowsEditing[element.id]\"\r\n            [rowEditing]=\"!!activeRowsEditing[element.id]\"\r\n            [rowIsSelected]=\"selection.isSelected(element)\"\r\n            [rowIsExpanded]=\"element == expandedRow()\"\r\n            (editRowEmitter)=\"editRow(element, column)\"\r\n            (saveEditRowEmitter)=\"saveEditRow(element, column)\"\r\n            (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n            (selectRowChange)=\"selectRowChanged($event, element)\"\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 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 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.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.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:200px;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.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}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:200px;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: 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: i8$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$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: i11$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", "showCreateButton", "createButtonLabel", "createButtonAction", "columns"], outputs: ["captionDataChanged", "resetTableSettings"] }, { kind: "component", type: MaterialTableRowCellComponent, selector: "st-material-table-row-cell", inputs: ["column", "rowData", "rowDataCopy", "rowEditing", "rowIsSelected", "rowIsExpanded"], outputs: ["saveEditRowEmitter", "cancelEditRowEmitter", "editRowEmitter", "selectRowChange"] }], animations: [
+    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 }, allowSelectRow: { classPropertyName: "allowSelectRow", publicName: "allowSelectRow", isSignal: true, isRequired: false, transformFunction: null }, selectionFieldLabel: { classPropertyName: "selectionFieldLabel", publicName: "selectionFieldLabel", 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 }, 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 } }, outputs: { initColumns: "initColumnsChange", loadData: "loadData", saveNewRow: "saveNewRow", selectRowChange: "selectRowChange" }, 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      (captionDataChanged)=\"captionDataChanged($event)\"\r\n      (resetTableSettings)=\"resetTableSettings()\"\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') {\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 {\r\n            {{ column.header }}\r\n          }\r\n        </th>\r\n        <td\r\n          mat-cell\r\n          *matCellDef=\"let element\"\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            [rowDataCopy]=\"activeRowsEditing[element.id]\"\r\n            [rowEditing]=\"!!activeRowsEditing[element.id]\"\r\n            [rowIsSelected]=\"selection.isSelected(element)\"\r\n            [rowIsExpanded]=\"element == expandedRow()\"\r\n            (editRowEmitter)=\"editRow(element, column)\"\r\n            (saveEditRowEmitter)=\"saveEditRow(element, column)\"\r\n            (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n            (selectRowChange)=\"selectRowChanged($event, element)\"\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 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 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.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.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:200px;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.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}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:200px;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: 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: i8$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$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: i11$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", "showCreateButton", "createButtonLabel", "createButtonAction", "columns"], outputs: ["captionDataChanged", "resetTableSettings"] }, { kind: "component", type: MaterialTableRowCellComponent, selector: "st-material-table-row-cell", inputs: ["column", "rowData", "rowDataCopy", "rowEditing", "rowIsSelected", "rowIsExpanded"], outputs: ["saveEditRowEmitter", "cancelEditRowEmitter", "editRowEmitter", "selectRowChange"] }], animations: [
             trigger('detailExpand', [
                 state('collapsed,void', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: '*' })),
@@ -1362,7 +1372,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                             state('expanded', style({ height: '*' })),
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], 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      (captionDataChanged)=\"captionDataChanged($event)\"\r\n      (resetTableSettings)=\"resetTableSettings()\"\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\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') {\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 {\r\n            {{ column.header }}\r\n          }\r\n        </th>\r\n        <td\r\n          mat-cell\r\n          *matCellDef=\"let element\"\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            [rowDataCopy]=\"activeRowsEditing[element.id]\"\r\n            [rowEditing]=\"!!activeRowsEditing[element.id]\"\r\n            [rowIsSelected]=\"selection.isSelected(element)\"\r\n            [rowIsExpanded]=\"element == expandedRow()\"\r\n            (editRowEmitter)=\"editRow(element, column)\"\r\n            (saveEditRowEmitter)=\"saveEditRow(element, column)\"\r\n            (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n            (selectRowChange)=\"selectRowChanged($event, element)\"\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 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 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.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.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:200px;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.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}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:200px;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"] }]
+                    ], 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      (captionDataChanged)=\"captionDataChanged($event)\"\r\n      (resetTableSettings)=\"resetTableSettings()\"\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') {\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 {\r\n            {{ column.header }}\r\n          }\r\n        </th>\r\n        <td\r\n          mat-cell\r\n          *matCellDef=\"let element\"\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            [rowDataCopy]=\"activeRowsEditing[element.id]\"\r\n            [rowEditing]=\"!!activeRowsEditing[element.id]\"\r\n            [rowIsSelected]=\"selection.isSelected(element)\"\r\n            [rowIsExpanded]=\"element == expandedRow()\"\r\n            (editRowEmitter)=\"editRow(element, column)\"\r\n            (saveEditRowEmitter)=\"saveEditRow(element, column)\"\r\n            (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n            (selectRowChange)=\"selectRowChanged($event, element)\"\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 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 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.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.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:200px;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.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}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:200px;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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.StSnackBarService }, { type: StTablesTranslationsService }], propDecorators: { paginator: [{
                 type: ViewChild,
                 args: [MatPaginator]