ngx-st-tables 17.0.131 → 17.0.133

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.
Files changed (15) hide show
  1. package/esm2022/lib/components/material-table/material-table-caption/material-table-caption.component.mjs +59 -57
  2. package/esm2022/lib/components/material-table/material-table-caption/material-table-filter-dialog/material-table-filter-dialog.component.mjs +44 -67
  3. package/esm2022/lib/components/material-table/material-table-caption/material-table-filter-dialog/material-table-filter.component.mjs +101 -119
  4. package/esm2022/lib/components/material-table/material-table-caption/material-table-order-column-dialog/material-table-order-column-dialog.component.mjs +24 -25
  5. package/esm2022/lib/components/material-table/material-table-row-cell/material-table-row-cell.component.mjs +45 -39
  6. package/esm2022/lib/components/material-table/material-table.component.mjs +223 -209
  7. package/fesm2022/ngx-st-tables.mjs +480 -499
  8. package/fesm2022/ngx-st-tables.mjs.map +1 -1
  9. package/lib/components/material-table/material-table-caption/material-table-caption.component.d.ts +7 -9
  10. package/lib/components/material-table/material-table-caption/material-table-filter-dialog/material-table-filter-dialog.component.d.ts +7 -14
  11. package/lib/components/material-table/material-table-caption/material-table-filter-dialog/material-table-filter.component.d.ts +8 -7
  12. package/lib/components/material-table/material-table-caption/material-table-order-column-dialog/material-table-order-column-dialog.component.d.ts +3 -8
  13. package/lib/components/material-table/material-table-row-cell/material-table-row-cell.component.d.ts +10 -11
  14. package/lib/components/material-table/material-table.component.d.ts +20 -15
  15. package/package.json +1 -1
package/fesm2022/ngx-st-tables.mjs CHANGED
@@ -1,36 +1,36 @@
1
1
  import * as i0 from '@angular/core';
2
- import { signal, Injectable, Optional, Inject, EventEmitter, Component, ViewChild, Input, Output, input, output, ChangeDetectionStrategy, computed, ViewEncapsulation, NgModule } from '@angular/core';
2
+ import { signal, Injectable, Optional, Inject, EventEmitter, Component, ViewChild, Input, Output, input, output, computed, effect, ChangeDetectionStrategy, inject, ViewEncapsulation, NgModule } from '@angular/core';
3
3
  import * as i4 from '@angular/material/paginator';
4
4
  import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
5
5
  import * as i3$1 from '@angular/material/table';
6
6
  import { MatTableDataSource, MatTableModule } from '@angular/material/table';
7
- import * as i2 from '@angular/forms';
7
+ import * as i7 from '@angular/forms';
8
8
  import { UntypedFormControl, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
9
- import * as i3 from '@angular/common';
9
+ import * as i1 from '@angular/common';
10
10
  import { CommonModule } from '@angular/common';
11
- import * as i5 from '@angular/material/icon';
11
+ import * as i3 from '@angular/material/icon';
12
12
  import { MatIconModule } from '@angular/material/icon';
13
- import * as i3$2 from '@angular/material/form-field';
13
+ import * as i4$1 from '@angular/material/form-field';
14
14
  import { MatFormFieldModule } from '@angular/material/form-field';
15
- import * as i6 from '@angular/material/input';
15
+ import * as i5 from '@angular/material/input';
16
16
  import { MatInput, MatInputModule } from '@angular/material/input';
17
17
  import { StSubscribeDestroyComponent, StBaseService, StBaseFunctionsModule } from 'ngx-st-base-functions';
18
- import { takeUntil, distinctUntilChanged, debounceTime, take, filter } from 'rxjs/operators';
19
- import * as i1 from '@angular/material/dialog';
20
- import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
21
- import * as i4$1 from '@angular/material/button';
18
+ import { takeUntil, debounceTime, take, filter, distinctUntilChanged } from 'rxjs/operators';
19
+ import * as i5$1 from '@angular/material/dialog';
20
+ import { MAT_DIALOG_DATA, MatDialogRef, MatDialog, MatDialogModule } from '@angular/material/dialog';
21
+ import * as i2 from '@angular/material/button';
22
22
  import { MatButtonModule } from '@angular/material/button';
23
23
  import * as i6$1 from '@angular/material/tooltip';
24
24
  import { MatTooltipModule } from '@angular/material/tooltip';
25
- import * as i10 from '@angular/material/select';
25
+ import * as i8 from '@angular/material/select';
26
26
  import { MatSelect, MatSelectModule } from '@angular/material/select';
27
- import * as i11 from '@angular/material/core';
27
+ import * as i6 from '@angular/material/core';
28
28
  import { MatNativeDateModule } from '@angular/material/core';
29
- import * as i7 from '@angular/material/datepicker';
29
+ import * as i7$1 from '@angular/material/datepicker';
30
30
  import { MatDatepickerModule } from '@angular/material/datepicker';
31
- import * as i5$1 from '@angular/cdk/drag-drop';
31
+ import * as i4$2 from '@angular/cdk/drag-drop';
32
32
  import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
33
- import * as i12 from '@angular/material/badge';
33
+ import * as i10 from '@angular/material/badge';
34
34
  import { MatBadge } from '@angular/material/badge';
35
35
  import * as i10$1 from '@angular/material/sort';
36
36
  import { MatSort, MatSortModule } from '@angular/material/sort';
@@ -38,14 +38,14 @@ import { SelectionModel } from '@angular/cdk/collections';
38
38
  import { trigger, state, style, transition, animate } from '@angular/animations';
39
39
  import * as i1$1 from 'ngx-st-snack-bar';
40
40
  import { StSnackBarModule } from 'ngx-st-snack-bar';
41
- import * as i3$3 from 'ngx-st-dialog';
41
+ import * as i3$2 from 'ngx-st-dialog';
42
42
  import * as i9 from '@angular/material/menu';
43
43
  import { MatMenuModule } from '@angular/material/menu';
44
- import * as i12$1 from '@angular/material/checkbox';
44
+ import * as i12 from '@angular/material/checkbox';
45
45
  import { MatCheckboxModule } from '@angular/material/checkbox';
46
46
  import * as i13 from '@angular/material/progress-spinner';
47
47
  import { MatProgressSpinner } from '@angular/material/progress-spinner';
48
- import * as i8 from '@angular/router';
48
+ import * as i8$1 from '@angular/router';
49
49
  import { RouterModule } from '@angular/router';
50
50
  import * as i14 from 'ngx-st-date-format';
51
51
  import { StDateFormatModule } from 'ngx-st-date-format';
@@ -175,7 +175,7 @@ class SelectTableComponent {
175
175
  return !!this.rowSelected.find(activeRow => activeRow === row);
176
176
  }
177
177
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
178
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SelectTableComponent, selector: "ngx-st-select-table", inputs: { title: "title", required: "required", multiple: "multiple", initSelected: "initSelected", initSearchVal: "initSearchVal", searchLabel: "searchLabel", selectedLabel: "selectedLabel", setInitColumns: "setInitColumns", tableData: "tableData", validError: "validError" }, outputs: { returnRowSelected: "returnRowSelected" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"shared-table-selector\">\r\n <p class=\"title\" [ngClass]=\"{ 'error-text': validError }\">\r\n {{ title }} {{ required ? '*' : '' }}\r\n </p>\r\n\r\n <div class=\"search-form row align-items-center\">\r\n <div class=\"col-sm-12 col-md row align-items-center\">\r\n <mat-form-field class=\"col\">\r\n <input\r\n matInput\r\n placeholder=\"{{ searchLabel }}\"\r\n [formControl]=\"search\"\r\n />\r\n </mat-form-field>\r\n <div class=\"clear col-auto\">\r\n <mat-icon (click)=\"clearSearch()\">clear</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <table mat-table [dataSource]=\"tableSource\">\r\n @for (col of columns; track col) {\r\n <ng-container [matColumnDef]=\"col\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n {{ col === 'active' ? selectedLabel : initColumns[col] }}\r\n </th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n @if (col === 'active') {\r\n @if (checkActiveRow(element)) {\r\n <mat-icon class=\"active-row\">done</mat-icon>\r\n }\r\n }\r\n @if (col !== 'active') {\r\n {{ element[col] }}\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"columns\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: columns\"\r\n (click)=\"rowClick(row)\"\r\n [ngClass]=\"{ active: checkActiveRow(row) }\"\r\n ></tr>\r\n </table>\r\n <mat-paginator [pageSizeOptions]=\"[5]\"></mat-paginator>\r\n</div>\r\n", styles: [".title{margin-bottom:0;margin-top:1rem;font-weight:500}.title.error-text{color:#ef5350}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr.extended-detail-row{height:0;cursor:default}.st-material-table table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}.st-material-table table tbody>tr.expanded-element-row td{border-bottom-width:0}.st-material-table table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr.extended-detail-row{height:0;cursor:default}table.st-material-table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}table.st-material-table tbody>tr.expanded-element-row td{border-bottom-width:0}table.st-material-table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}table.st-material-table .mat-column-active{width:48px}table.st-material-table.no-hover tbody tr{cursor:default}table.st-material-table.no-hover tbody tr.active{background-color:transparent!important}table.st-material-table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}table.st-material-table.no-hover tbody tr:hover{background-color:transparent!important}table.st-material-table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}table.st-material-table.admin-table .actions-cell{width:100px}.dark-theme table.st-material-table thead tr{background-color:#5e4803!important}.dark-theme table.st-material-table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme table.st-material-table tbody tr:hover{background-color:#ffffff08!important}.dark-theme table.st-material-table tbody tr.active{background-color:#1121114d!important}.dark-theme table.st-material-table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table table tbody tr:hover{background-color:#ffffff08!important}.dark-theme .st-material-table table tbody tr.active{background-color:#1121114d!important}.dark-theme .st-material-table table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table mat-paginator{background-color:transparent!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element p,.dark-theme .st-material-table .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .st-material-table .filter .filter-title{color:#eee!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "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: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
178
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SelectTableComponent, selector: "ngx-st-select-table", inputs: { title: "title", required: "required", multiple: "multiple", initSelected: "initSelected", initSearchVal: "initSearchVal", searchLabel: "searchLabel", selectedLabel: "selectedLabel", setInitColumns: "setInitColumns", tableData: "tableData", validError: "validError" }, outputs: { returnRowSelected: "returnRowSelected" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"shared-table-selector\">\r\n <p class=\"title\" [ngClass]=\"{ 'error-text': validError }\">\r\n {{ title }} {{ required ? '*' : '' }}\r\n </p>\r\n\r\n <div class=\"search-form row align-items-center\">\r\n <div class=\"col-sm-12 col-md row align-items-center\">\r\n <mat-form-field class=\"col\">\r\n <input\r\n matInput\r\n placeholder=\"{{ searchLabel }}\"\r\n [formControl]=\"search\"\r\n />\r\n </mat-form-field>\r\n <div class=\"clear col-auto\">\r\n <mat-icon (click)=\"clearSearch()\">clear</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <table mat-table [dataSource]=\"tableSource\">\r\n @for (col of columns; track col) {\r\n <ng-container [matColumnDef]=\"col\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n {{ col === 'active' ? selectedLabel : initColumns[col] }}\r\n </th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n @if (col === 'active') {\r\n @if (checkActiveRow(element)) {\r\n <mat-icon class=\"active-row\">done</mat-icon>\r\n }\r\n }\r\n @if (col !== 'active') {\r\n {{ element[col] }}\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"columns\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: columns\"\r\n (click)=\"rowClick(row)\"\r\n [ngClass]=\"{ active: checkActiveRow(row) }\"\r\n ></tr>\r\n </table>\r\n <mat-paginator [pageSizeOptions]=\"[5]\"></mat-paginator>\r\n</div>\r\n", styles: [".title{margin-bottom:0;margin-top:1rem;font-weight:500}.title.error-text{color:#ef5350}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr.extended-detail-row{height:0;cursor:default}.st-material-table table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}.st-material-table table tbody>tr.expanded-element-row td{border-bottom-width:0}.st-material-table table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr.extended-detail-row{height:0;cursor:default}table.st-material-table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}table.st-material-table tbody>tr.expanded-element-row td{border-bottom-width:0}table.st-material-table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}table.st-material-table .mat-column-active{width:48px}table.st-material-table.no-hover tbody tr{cursor:default}table.st-material-table.no-hover tbody tr.active{background-color:transparent!important}table.st-material-table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}table.st-material-table.no-hover tbody tr:hover{background-color:transparent!important}table.st-material-table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}table.st-material-table.admin-table .actions-cell{width:100px}.dark-theme table.st-material-table thead tr{background-color:#5e4803!important}.dark-theme table.st-material-table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme table.st-material-table tbody tr:hover{background-color:#ffffff08!important}.dark-theme table.st-material-table tbody tr.active{background-color:#1121114d!important}.dark-theme table.st-material-table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table table tbody tr:hover{background-color:#ffffff08!important}.dark-theme .st-material-table table tbody tr.active{background-color:#1121114d!important}.dark-theme .st-material-table table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table mat-paginator{background-color:transparent!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element p,.dark-theme .st-material-table .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .st-material-table .filter .filter-title{color:#eee!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.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: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.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"] }] }); }
179
179
  }
180
180
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectTableComponent, decorators: [{
181
181
  type: Component,
@@ -207,19 +207,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
207
207
  type: Output
208
208
  }] } });
209
209
 
210
- class MaterialTableFilterComponent extends StSubscribeDestroyComponent {
211
- constructor(stTableTranslations, fb) {
212
- super();
210
+ class MaterialTableFilterComponent {
211
+ constructor(stTableTranslations, fb, changeDetectorRef) {
213
212
  this.stTableTranslations = stTableTranslations;
214
213
  this.fb = fb;
215
- this.column = input.required({});
216
- this.filterValue = input({}, {
217
- transform: (filterValue) => {
218
- this.setFilterValue(filterValue);
219
- return filterValue || {};
220
- },
221
- });
214
+ this.changeDetectorRef = changeDetectorRef;
215
+ this.column = input.required();
216
+ this.filterValue = input({});
222
217
  this.filterValueChanged = output();
218
+ // Cache translations as computed signal
219
+ this.translations = computed(() => this.stTableTranslations.getTranslations()());
223
220
  this.formGroup = this.fb.group({
224
221
  matchMode: {
225
222
  value: 'contains',
@@ -230,16 +227,24 @@ class MaterialTableFilterComponent extends StSubscribeDestroyComponent {
230
227
  dateTo: null,
231
228
  });
232
229
  this.isUpdatingFromOutside = false;
233
- }
234
- ngOnInit() {
235
- this.formGroup.valueChanges.subscribe(() => {
236
- if (!this.isUpdatingFromOutside) {
237
- this.updateAfterFormValueChanged();
230
+ // React to filterValue changes
231
+ effect(() => {
232
+ const filter = this.filterValue();
233
+ if (filter && Object.keys(filter).length > 0) {
234
+ this.isUpdatingFromOutside = true;
235
+ this.setFilterValue(filter);
236
+ this.isUpdatingFromOutside = false;
238
237
  }
239
238
  });
240
- // this.filtersValue.subscribe(filtersValue => {
241
- // console.log('Filters updated child');
242
- // });
239
+ // React to form value changes
240
+ effect(() => {
241
+ // Track form changes
242
+ this.formGroup.valueChanges.subscribe(() => {
243
+ if (!this.isUpdatingFromOutside) {
244
+ this.updateAfterFormValueChanged();
245
+ }
246
+ });
247
+ });
243
248
  }
244
249
  setFilterValue(newFilterValue) {
245
250
  if (newFilterValue) {
@@ -258,40 +263,42 @@ class MaterialTableFilterComponent extends StSubscribeDestroyComponent {
258
263
  else {
259
264
  this.formGroup.controls.value.setValue(newFilterValue.value || '', { emitEvent: false });
260
265
  }
266
+ this.changeDetectorRef.markForCheck();
261
267
  }
262
268
  }
263
269
  updateAfterFormValueChanged() {
264
270
  let tmpValue = this.formGroup.controls.value.value || '';
265
271
  if (this.column().filterType === 'date') {
266
272
  tmpValue = [
267
- this.formGroup.controls.dateFrom.value
268
- ? `${this.formGroup.controls.dateFrom.value.getFullYear()}-${(this.formGroup.controls.dateFrom.value.getMonth() + 1).toString().padStart(2, '0')}-${this.formGroup.controls.dateFrom.value.getDate().toString().padStart(2, '0')}`
269
- : null,
270
- this.formGroup.controls.dateTo.value
271
- ? `${this.formGroup.controls.dateTo.value.getFullYear()}-${(this.formGroup.controls.dateTo.value.getMonth() + 1).toString().padStart(2, '0')}-${this.formGroup.controls.dateTo.value.getDate().toString().padStart(2, '0')}`
272
- : null,
273
+ this.formatDateToString(this.formGroup.controls.dateFrom.value),
274
+ this.formatDateToString(this.formGroup.controls.dateTo.value),
273
275
  ];
274
276
  }
275
277
  if (this.column().filterType === 'boolean' ||
276
278
  this.column().filterType === 'number') {
277
279
  tmpValue = this.formGroup.controls.value.value || null;
278
280
  }
279
- // this.formGroup.controls.value.setValue(tmpValue);
280
281
  const newFilter = {
281
282
  matchMode: this.formGroup.controls.matchMode.value,
282
283
  value: tmpValue,
283
284
  };
284
285
  this.filterValueChanged.emit(newFilter);
285
286
  }
286
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableFilterComponent, deps: [{ token: StTablesTranslationsService }, { token: i2.NonNullableFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
287
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableFilterComponent, selector: "ngx-st-material-table-filter", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, filterValue: { classPropertyName: "filterValue", publicName: "filterValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterValueChanged: "filterValueChanged" }, usesInheritance: true, ngImport: i0, template: `
288
- <form class="row" [formGroup]="formGroup" style="width: 100%;">
287
+ formatDateToString(date) {
288
+ if (!date)
289
+ return null;
290
+ const year = date.getFullYear();
291
+ const month = (date.getMonth() + 1).toString().padStart(2, '0');
292
+ const day = date.getDate().toString().padStart(2, '0');
293
+ return `${year}-${month}-${day}`;
294
+ }
295
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableFilterComponent, deps: [{ token: StTablesTranslationsService }, { token: i7.NonNullableFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
296
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableFilterComponent, selector: "ngx-st-material-table-filter", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, filterValue: { classPropertyName: "filterValue", publicName: "filterValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterValueChanged: "filterValueChanged" }, ngImport: i0, template: `
297
+ <form class="row" [formGroup]="formGroup">
289
298
  <div class="col-auto">
290
- <mat-form-field appearance="outline" style="width: 120px">
291
- <mat-label>
292
- {{ stTableTranslations.getTranslations()().matchMode }}</mat-label
293
- >
294
- <input matInput type="text" [formControlName]="'matchMode'" />
299
+ <mat-form-field appearance="outline" class="match-mode-field">
300
+ <mat-label>{{ translations().matchMode }}</mat-label>
301
+ <input matInput type="text" formControlName="matchMode" />
295
302
  </mat-form-field>
296
303
  </div>
297
304
 
@@ -299,14 +306,12 @@ class MaterialTableFilterComponent extends StSubscribeDestroyComponent {
299
306
  column().filterType === 'string' || column().filterType === 'number'
300
307
  ) {
301
308
  <div class="col">
302
- <mat-form-field appearance="outline" style="width: 100%">
303
- <mat-label>{{
304
- stTableTranslations.getTranslations()().searchFilter
305
- }}</mat-label>
309
+ <mat-form-field appearance="outline" class="full-width">
310
+ <mat-label>{{ translations().searchFilter }}</mat-label>
306
311
  <input
307
312
  matInput
308
313
  [type]="column().filterType === 'string' ? 'text' : 'number'"
309
- [formControlName]="'value'"
314
+ formControlName="value"
310
315
  />
311
316
  </mat-form-field>
312
317
  </div>
@@ -314,14 +319,12 @@ class MaterialTableFilterComponent extends StSubscribeDestroyComponent {
314
319
 
315
320
  @if (column().filterType === 'date') {
316
321
  <div class="col">
317
- <mat-form-field appearance="outline" style="width: 170px">
318
- <mat-label>{{
319
- stTableTranslations.getTranslations()().dateFrom
320
- }}</mat-label>
322
+ <mat-form-field appearance="outline" class="date-field">
323
+ <mat-label>{{ translations().dateFrom }}</mat-label>
321
324
  <input
322
325
  matInput
323
326
  [matDatepicker]="picker1"
324
- [formControlName]="'dateFrom'"
327
+ formControlName="dateFrom"
325
328
  />
326
329
  <mat-datepicker-toggle
327
330
  matIconSuffix
@@ -331,14 +334,12 @@ class MaterialTableFilterComponent extends StSubscribeDestroyComponent {
331
334
  </mat-form-field>
332
335
  </div>
333
336
  <div class="col">
334
- <mat-form-field appearance="outline" style="width: 170px">
335
- <mat-label>{{
336
- stTableTranslations.getTranslations()().dateTo
337
- }}</mat-label>
337
+ <mat-form-field appearance="outline" class="date-field">
338
+ <mat-label>{{ translations().dateTo }}</mat-label>
338
339
  <input
339
340
  matInput
340
341
  [matDatepicker]="picker2"
341
- [formControlName]="'dateTo'"
342
+ formControlName="dateTo"
342
343
  />
343
344
  <mat-datepicker-toggle
344
345
  matIconSuffix
@@ -351,19 +352,15 @@ class MaterialTableFilterComponent extends StSubscribeDestroyComponent {
351
352
 
352
353
  @if (column().filterType === 'boolean') {
353
354
  <div class="col">
354
- <mat-form-field appearance="outline" style="width: 100%">
355
- <mat-label>{{
356
- stTableTranslations.getTranslations()().booleanPickValue
357
- }}</mat-label>
358
- <mat-select [formControlName]="'value'">
359
- <mat-option value="">{{
360
- stTableTranslations.getTranslations()().booleanNone
361
- }}</mat-option>
355
+ <mat-form-field appearance="outline" class="full-width">
356
+ <mat-label>{{ translations().booleanPickValue }}</mat-label>
357
+ <mat-select formControlName="value">
358
+ <mat-option value="">{{ translations().booleanNone }}</mat-option>
362
359
  <mat-option [value]="true">{{
363
- stTableTranslations.getTranslations()().booleanYes
360
+ translations().booleanYes
364
361
  }}</mat-option>
365
362
  <mat-option [value]="false">{{
366
- stTableTranslations.getTranslations()().booleanNo
363
+ translations().booleanNo
367
364
  }}</mat-option>
368
365
  </mat-select>
369
366
  </mat-form-field>
@@ -372,36 +369,33 @@ class MaterialTableFilterComponent extends StSubscribeDestroyComponent {
372
369
 
373
370
  @if (column().filterType === 'custom') {
374
371
  <div class="col">
375
- <mat-form-field appearance="outline" style="width: 100%">
376
- <mat-label>{{
377
- stTableTranslations.getTranslations()().customPickValue
378
- }}</mat-label>
379
- <mat-select [formControlName]="'value'">
380
- <mat-option value="">{{
381
- stTableTranslations.getTranslations()().customNone
382
- }}</mat-option>
383
- @for (option of column().customFilterOptions; track option) {
384
- <mat-option [value]="option.value">
385
- {{ option.label }}
386
- </mat-option>
372
+ <mat-form-field appearance="outline" class="full-width">
373
+ <mat-label>{{ translations().customPickValue }}</mat-label>
374
+ <mat-select formControlName="value">
375
+ <mat-option value="">{{ translations().customNone }}</mat-option>
376
+ @for (
377
+ option of column().customFilterOptions;
378
+ track option.value
379
+ ) {
380
+ <mat-option [value]="option.value">{{
381
+ option.label
382
+ }}</mat-option>
387
383
  }
388
384
  </mat-select>
389
385
  </mat-form-field>
390
386
  </div>
391
387
  }
392
388
  </form>
393
- `, isInline: true, styles: [":host{width:100%}form.row{gap:8px}form.row>:is(.col-auto,.col){padding:0}\n"], dependencies: [{ kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.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: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.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: "component", type: i11.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
389
+ `, isInline: true, styles: [":host{width:100%}form.row{gap:8px;width:100%}form.row>:is(.col-auto,.col){padding:0}.match-mode-field{width:120px}.date-field{width:170px}.full-width{width:100%}\n"], dependencies: [{ kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.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: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
394
390
  }
395
391
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableFilterComponent, decorators: [{
396
392
  type: Component,
397
393
  args: [{ selector: 'ngx-st-material-table-filter', template: `
398
- <form class="row" [formGroup]="formGroup" style="width: 100%;">
394
+ <form class="row" [formGroup]="formGroup">
399
395
  <div class="col-auto">
400
- <mat-form-field appearance="outline" style="width: 120px">
401
- <mat-label>
402
- {{ stTableTranslations.getTranslations()().matchMode }}</mat-label
403
- >
404
- <input matInput type="text" [formControlName]="'matchMode'" />
396
+ <mat-form-field appearance="outline" class="match-mode-field">
397
+ <mat-label>{{ translations().matchMode }}</mat-label>
398
+ <input matInput type="text" formControlName="matchMode" />
405
399
  </mat-form-field>
406
400
  </div>
407
401
 
@@ -409,14 +403,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
409
403
  column().filterType === 'string' || column().filterType === 'number'
410
404
  ) {
411
405
  <div class="col">
412
- <mat-form-field appearance="outline" style="width: 100%">
413
- <mat-label>{{
414
- stTableTranslations.getTranslations()().searchFilter
415
- }}</mat-label>
406
+ <mat-form-field appearance="outline" class="full-width">
407
+ <mat-label>{{ translations().searchFilter }}</mat-label>
416
408
  <input
417
409
  matInput
418
410
  [type]="column().filterType === 'string' ? 'text' : 'number'"
419
- [formControlName]="'value'"
411
+ formControlName="value"
420
412
  />
421
413
  </mat-form-field>
422
414
  </div>
@@ -424,14 +416,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
424
416
 
425
417
  @if (column().filterType === 'date') {
426
418
  <div class="col">
427
- <mat-form-field appearance="outline" style="width: 170px">
428
- <mat-label>{{
429
- stTableTranslations.getTranslations()().dateFrom
430
- }}</mat-label>
419
+ <mat-form-field appearance="outline" class="date-field">
420
+ <mat-label>{{ translations().dateFrom }}</mat-label>
431
421
  <input
432
422
  matInput
433
423
  [matDatepicker]="picker1"
434
- [formControlName]="'dateFrom'"
424
+ formControlName="dateFrom"
435
425
  />
436
426
  <mat-datepicker-toggle
437
427
  matIconSuffix
@@ -441,14 +431,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
441
431
  </mat-form-field>
442
432
  </div>
443
433
  <div class="col">
444
- <mat-form-field appearance="outline" style="width: 170px">
445
- <mat-label>{{
446
- stTableTranslations.getTranslations()().dateTo
447
- }}</mat-label>
434
+ <mat-form-field appearance="outline" class="date-field">
435
+ <mat-label>{{ translations().dateTo }}</mat-label>
448
436
  <input
449
437
  matInput
450
438
  [matDatepicker]="picker2"
451
- [formControlName]="'dateTo'"
439
+ formControlName="dateTo"
452
440
  />
453
441
  <mat-datepicker-toggle
454
442
  matIconSuffix
@@ -461,19 +449,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
461
449
 
462
450
  @if (column().filterType === 'boolean') {
463
451
  <div class="col">
464
- <mat-form-field appearance="outline" style="width: 100%">
465
- <mat-label>{{
466
- stTableTranslations.getTranslations()().booleanPickValue
467
- }}</mat-label>
468
- <mat-select [formControlName]="'value'">
469
- <mat-option value="">{{
470
- stTableTranslations.getTranslations()().booleanNone
471
- }}</mat-option>
452
+ <mat-form-field appearance="outline" class="full-width">
453
+ <mat-label>{{ translations().booleanPickValue }}</mat-label>
454
+ <mat-select formControlName="value">
455
+ <mat-option value="">{{ translations().booleanNone }}</mat-option>
472
456
  <mat-option [value]="true">{{
473
- stTableTranslations.getTranslations()().booleanYes
457
+ translations().booleanYes
474
458
  }}</mat-option>
475
459
  <mat-option [value]="false">{{
476
- stTableTranslations.getTranslations()().booleanNo
460
+ translations().booleanNo
477
461
  }}</mat-option>
478
462
  </mat-select>
479
463
  </mat-form-field>
@@ -482,33 +466,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
482
466
 
483
467
  @if (column().filterType === 'custom') {
484
468
  <div class="col">
485
- <mat-form-field appearance="outline" style="width: 100%">
486
- <mat-label>{{
487
- stTableTranslations.getTranslations()().customPickValue
488
- }}</mat-label>
489
- <mat-select [formControlName]="'value'">
490
- <mat-option value="">{{
491
- stTableTranslations.getTranslations()().customNone
492
- }}</mat-option>
493
- @for (option of column().customFilterOptions; track option) {
494
- <mat-option [value]="option.value">
495
- {{ option.label }}
496
- </mat-option>
469
+ <mat-form-field appearance="outline" class="full-width">
470
+ <mat-label>{{ translations().customPickValue }}</mat-label>
471
+ <mat-select formControlName="value">
472
+ <mat-option value="">{{ translations().customNone }}</mat-option>
473
+ @for (
474
+ option of column().customFilterOptions;
475
+ track option.value
476
+ ) {
477
+ <mat-option [value]="option.value">{{
478
+ option.label
479
+ }}</mat-option>
497
480
  }
498
481
  </mat-select>
499
482
  </mat-form-field>
500
483
  </div>
501
484
  }
502
485
  </form>
503
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{width:100%}form.row{gap:8px}form.row>:is(.col-auto,.col){padding:0}\n"] }]
504
- }], ctorParameters: () => [{ type: StTablesTranslationsService }, { type: i2.NonNullableFormBuilder }] });
486
+ `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{width:100%}form.row{gap:8px;width:100%}form.row>:is(.col-auto,.col){padding:0}.match-mode-field{width:120px}.date-field{width:170px}.full-width{width:100%}\n"] }]
487
+ }], ctorParameters: () => [{ type: StTablesTranslationsService }, { type: i7.NonNullableFormBuilder }, { type: i0.ChangeDetectorRef }] });
505
488
 
506
489
  class MaterialTableFilterDialogComponent {
507
- constructor(dialogData, dialogRef, changeDetectorRef, stTableTranslations) {
508
- this.dialogData = dialogData;
509
- this.dialogRef = dialogRef;
510
- this.changeDetectorRef = changeDetectorRef;
511
- this.stTableTranslations = stTableTranslations;
490
+ constructor() {
491
+ this.dialogData = inject(MAT_DIALOG_DATA);
492
+ this.dialogRef = inject((MatDialogRef));
493
+ this.stTableTranslations = inject(StTablesTranslationsService);
494
+ // Cache translations as computed signal
495
+ this.translations = computed(() => this.stTableTranslations.getTranslations()());
512
496
  this.filterColumns = signal([]);
513
497
  this.allVisible = signal(true);
514
498
  this.filtersValue = signal({});
@@ -524,44 +508,31 @@ class MaterialTableFilterDialogComponent {
524
508
  return !!filter.value;
525
509
  }
526
510
  ngOnInit() {
511
+ // Initialize filters for all filterable columns
512
+ const initialFilters = {};
527
513
  const columns = this.dialogData.columns
528
514
  .filter(column => column.filter)
529
515
  .map(col => {
530
- let filterValue = null;
531
- if (col.filterType === 'boolean' || col.filterType === 'number') {
532
- filterValue = null;
533
- }
534
- else if (col.filterType === 'string') {
535
- filterValue = '';
536
- }
537
- else if (col.filterType === 'date') {
538
- filterValue = [null, null];
539
- }
540
- this.filtersValue.update(current => ({
541
- ...current,
542
- [col.field]: {
543
- value: filterValue,
544
- matchMode: MaterialTableFilterDialogComponent.getBaseMatchModeByType(col.filterType),
545
- },
546
- }));
516
+ // Set default filter value based on type
517
+ initialFilters[col.field] = {
518
+ value: this.getDefaultFilterValue(col.filterType),
519
+ matchMode: MaterialTableFilterDialogComponent.getBaseMatchModeByType(col.filterType),
520
+ };
547
521
  return {
548
522
  ...col,
549
523
  expanded: true,
550
524
  };
551
525
  });
552
526
  this.filterColumns.set(columns);
527
+ // Apply initial filter values if provided
553
528
  if (this.dialogData.initFilters) {
554
- this.filtersValue.update(currentFilters => {
555
- const initKeys = Object.keys(this.dialogData.initFilters);
556
- initKeys.forEach(initKey => {
557
- if (this.dialogData.initFilters[initKey].value) {
558
- currentFilters[initKey].value =
559
- this.dialogData.initFilters[initKey].value;
560
- }
561
- });
562
- return currentFilters;
529
+ Object.entries(this.dialogData.initFilters).forEach(([key, filter]) => {
530
+ if (filter.value !== null && filter.value !== undefined) {
531
+ initialFilters[key] = { ...filter };
532
+ }
563
533
  });
564
534
  }
535
+ this.filtersValue.set(initialFilters);
565
536
  }
566
537
  clearFilter(column) {
567
538
  this.filtersValue.update(current => ({
@@ -586,27 +557,19 @@ class MaterialTableFilterDialogComponent {
586
557
  this.allVisible.set(false);
587
558
  }
588
559
  saveFilters() {
589
- const filtersReady = {};
590
- const filterKeys = Object.keys(this.filtersValue());
591
- filterKeys.forEach(filterKey => {
592
- const filter = this.filtersValue()[filterKey];
593
- if (Array.isArray(filter.value)) {
594
- if ((filter.value[0] !== null && filter.value[0] !== undefined) ||
595
- (filter.value[1] !== null && filter.value[1] !== undefined)) {
596
- filtersReady[filterKey] = this.filtersValue()[filterKey];
597
- }
598
- }
599
- else {
600
- if (filter.value !== null &&
560
+ // Only include filters that have values
561
+ const filtersReady = Object.entries(this.filtersValue()).reduce((acc, [key, filter]) => {
562
+ const hasValue = Array.isArray(filter.value)
563
+ ? filter.value.some(v => v !== null && v !== undefined)
564
+ : filter.value !== null &&
601
565
  filter.value !== undefined &&
602
- filter.value !== '') {
603
- filtersReady[filterKey] = this.filtersValue()[filterKey];
604
- }
566
+ filter.value !== '';
567
+ if (hasValue) {
568
+ acc[key] = filter;
605
569
  }
606
- });
607
- this.dialogRef.close({
608
- filters: filtersReady,
609
- });
570
+ return acc;
571
+ }, {});
572
+ this.dialogRef.close({ filters: filtersReady });
610
573
  }
611
574
  filterValueChanged(column, newFilter) {
612
575
  this.filtersValue.update(current => ({
@@ -638,58 +601,47 @@ class MaterialTableFilterDialogComponent {
638
601
  return 'contains';
639
602
  }
640
603
  }
641
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableFilterDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i0.ChangeDetectorRef }, { token: StTablesTranslationsService }], target: i0.ɵɵFactoryTarget.Component }); }
642
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableFilterDialogComponent, selector: "st-material-table-filter-dialog", ngImport: i0, template: "<h3 mat-dialog-title class=\"filters-dialog-title\">\r\n {{ stTableTranslations.getTranslations()().filterTitle }}\r\n <div class=\"filters-show-hide\">\r\n @if (!allVisible()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"showAllFilters()\"\r\n [matTooltip]=\"stTableTranslations.getTranslations()().expandAllFilters\"\r\n >\r\n <mat-icon>unfold_more</mat-icon>\r\n </button>\r\n }\r\n @if (allVisible()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"hideAllFilters()\"\r\n [matTooltip]=\"\r\n stTableTranslations.getTranslations()().collapseAllFilters\r\n \"\r\n >\r\n <mat-icon>unfold_less</mat-icon>\r\n </button>\r\n }\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"clearAllFilters()\"\r\n [matTooltip]=\"stTableTranslations.getTranslations()().clearAllFilters\"\r\n >\r\n <mat-icon>filter_alt_off</mat-icon>\r\n </button>\r\n </div>\r\n</h3>\r\n\r\n<mat-dialog-content>\r\n <hr />\r\n @for (column of filterColumns(); track column.field) {\r\n <div class=\"filter\">\r\n <div class=\"filter-title row justify-content-between\">\r\n <div class=\"row align-items-center\">\r\n <p>\r\n {{ column.header }}\r\n </p>\r\n @if (hasFilterValue(column)) {\r\n <mat-icon\r\n (click)=\"clearFilter(column)\"\r\n class=\"filter-value-clear\"\r\n [matTooltip]=\"stTableTranslations.getTranslations()().clearFilter\"\r\n >filter_alt_off</mat-icon\r\n >\r\n }\r\n </div>\r\n\r\n @if (column.expanded) {\r\n <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n >keyboard_arrow_up</mat-icon\r\n >\r\n } @else {\r\n <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n >keyboard_arrow_down</mat-icon\r\n >\r\n }\r\n </div>\r\n <div class=\"filter-content row\" [ngClass]=\"{ hide: !column.expanded }\">\r\n <ngx-st-material-table-filter\r\n [column]=\"column\"\r\n [filterValue]=\"filtersValue()[column.field]\"\r\n (filterValueChanged)=\"filterValueChanged(column, $event)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n <button type=\"button\" mat-flat-button mat-dialog-close>\r\n {{ stTableTranslations.getTranslations()().cancel }}\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-flat-button\r\n color=\"accent\"\r\n (click)=\"saveFilters()\"\r\n >\r\n {{ stTableTranslations.getTranslations()().save }}\r\n </button>\r\n </div>\r\n</mat-dialog-actions>\r\n", styles: [".filters-dialog-title .filters-show-hide{position:absolute;top:6px;right:15px}.filter{width:100%;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--surface-100, #e0e0e0)}.filter .filter-title{padding:.5rem 0;font-size:1rem;font-weight:500}.filter .filter-title p{margin:0;font-weight:500}.filter .filter-title mat-icon{cursor:pointer}.filter .filter-title .filter-value-clear{font-size:1.2rem;width:1.2rem;height:1.2rem;margin-top:-2px;margin-left:.5rem;color:red}.filter .filter-content{margin-top:.5rem;gap:.5rem}.filter .filter-content.hide{display:none}.filter .filter-content>div.col-auto,.filter .filter-content>div.col{padding:0!important}.filter .filter-content mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MaterialTableFilterComponent, selector: "ngx-st-material-table-filter", inputs: ["column", "filterValue"], outputs: ["filterValueChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
604
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableFilterDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
605
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableFilterDialogComponent, selector: "st-material-table-filter-dialog", ngImport: i0, template: "<h3 mat-dialog-title class=\"filters-dialog-title\">\r\n {{ translations().filterTitle }}\r\n <div class=\"filters-show-hide\">\r\n @if (!allVisible()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"showAllFilters()\"\r\n [matTooltip]=\"translations().expandAllFilters\"\r\n >\r\n <mat-icon>unfold_more</mat-icon>\r\n </button>\r\n }\r\n @if (allVisible()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"hideAllFilters()\"\r\n [matTooltip]=\"translations().collapseAllFilters\"\r\n >\r\n <mat-icon>unfold_less</mat-icon>\r\n </button>\r\n }\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"clearAllFilters()\"\r\n [matTooltip]=\"translations().clearAllFilters\"\r\n >\r\n <mat-icon>filter_alt_off</mat-icon>\r\n </button>\r\n </div>\r\n</h3>\r\n\r\n<mat-dialog-content>\r\n <hr />\r\n @for (column of filterColumns(); track column.field) {\r\n <div class=\"filter\">\r\n <div class=\"filter-title row justify-content-between\">\r\n <div class=\"row align-items-center\">\r\n <p>\r\n {{ column.header }}\r\n </p>\r\n @if (hasFilterValue(column)) {\r\n <mat-icon\r\n (click)=\"clearFilter(column)\"\r\n class=\"filter-value-clear\"\r\n [matTooltip]=\"translations().clearFilter\"\r\n >filter_alt_off</mat-icon\r\n >\r\n }\r\n </div>\r\n\r\n @if (column.expanded) {\r\n <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n >keyboard_arrow_up</mat-icon\r\n >\r\n } @else {\r\n <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n >keyboard_arrow_down</mat-icon\r\n >\r\n }\r\n </div>\r\n <div class=\"filter-content row\" [ngClass]=\"{ hide: !column.expanded }\">\r\n <ngx-st-material-table-filter\r\n [column]=\"column\"\r\n [filterValue]=\"filtersValue()[column.field]\"\r\n (filterValueChanged)=\"filterValueChanged(column, $event)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div class=\"row justify-content-between dialog-actions-wrapper\">\r\n <button type=\"button\" mat-flat-button mat-dialog-close>\r\n {{ translations().cancel }}\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-flat-button\r\n color=\"accent\"\r\n (click)=\"saveFilters()\"\r\n >\r\n {{ translations().save }}\r\n </button>\r\n </div>\r\n</mat-dialog-actions>\r\n", styles: [".filters-dialog-title .filters-show-hide{position:absolute;top:6px;right:15px}.filter{width:100%;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--surface-100, #e0e0e0)}.filter .filter-title{padding:.5rem 0;font-size:1rem;font-weight:500}.filter .filter-title p{margin:0;font-weight:500}.filter .filter-title mat-icon{cursor:pointer}.filter .filter-title .filter-value-clear{font-size:1.2rem;width:1.2rem;height:1.2rem;margin-top:-2px;margin-left:.5rem;color:red}.filter .filter-content{margin-top:.5rem;gap:.5rem}.filter .filter-content.hide{display:none}.filter .filter-content>div.col-auto,.filter .filter-content>div.col{padding:0!important}.filter .filter-content mat-form-field{width:100%}.dialog-actions-wrapper{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i5$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i5$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i5$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i5$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MaterialTableFilterComponent, selector: "ngx-st-material-table-filter", inputs: ["column", "filterValue"], outputs: ["filterValueChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
643
606
  }
644
607
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableFilterDialogComponent, decorators: [{
645
608
  type: Component,
646
- args: [{ selector: 'st-material-table-filter-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<h3 mat-dialog-title class=\"filters-dialog-title\">\r\n {{ stTableTranslations.getTranslations()().filterTitle }}\r\n <div class=\"filters-show-hide\">\r\n @if (!allVisible()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"showAllFilters()\"\r\n [matTooltip]=\"stTableTranslations.getTranslations()().expandAllFilters\"\r\n >\r\n <mat-icon>unfold_more</mat-icon>\r\n </button>\r\n }\r\n @if (allVisible()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"hideAllFilters()\"\r\n [matTooltip]=\"\r\n stTableTranslations.getTranslations()().collapseAllFilters\r\n \"\r\n >\r\n <mat-icon>unfold_less</mat-icon>\r\n </button>\r\n }\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"clearAllFilters()\"\r\n [matTooltip]=\"stTableTranslations.getTranslations()().clearAllFilters\"\r\n >\r\n <mat-icon>filter_alt_off</mat-icon>\r\n </button>\r\n </div>\r\n</h3>\r\n\r\n<mat-dialog-content>\r\n <hr />\r\n @for (column of filterColumns(); track column.field) {\r\n <div class=\"filter\">\r\n <div class=\"filter-title row justify-content-between\">\r\n <div class=\"row align-items-center\">\r\n <p>\r\n {{ column.header }}\r\n </p>\r\n @if (hasFilterValue(column)) {\r\n <mat-icon\r\n (click)=\"clearFilter(column)\"\r\n class=\"filter-value-clear\"\r\n [matTooltip]=\"stTableTranslations.getTranslations()().clearFilter\"\r\n >filter_alt_off</mat-icon\r\n >\r\n }\r\n </div>\r\n\r\n @if (column.expanded) {\r\n <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n >keyboard_arrow_up</mat-icon\r\n >\r\n } @else {\r\n <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n >keyboard_arrow_down</mat-icon\r\n >\r\n }\r\n </div>\r\n <div class=\"filter-content row\" [ngClass]=\"{ hide: !column.expanded }\">\r\n <ngx-st-material-table-filter\r\n [column]=\"column\"\r\n [filterValue]=\"filtersValue()[column.field]\"\r\n (filterValueChanged)=\"filterValueChanged(column, $event)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n <button type=\"button\" mat-flat-button mat-dialog-close>\r\n {{ stTableTranslations.getTranslations()().cancel }}\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-flat-button\r\n color=\"accent\"\r\n (click)=\"saveFilters()\"\r\n >\r\n {{ stTableTranslations.getTranslations()().save }}\r\n </button>\r\n </div>\r\n</mat-dialog-actions>\r\n", styles: [".filters-dialog-title .filters-show-hide{position:absolute;top:6px;right:15px}.filter{width:100%;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--surface-100, #e0e0e0)}.filter .filter-title{padding:.5rem 0;font-size:1rem;font-weight:500}.filter .filter-title p{margin:0;font-weight:500}.filter .filter-title mat-icon{cursor:pointer}.filter .filter-title .filter-value-clear{font-size:1.2rem;width:1.2rem;height:1.2rem;margin-top:-2px;margin-left:.5rem;color:red}.filter .filter-content{margin-top:.5rem;gap:.5rem}.filter .filter-content.hide{display:none}.filter .filter-content>div.col-auto,.filter .filter-content>div.col{padding:0!important}.filter .filter-content mat-form-field{width:100%}\n"] }]
647
- }], ctorParameters: () => [{ type: undefined, decorators: [{
648
- type: Inject,
649
- args: [MAT_DIALOG_DATA]
650
- }] }, { type: i1.MatDialogRef }, { type: i0.ChangeDetectorRef }, { type: StTablesTranslationsService }] });
609
+ args: [{ selector: 'st-material-table-filter-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<h3 mat-dialog-title class=\"filters-dialog-title\">\r\n {{ translations().filterTitle }}\r\n <div class=\"filters-show-hide\">\r\n @if (!allVisible()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"showAllFilters()\"\r\n [matTooltip]=\"translations().expandAllFilters\"\r\n >\r\n <mat-icon>unfold_more</mat-icon>\r\n </button>\r\n }\r\n @if (allVisible()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"hideAllFilters()\"\r\n [matTooltip]=\"translations().collapseAllFilters\"\r\n >\r\n <mat-icon>unfold_less</mat-icon>\r\n </button>\r\n }\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"clearAllFilters()\"\r\n [matTooltip]=\"translations().clearAllFilters\"\r\n >\r\n <mat-icon>filter_alt_off</mat-icon>\r\n </button>\r\n </div>\r\n</h3>\r\n\r\n<mat-dialog-content>\r\n <hr />\r\n @for (column of filterColumns(); track column.field) {\r\n <div class=\"filter\">\r\n <div class=\"filter-title row justify-content-between\">\r\n <div class=\"row align-items-center\">\r\n <p>\r\n {{ column.header }}\r\n </p>\r\n @if (hasFilterValue(column)) {\r\n <mat-icon\r\n (click)=\"clearFilter(column)\"\r\n class=\"filter-value-clear\"\r\n [matTooltip]=\"translations().clearFilter\"\r\n >filter_alt_off</mat-icon\r\n >\r\n }\r\n </div>\r\n\r\n @if (column.expanded) {\r\n <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n >keyboard_arrow_up</mat-icon\r\n >\r\n } @else {\r\n <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n >keyboard_arrow_down</mat-icon\r\n >\r\n }\r\n </div>\r\n <div class=\"filter-content row\" [ngClass]=\"{ hide: !column.expanded }\">\r\n <ngx-st-material-table-filter\r\n [column]=\"column\"\r\n [filterValue]=\"filtersValue()[column.field]\"\r\n (filterValueChanged)=\"filterValueChanged(column, $event)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div class=\"row justify-content-between dialog-actions-wrapper\">\r\n <button type=\"button\" mat-flat-button mat-dialog-close>\r\n {{ translations().cancel }}\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-flat-button\r\n color=\"accent\"\r\n (click)=\"saveFilters()\"\r\n >\r\n {{ translations().save }}\r\n </button>\r\n </div>\r\n</mat-dialog-actions>\r\n", styles: [".filters-dialog-title .filters-show-hide{position:absolute;top:6px;right:15px}.filter{width:100%;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--surface-100, #e0e0e0)}.filter .filter-title{padding:.5rem 0;font-size:1rem;font-weight:500}.filter .filter-title p{margin:0;font-weight:500}.filter .filter-title mat-icon{cursor:pointer}.filter .filter-title .filter-value-clear{font-size:1.2rem;width:1.2rem;height:1.2rem;margin-top:-2px;margin-left:.5rem;color:red}.filter .filter-content{margin-top:.5rem;gap:.5rem}.filter .filter-content.hide{display:none}.filter .filter-content>div.col-auto,.filter .filter-content>div.col{padding:0!important}.filter .filter-content mat-form-field{width:100%}.dialog-actions-wrapper{width:100%}\n"] }]
610
+ }] });
651
611
 
652
612
  class MaterialTableOrderColumnDialogComponent {
653
- constructor(dialogData, dialogRef, stTablesTranslations) {
654
- this.dialogData = dialogData;
655
- this.dialogRef = dialogRef;
656
- this.stTablesTranslations = stTablesTranslations;
657
- this.columns = [];
658
- }
659
- ngOnInit() {
660
- this.columns = this.dialogData.columns.map(column => ({ ...column }));
613
+ constructor() {
614
+ this.dialogData = inject(MAT_DIALOG_DATA);
615
+ this.dialogRef = inject((MatDialogRef));
616
+ this.stTablesTranslations = inject(StTablesTranslationsService);
617
+ // Use signal for reactive columns array
618
+ this.columns = signal(this.dialogData.columns.map(column => ({ ...column })));
661
619
  }
662
620
  drop(event) {
663
- moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
621
+ this.columns.update(cols => {
622
+ const newCols = [...cols];
623
+ moveItemInArray(newCols, event.previousIndex, event.currentIndex);
624
+ return newCols;
625
+ });
664
626
  }
665
627
  saveOrder() {
666
628
  this.dialogRef.close({
667
- columnsOrder: this.columns.map(column => column.field),
629
+ columnsOrder: this.columns().map(column => column.field),
668
630
  });
669
631
  }
670
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableOrderColumnDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: StTablesTranslationsService }], target: i0.ɵɵFactoryTarget.Component }); }
671
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableOrderColumnDialogComponent, selector: "st-material-table-order-column-dialog", ngImport: i0, template: "<h3 mat-dialog-title>\r\n {{ stTablesTranslations.getTranslations()().reorderColumns }}\r\n</h3>\r\n<mat-dialog-content>\r\n <div\r\n cdkDropList\r\n class=\"reorder-column-list\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n >\r\n @for (column of columns; track column.field) {\r\n <div class=\"reorder-column-element\" cdkDrag>\r\n <div class=\"row\">\r\n <mat-icon>drag_indicator</mat-icon>\r\n <p>{{ column.selectColumnLabel || column.header }}</p>\r\n </div>\r\n @if (!column.visible) {\r\n <mat-icon class=\"column-hidden\">visibility_off</mat-icon>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n <button type=\"button\" mat-flat-button mat-dialog-close>\r\n {{ stTablesTranslations.getTranslations()().close }}\r\n </button>\r\n <button type=\"button\" mat-flat-button color=\"accent\" (click)=\"saveOrder()\">\r\n {{ stTablesTranslations.getTranslations()().save }}\r\n </button>\r\n </div>\r\n</mat-dialog-actions>\r\n", styles: [".reorder-column-list{width:100%;border:solid 1px #ccc}.reorder-column-list .reorder-column-element{width:100%;padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff}.reorder-column-list .reorder-column-element:last-child{border-bottom:none}.reorder-column-list .reorder-column-element .column-hidden{opacity:.3}.reorder-column-list .reorder-column-element p{margin-bottom:0;font-size:1.1rem}.cdk-drag-preview{overflow-y:hidden;padding:10px;border:none;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-preview p{margin-top:5px}.cdk-drag-preview mat-icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.reorder-column-element:last-child{border:none}.reorder-column-list.cdk-drop-list-dragging .reorder-column-element:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ 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: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i5$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] }); }
632
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableOrderColumnDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
633
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableOrderColumnDialogComponent, selector: "st-material-table-order-column-dialog", ngImport: i0, template: "<h3 mat-dialog-title>\r\n {{ stTablesTranslations.getTranslations()().reorderColumns }}\r\n</h3>\r\n<mat-dialog-content>\r\n <div\r\n cdkDropList\r\n class=\"reorder-column-list\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n >\r\n @for (column of columns(); track column.field) {\r\n <div class=\"reorder-column-element\" cdkDrag>\r\n <div class=\"row\">\r\n <mat-icon>drag_indicator</mat-icon>\r\n <p>{{ column.selectColumnLabel || column.header }}</p>\r\n </div>\r\n @if (!column.visible) {\r\n <mat-icon class=\"column-hidden\">visibility_off</mat-icon>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n <button type=\"button\" mat-flat-button mat-dialog-close>\r\n {{ stTablesTranslations.getTranslations()().close }}\r\n </button>\r\n <button type=\"button\" mat-flat-button color=\"accent\" (click)=\"saveOrder()\">\r\n {{ stTablesTranslations.getTranslations()().save }}\r\n </button>\r\n </div>\r\n</mat-dialog-actions>\r\n", styles: [".reorder-column-list{width:100%;border:solid 1px #ccc}.reorder-column-list .reorder-column-element{width:100%;padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff}.reorder-column-list .reorder-column-element:last-child{border-bottom:none}.reorder-column-list .reorder-column-element .column-hidden{opacity:.3}.reorder-column-list .reorder-column-element p{margin-bottom:0;font-size:1.1rem}.cdk-drag-preview{overflow-y:hidden;padding:10px;border:none;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-preview p{margin-top:5px}.cdk-drag-preview mat-icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.reorder-column-element:last-child{border:none}.reorder-column-list.cdk-drop-list-dragging .reorder-column-element:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i5$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i5$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i5$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
672
634
  }
673
635
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableOrderColumnDialogComponent, decorators: [{
674
636
  type: Component,
675
- args: [{ selector: 'st-material-table-order-column-dialog', template: "<h3 mat-dialog-title>\r\n {{ stTablesTranslations.getTranslations()().reorderColumns }}\r\n</h3>\r\n<mat-dialog-content>\r\n <div\r\n cdkDropList\r\n class=\"reorder-column-list\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n >\r\n @for (column of columns; track column.field) {\r\n <div class=\"reorder-column-element\" cdkDrag>\r\n <div class=\"row\">\r\n <mat-icon>drag_indicator</mat-icon>\r\n <p>{{ column.selectColumnLabel || column.header }}</p>\r\n </div>\r\n @if (!column.visible) {\r\n <mat-icon class=\"column-hidden\">visibility_off</mat-icon>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n <button type=\"button\" mat-flat-button mat-dialog-close>\r\n {{ stTablesTranslations.getTranslations()().close }}\r\n </button>\r\n <button type=\"button\" mat-flat-button color=\"accent\" (click)=\"saveOrder()\">\r\n {{ stTablesTranslations.getTranslations()().save }}\r\n </button>\r\n </div>\r\n</mat-dialog-actions>\r\n", styles: [".reorder-column-list{width:100%;border:solid 1px #ccc}.reorder-column-list .reorder-column-element{width:100%;padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff}.reorder-column-list .reorder-column-element:last-child{border-bottom:none}.reorder-column-list .reorder-column-element .column-hidden{opacity:.3}.reorder-column-list .reorder-column-element p{margin-bottom:0;font-size:1.1rem}.cdk-drag-preview{overflow-y:hidden;padding:10px;border:none;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-preview p{margin-top:5px}.cdk-drag-preview mat-icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.reorder-column-element:last-child{border:none}.reorder-column-list.cdk-drop-list-dragging .reorder-column-element:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
676
- }], ctorParameters: () => [{ type: undefined, decorators: [{
677
- type: Inject,
678
- args: [MAT_DIALOG_DATA]
679
- }] }, { type: i1.MatDialogRef }, { type: StTablesTranslationsService }] });
637
+ args: [{ selector: 'st-material-table-order-column-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<h3 mat-dialog-title>\r\n {{ stTablesTranslations.getTranslations()().reorderColumns }}\r\n</h3>\r\n<mat-dialog-content>\r\n <div\r\n cdkDropList\r\n class=\"reorder-column-list\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n >\r\n @for (column of columns(); track column.field) {\r\n <div class=\"reorder-column-element\" cdkDrag>\r\n <div class=\"row\">\r\n <mat-icon>drag_indicator</mat-icon>\r\n <p>{{ column.selectColumnLabel || column.header }}</p>\r\n </div>\r\n @if (!column.visible) {\r\n <mat-icon class=\"column-hidden\">visibility_off</mat-icon>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n <button type=\"button\" mat-flat-button mat-dialog-close>\r\n {{ stTablesTranslations.getTranslations()().close }}\r\n </button>\r\n <button type=\"button\" mat-flat-button color=\"accent\" (click)=\"saveOrder()\">\r\n {{ stTablesTranslations.getTranslations()().save }}\r\n </button>\r\n </div>\r\n</mat-dialog-actions>\r\n", styles: [".reorder-column-list{width:100%;border:solid 1px #ccc}.reorder-column-list .reorder-column-element{width:100%;padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff}.reorder-column-list .reorder-column-element:last-child{border-bottom:none}.reorder-column-list .reorder-column-element .column-hidden{opacity:.3}.reorder-column-list .reorder-column-element p{margin-bottom:0;font-size:1.1rem}.cdk-drag-preview{overflow-y:hidden;padding:10px;border:none;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-preview p{margin-top:5px}.cdk-drag-preview mat-icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.reorder-column-element:last-child{border:none}.reorder-column-list.cdk-drop-list-dragging .reorder-column-element:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
638
+ }] });
680
639
 
681
640
  class MaterialTableCaptionComponent extends StSubscribeDestroyComponent {
682
- set columns(data) {
683
- this._columns = data ? data : [];
684
- this.updateColumns();
685
- }
686
- get columns() {
687
- return this._columns;
688
- }
689
- constructor(stTableTranslations, dialog) {
690
- super();
691
- this.stTableTranslations = stTableTranslations;
692
- this.dialog = dialog;
641
+ constructor() {
642
+ super(...arguments);
643
+ this.stTableTranslations = inject(StTablesTranslationsService);
644
+ this.dialog = inject(MatDialog);
693
645
  this.showGlobalSearch = input();
694
646
  this.tableTitle = input('');
695
647
  this.allowPickColumns = input(true);
@@ -698,11 +650,18 @@ class MaterialTableCaptionComponent extends StSubscribeDestroyComponent {
698
650
  this.initFilters = input({});
699
651
  this.showCreateButton = input(false);
700
652
  this.createButtonLabel = input('Create');
701
- this.createButtonAction = input(() => { });
653
+ this.createButtonAction = input();
702
654
  this.allowCreateRow = input(false);
703
655
  this.disableCreateButton = input(false);
704
656
  this.creatingRow = input(false);
705
657
  this.extraCustomFilter = input();
658
+ this.columns = input([], {
659
+ transform: (data) => {
660
+ this._columns = data ? data : [];
661
+ this.updateColumns();
662
+ return this._columns;
663
+ },
664
+ });
706
665
  this._columns = [];
707
666
  this.captionDataChanged = output();
708
667
  this.resetTableSettings = output();
@@ -710,22 +669,38 @@ class MaterialTableCaptionComponent extends StSubscribeDestroyComponent {
710
669
  this.showFilterButton = false;
711
670
  this.selectedColumns = new FormControl([]);
712
671
  this.globalSearch = new FormControl('');
713
- this.activeFiltersCount = 0;
672
+ this.filtersSignal = signal({});
673
+ // Computed property for active filters count - more efficient than recalculating every time
674
+ this.activeFiltersCount = computed(() => {
675
+ const filters = this.filtersSignal();
676
+ return Object.keys(filters).filter(key => {
677
+ const filterValue = filters[key]?.value;
678
+ if (Array.isArray(filterValue)) {
679
+ return filterValue.some(value => value !== null && value !== '');
680
+ }
681
+ return filterValue !== null && filterValue !== '';
682
+ }).length;
683
+ });
714
684
  this.columnsOrder = [];
715
- this.filters = {};
685
+ }
686
+ get filters() {
687
+ return this.filtersSignal();
688
+ }
689
+ set filters(value) {
690
+ this.filtersSignal.set(value);
716
691
  }
717
692
  ngOnInit() {
718
693
  this.globalSearch.setValue(this.initGlobalSearch() || '');
719
694
  this.filters = this.initFilters() || {};
720
- this.setActiveFiltersCount();
695
+ // Optimized: debounceTime already prevents rapid emissions, no need for distinctUntilChanged
721
696
  this.selectedColumns.valueChanges
722
- .pipe(takeUntil(this.ngDestroyed$), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)), debounceTime(400))
723
- .subscribe(value => {
697
+ .pipe(takeUntil(this.ngDestroyed$), debounceTime(400))
698
+ .subscribe(() => {
724
699
  this.emitCaptionDataChanged();
725
700
  });
726
701
  this.globalSearch.valueChanges
727
- .pipe(takeUntil(this.ngDestroyed$), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)), debounceTime(400))
728
- .subscribe(value => {
702
+ .pipe(takeUntil(this.ngDestroyed$), debounceTime(400))
703
+ .subscribe(() => {
729
704
  this.emitCaptionDataChanged();
730
705
  });
731
706
  }
@@ -734,7 +709,7 @@ class MaterialTableCaptionComponent extends StSubscribeDestroyComponent {
734
709
  .open(MaterialTableFilterDialogComponent, {
735
710
  data: {
736
711
  initFilters: this.filters,
737
- columns: this.columns,
712
+ columns: this.columns(),
738
713
  },
739
714
  maxWidth: '550px',
740
715
  width: '100%',
@@ -744,7 +719,6 @@ class MaterialTableCaptionComponent extends StSubscribeDestroyComponent {
744
719
  .pipe(take(1), filter(StBaseService.notNull))
745
720
  .subscribe((res) => {
746
721
  this.filters = res.filters;
747
- this.setActiveFiltersCount();
748
722
  this.emitCaptionDataChanged();
749
723
  });
750
724
  }
@@ -752,7 +726,7 @@ class MaterialTableCaptionComponent extends StSubscribeDestroyComponent {
752
726
  this.dialog
753
727
  .open(MaterialTableOrderColumnDialogComponent, {
754
728
  data: {
755
- columns: this.columns,
729
+ columns: this.columns(),
756
730
  },
757
731
  maxWidth: '450px',
758
732
  width: '100%',
@@ -774,8 +748,9 @@ class MaterialTableCaptionComponent extends StSubscribeDestroyComponent {
774
748
  }
775
749
  }
776
750
  createButtonClicked() {
777
- if (this.createButtonAction()) {
778
- this.createButtonAction()();
751
+ const action = this.createButtonAction();
752
+ if (action) {
753
+ action();
779
754
  }
780
755
  }
781
756
  // clearAllFilters() {
@@ -803,45 +778,16 @@ class MaterialTableCaptionComponent extends StSubscribeDestroyComponent {
803
778
  this.selectedColumns.setValue(this._columns.filter(col => col.visible).map(col => col.field) || []);
804
779
  this.columnsOrder = this._columns.map(col => col.field) || [];
805
780
  }
806
- setActiveFiltersCount() {
807
- const filtersKeys = Object.keys(this.filters);
808
- this.activeFiltersCount = filtersKeys.filter(key => {
809
- const filterValue = this.filters[key]?.value;
810
- if (Array.isArray(filterValue)) {
811
- // Dla filtrów typu date (które są tablicami)
812
- return filterValue.some(value => value !== null && value !== '');
813
- }
814
- // Dla pozostałych typów filtrów
815
- return filterValue !== null && filterValue !== '';
816
- }).length;
817
- }
818
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableCaptionComponent, deps: [{ token: StTablesTranslationsService }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
819
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: { showGlobalSearch: { classPropertyName: "showGlobalSearch", publicName: "showGlobalSearch", isSignal: true, isRequired: false, transformFunction: null }, tableTitle: { classPropertyName: "tableTitle", publicName: "tableTitle", 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 }, initGlobalSearch: { classPropertyName: "initGlobalSearch", publicName: "initGlobalSearch", isSignal: true, isRequired: false, transformFunction: null }, initFilters: { classPropertyName: "initFilters", publicName: "initFilters", 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 }, allowCreateRow: { classPropertyName: "allowCreateRow", publicName: "allowCreateRow", isSignal: true, isRequired: false, transformFunction: null }, disableCreateButton: { classPropertyName: "disableCreateButton", publicName: "disableCreateButton", isSignal: true, isRequired: false, transformFunction: null }, creatingRow: { classPropertyName: "creatingRow", publicName: "creatingRow", isSignal: true, isRequired: false, transformFunction: null }, extraCustomFilter: { classPropertyName: "extraCustomFilter", publicName: "extraCustomFilter", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { captionDataChanged: "captionDataChanged", resetTableSettings: "resetTableSettings", addNewRow: "addNewRow" }, usesInheritance: true, ngImport: i0, template: "@if (\r\n allowPickColumns() ||\r\n tableTitle() ||\r\n allowReorderColumns() ||\r\n showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton()\r\n) {\r\n <div\r\n class=\"st-material-table-caption row align-items-center\"\r\n [ngClass]=\"{\r\n 'justify-content-between':\r\n (allowPickColumns() || tableTitle() || allowReorderColumns()) &&\r\n (showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton() ||\r\n extraCustomFilter()),\r\n 'justify-content-end':\r\n !allowPickColumns() && !tableTitle() && !allowReorderColumns()\r\n }\"\r\n >\r\n @if (allowPickColumns() || tableTitle() || allowReorderColumns()) {\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 @if (allowPickColumns()) {\r\n <mat-form-field appearance=\"outline\" class=\"caption-select-columns\">\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\r\n [value]=\"column.field\"\r\n [disabled]=\"column.type === 'actions'\"\r\n style=\"text-transform: capitalize\"\r\n >{{\r\n column.selectColumnLabel || column.header || column.field\r\n }}</mat-option\r\n >\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n\r\n @if (allowPickColumns() || tableTitle()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"resetTable()\"\r\n [matTooltip]=\"\r\n stTableTranslations.getTranslations()().resetTableSettings\r\n \"\r\n >\r\n <mat-icon class=\"reorder-icon\">refresh</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (allowReorderColumns()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"openReorderColumnsDialog()\"\r\n >\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 (\r\n showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton() ||\r\n extraCustomFilter()\r\n ) {\r\n <div class=\"col-auto d-flex align-items-center gap-1\">\r\n @if (extraCustomFilter()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"extraCustomFilter()!\"\r\n ></ng-container>\r\n }\r\n\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 type=\"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\" class=\"search-field\">\r\n <input\r\n matInput\r\n [formControl]=\"globalSearch\"\r\n [placeholder]=\"\r\n stTableTranslations.getTranslations()().globalSearch\r\n \"\r\n />\r\n <button\r\n type=\"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>close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n }\r\n\r\n @if (allowCreateRow()) {\r\n <button\r\n type=\"button\"\r\n color=\"primary\"\r\n mat-icon-button\r\n [disabled]=\"disableCreateButton() || creatingRow()\"\r\n (click)=\"createRowClicked()\"\r\n >\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (showCreateButton()) {\r\n <button\r\n type=\"button\"\r\n color=\"primary\"\r\n mat-flat-button\r\n [disabled]=\"disableCreateButton() || creatingRow()\"\r\n (click)=\"createButtonClicked()\"\r\n >\r\n {{ createButtonLabel() }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [".st-material-table-caption{width:100%;margin-top:5px;margin-bottom:5px;padding:0 5px;min-height:48px}.st-material-table-caption>.col-auto{padding:0}.st-material-table-caption .search-field{max-width:210px}.st-material-table-caption .table-title{font-size:1.2rem;margin-bottom:0;font-weight:500}.st-material-table-caption .reorder-icon{transform:scaleX(-1) rotate(90deg)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.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: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i10.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: i10.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i11.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i12.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
781
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableCaptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
782
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: { showGlobalSearch: { classPropertyName: "showGlobalSearch", publicName: "showGlobalSearch", isSignal: true, isRequired: false, transformFunction: null }, tableTitle: { classPropertyName: "tableTitle", publicName: "tableTitle", 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 }, initGlobalSearch: { classPropertyName: "initGlobalSearch", publicName: "initGlobalSearch", isSignal: true, isRequired: false, transformFunction: null }, initFilters: { classPropertyName: "initFilters", publicName: "initFilters", 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 }, allowCreateRow: { classPropertyName: "allowCreateRow", publicName: "allowCreateRow", isSignal: true, isRequired: false, transformFunction: null }, disableCreateButton: { classPropertyName: "disableCreateButton", publicName: "disableCreateButton", isSignal: true, isRequired: false, transformFunction: null }, creatingRow: { classPropertyName: "creatingRow", publicName: "creatingRow", isSignal: true, isRequired: false, transformFunction: null }, extraCustomFilter: { classPropertyName: "extraCustomFilter", publicName: "extraCustomFilter", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { captionDataChanged: "captionDataChanged", resetTableSettings: "resetTableSettings", addNewRow: "addNewRow" }, usesInheritance: true, ngImport: i0, template: "@if (\r\n allowPickColumns() ||\r\n tableTitle() ||\r\n allowReorderColumns() ||\r\n showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton()\r\n) {\r\n <div\r\n class=\"st-material-table-caption row align-items-center\"\r\n [ngClass]=\"{\r\n 'justify-content-between':\r\n (allowPickColumns() || tableTitle() || allowReorderColumns()) &&\r\n (showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton() ||\r\n extraCustomFilter()),\r\n 'justify-content-end':\r\n !allowPickColumns() && !tableTitle() && !allowReorderColumns()\r\n }\"\r\n >\r\n @if (allowPickColumns() || tableTitle() || allowReorderColumns()) {\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 @if (allowPickColumns()) {\r\n <mat-form-field appearance=\"outline\" class=\"caption-select-columns\">\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\r\n [value]=\"column.field\"\r\n [disabled]=\"column.type === 'actions'\"\r\n style=\"text-transform: capitalize\"\r\n >{{\r\n column.selectColumnLabel || column.header || column.field\r\n }}</mat-option\r\n >\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n\r\n @if (allowPickColumns() || tableTitle()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"resetTable()\"\r\n [matTooltip]=\"\r\n stTableTranslations.getTranslations()().resetTableSettings\r\n \"\r\n >\r\n <mat-icon class=\"reorder-icon\">refresh</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (allowReorderColumns()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"openReorderColumnsDialog()\"\r\n >\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 (\r\n showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton() ||\r\n extraCustomFilter()\r\n ) {\r\n <div class=\"col-auto d-flex align-items-center gap-1\">\r\n @if (extraCustomFilter()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"extraCustomFilter()!\"\r\n ></ng-container>\r\n }\r\n\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 type=\"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\" class=\"search-field\">\r\n <input\r\n matInput\r\n [formControl]=\"globalSearch\"\r\n [placeholder]=\"\r\n stTableTranslations.getTranslations()().globalSearch\r\n \"\r\n />\r\n <button\r\n type=\"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>close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n }\r\n\r\n @if (allowCreateRow()) {\r\n <button\r\n type=\"button\"\r\n color=\"primary\"\r\n mat-icon-button\r\n [disabled]=\"disableCreateButton() || creatingRow()\"\r\n (click)=\"createRowClicked()\"\r\n >\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (showCreateButton()) {\r\n <button\r\n type=\"button\"\r\n color=\"primary\"\r\n mat-flat-button\r\n [disabled]=\"disableCreateButton() || creatingRow()\"\r\n (click)=\"createButtonClicked()\"\r\n >\r\n {{ createButtonLabel() }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [".st-material-table-caption{width:100%;margin-top:5px;margin-bottom:5px;padding:0 5px;min-height:48px}.st-material-table-caption>.col-auto{padding:0}.st-material-table-caption .search-field{max-width:210px}.st-material-table-caption .table-title{font-size:1.2rem;margin-bottom:0;font-weight:500}.st-material-table-caption .reorder-icon{transform:scaleX(-1) rotate(90deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.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: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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.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.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i10.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
820
783
  }
821
784
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableCaptionComponent, decorators: [{
822
785
  type: Component,
823
- args: [{ selector: 'st-material-table-caption', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (\r\n allowPickColumns() ||\r\n tableTitle() ||\r\n allowReorderColumns() ||\r\n showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton()\r\n) {\r\n <div\r\n class=\"st-material-table-caption row align-items-center\"\r\n [ngClass]=\"{\r\n 'justify-content-between':\r\n (allowPickColumns() || tableTitle() || allowReorderColumns()) &&\r\n (showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton() ||\r\n extraCustomFilter()),\r\n 'justify-content-end':\r\n !allowPickColumns() && !tableTitle() && !allowReorderColumns()\r\n }\"\r\n >\r\n @if (allowPickColumns() || tableTitle() || allowReorderColumns()) {\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 @if (allowPickColumns()) {\r\n <mat-form-field appearance=\"outline\" class=\"caption-select-columns\">\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\r\n [value]=\"column.field\"\r\n [disabled]=\"column.type === 'actions'\"\r\n style=\"text-transform: capitalize\"\r\n >{{\r\n column.selectColumnLabel || column.header || column.field\r\n }}</mat-option\r\n >\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n\r\n @if (allowPickColumns() || tableTitle()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"resetTable()\"\r\n [matTooltip]=\"\r\n stTableTranslations.getTranslations()().resetTableSettings\r\n \"\r\n >\r\n <mat-icon class=\"reorder-icon\">refresh</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (allowReorderColumns()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"openReorderColumnsDialog()\"\r\n >\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 (\r\n showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton() ||\r\n extraCustomFilter()\r\n ) {\r\n <div class=\"col-auto d-flex align-items-center gap-1\">\r\n @if (extraCustomFilter()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"extraCustomFilter()!\"\r\n ></ng-container>\r\n }\r\n\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 type=\"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\" class=\"search-field\">\r\n <input\r\n matInput\r\n [formControl]=\"globalSearch\"\r\n [placeholder]=\"\r\n stTableTranslations.getTranslations()().globalSearch\r\n \"\r\n />\r\n <button\r\n type=\"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>close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n }\r\n\r\n @if (allowCreateRow()) {\r\n <button\r\n type=\"button\"\r\n color=\"primary\"\r\n mat-icon-button\r\n [disabled]=\"disableCreateButton() || creatingRow()\"\r\n (click)=\"createRowClicked()\"\r\n >\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (showCreateButton()) {\r\n <button\r\n type=\"button\"\r\n color=\"primary\"\r\n mat-flat-button\r\n [disabled]=\"disableCreateButton() || creatingRow()\"\r\n (click)=\"createButtonClicked()\"\r\n >\r\n {{ createButtonLabel() }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [".st-material-table-caption{width:100%;margin-top:5px;margin-bottom:5px;padding:0 5px;min-height:48px}.st-material-table-caption>.col-auto{padding:0}.st-material-table-caption .search-field{max-width:210px}.st-material-table-caption .table-title{font-size:1.2rem;margin-bottom:0;font-weight:500}.st-material-table-caption .reorder-icon{transform:scaleX(-1) rotate(90deg)}\n"] }]
824
- }], ctorParameters: () => [{ type: StTablesTranslationsService }, { type: i1.MatDialog }], propDecorators: { columns: [{
825
- type: Input
826
- }] } });
786
+ args: [{ selector: 'st-material-table-caption', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (\r\n allowPickColumns() ||\r\n tableTitle() ||\r\n allowReorderColumns() ||\r\n showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton()\r\n) {\r\n <div\r\n class=\"st-material-table-caption row align-items-center\"\r\n [ngClass]=\"{\r\n 'justify-content-between':\r\n (allowPickColumns() || tableTitle() || allowReorderColumns()) &&\r\n (showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton() ||\r\n extraCustomFilter()),\r\n 'justify-content-end':\r\n !allowPickColumns() && !tableTitle() && !allowReorderColumns()\r\n }\"\r\n >\r\n @if (allowPickColumns() || tableTitle() || allowReorderColumns()) {\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 @if (allowPickColumns()) {\r\n <mat-form-field appearance=\"outline\" class=\"caption-select-columns\">\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\r\n [value]=\"column.field\"\r\n [disabled]=\"column.type === 'actions'\"\r\n style=\"text-transform: capitalize\"\r\n >{{\r\n column.selectColumnLabel || column.header || column.field\r\n }}</mat-option\r\n >\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n\r\n @if (allowPickColumns() || tableTitle()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"resetTable()\"\r\n [matTooltip]=\"\r\n stTableTranslations.getTranslations()().resetTableSettings\r\n \"\r\n >\r\n <mat-icon class=\"reorder-icon\">refresh</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (allowReorderColumns()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n (click)=\"openReorderColumnsDialog()\"\r\n >\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 (\r\n showGlobalSearch() ||\r\n showFilterButton ||\r\n showCreateButton() ||\r\n extraCustomFilter()\r\n ) {\r\n <div class=\"col-auto d-flex align-items-center gap-1\">\r\n @if (extraCustomFilter()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"extraCustomFilter()!\"\r\n ></ng-container>\r\n }\r\n\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 type=\"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\" class=\"search-field\">\r\n <input\r\n matInput\r\n [formControl]=\"globalSearch\"\r\n [placeholder]=\"\r\n stTableTranslations.getTranslations()().globalSearch\r\n \"\r\n />\r\n <button\r\n type=\"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>close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n }\r\n\r\n @if (allowCreateRow()) {\r\n <button\r\n type=\"button\"\r\n color=\"primary\"\r\n mat-icon-button\r\n [disabled]=\"disableCreateButton() || creatingRow()\"\r\n (click)=\"createRowClicked()\"\r\n >\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (showCreateButton()) {\r\n <button\r\n type=\"button\"\r\n color=\"primary\"\r\n mat-flat-button\r\n [disabled]=\"disableCreateButton() || creatingRow()\"\r\n (click)=\"createButtonClicked()\"\r\n >\r\n {{ createButtonLabel() }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [".st-material-table-caption{width:100%;margin-top:5px;margin-bottom:5px;padding:0 5px;min-height:48px}.st-material-table-caption>.col-auto{padding:0}.st-material-table-caption .search-field{max-width:210px}.st-material-table-caption .table-title{font-size:1.2rem;margin-bottom:0;font-weight:500}.st-material-table-caption .reorder-icon{transform:scaleX(-1) rotate(90deg)}\n"] }]
787
+ }] });
827
788
 
828
789
  class MaterialTableRowCellComponent {
829
- set rowEditing(data) {
830
- const wasNotEditing = !this._rowEditing;
831
- this._rowEditing = data;
832
- if (data) {
833
- this.getDynamicSelectData();
834
- // Focus first editable field when entering edit mode
835
- if (wasNotEditing && this.isFirstEditableColumn()) {
836
- this.focusFirstEditableField();
837
- }
838
- }
839
- }
840
- get rowEditing() {
841
- return this._rowEditing;
842
- }
843
- constructor(changeDetectorRef) {
844
- this.changeDetectorRef = changeDetectorRef;
790
+ constructor() {
845
791
  this.column = input.required();
846
792
  this.rowData = input.required();
847
793
  this.rowIndex = input.required();
@@ -851,33 +797,63 @@ class MaterialTableRowCellComponent {
851
797
  this.selectRowOnlyOne = input(false);
852
798
  this.isFirstEditableColumn = input(false);
853
799
  this.autoSaveOnChange = input(false);
854
- this._rowEditing = false;
855
800
  this.rowIsSelected = input(false);
856
801
  this.rowIsExpanded = input(false);
802
+ this.rowEditing = input(false);
857
803
  this.saveEditRowEmitter = output();
858
804
  this.cancelEditRowEmitter = output();
859
805
  this.editRowEmitter = output();
860
806
  this.deleteRowEmitter = output();
861
807
  this.selectRowChange = output();
862
808
  this.fieldValueChanged = output();
863
- this.mobileView = false;
809
+ this.mobileView = signal(false);
810
+ // Computed for action icon colors
864
811
  this.actionIconColorDef = {
865
812
  edit: 'primary',
866
813
  delete: 'warn',
867
814
  };
868
815
  this.dynamicSelectOptions = signal([]);
869
- }
870
- ngOnInit() {
871
- window.addEventListener('resize', event => {
872
- this.checkWidthSize();
816
+ // Use computed to determine if dynamic select data needs to be loaded
817
+ this.needsDynamicSelect = computed(() => {
818
+ const col = this.column();
819
+ return (col?.allowEditColumn &&
820
+ col?.rowEditType === 'custom-dynamic-select' &&
821
+ !!col?.dynamicRowEditOptions);
822
+ });
823
+ this.previousRowEditing = false;
824
+ // Use ResizeObserver instead of window resize event
825
+ this.resizeObserver = new ResizeObserver(() => {
826
+ const isMobile = document.body.clientWidth <= 1100;
827
+ if (this.mobileView() !== isMobile) {
828
+ this.mobileView.set(isMobile);
829
+ }
830
+ });
831
+ this.resizeObserver.observe(document.body);
832
+ // Initialize mobile view state
833
+ this.mobileView.set(document.body.clientWidth <= 1100);
834
+ // Effect to handle rowEditing changes
835
+ effect(() => {
836
+ const isEditing = this.rowEditing();
837
+ const wasNotEditing = !this.previousRowEditing;
838
+ this.previousRowEditing = isEditing;
839
+ if (isEditing) {
840
+ this.getDynamicSelectData();
841
+ // Focus first editable field when entering edit mode
842
+ if (wasNotEditing && this.isFirstEditableColumn()) {
843
+ this.focusFirstEditableField();
844
+ }
845
+ }
873
846
  });
874
847
  }
875
848
  ngAfterViewInit() {
876
849
  // If row is already in edit mode on init (e.g., newly added row), focus the field
877
- if (this.rowEditing && this.isFirstEditableColumn()) {
850
+ if (this.rowEditing() && this.isFirstEditableColumn()) {
878
851
  this.focusFirstEditableField();
879
852
  }
880
853
  }
854
+ ngOnDestroy() {
855
+ this.resizeObserver?.disconnect();
856
+ }
881
857
  focusFirstEditableField() {
882
858
  // Use setTimeout to ensure the view is fully rendered
883
859
  setTimeout(() => {
@@ -914,83 +890,26 @@ class MaterialTableRowCellComponent {
914
890
  this.fieldValueChanged.emit({ field, value });
915
891
  }
916
892
  }
917
- checkWidthSize() {
918
- this.mobileView = document.body.clientWidth <= 1100;
919
- this.changeDetectorRef.markForCheck();
920
- }
921
893
  getDynamicSelectData() {
922
- if (this.column() &&
923
- this.column().allowEditColumn &&
924
- this.column().rowEditType === 'custom-dynamic-select' &&
925
- this.column().dynamicRowEditOptions) {
894
+ if (this.needsDynamicSelect()) {
926
895
  this.dynamicSelectOptions.set(this.column().dynamicRowEditOptions(this.rowData()));
927
896
  }
928
897
  }
929
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableRowCellComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
930
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableRowCellComponent, selector: "st-material-table-row-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, rowDataCopy: { classPropertyName: "rowDataCopy", publicName: "rowDataCopy", isSignal: true, isRequired: false, transformFunction: null }, canEditRowValidator: { classPropertyName: "canEditRowValidator", publicName: "canEditRowValidator", isSignal: true, isRequired: false, transformFunction: null }, canDeleteRowValidator: { classPropertyName: "canDeleteRowValidator", publicName: "canDeleteRowValidator", isSignal: true, isRequired: false, transformFunction: null }, selectRowOnlyOne: { classPropertyName: "selectRowOnlyOne", publicName: "selectRowOnlyOne", isSignal: true, isRequired: false, transformFunction: null }, isFirstEditableColumn: { classPropertyName: "isFirstEditableColumn", publicName: "isFirstEditableColumn", isSignal: true, isRequired: false, transformFunction: null }, autoSaveOnChange: { classPropertyName: "autoSaveOnChange", publicName: "autoSaveOnChange", isSignal: true, isRequired: false, transformFunction: null }, rowEditing: { classPropertyName: "rowEditing", publicName: "rowEditing", isSignal: false, isRequired: false, transformFunction: null }, rowIsSelected: { classPropertyName: "rowIsSelected", publicName: "rowIsSelected", isSignal: true, isRequired: false, transformFunction: null }, rowIsExpanded: { classPropertyName: "rowIsExpanded", publicName: "rowIsExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saveEditRowEmitter: "saveEditRowEmitter", cancelEditRowEmitter: "cancelEditRowEmitter", editRowEmitter: "editRowEmitter", deleteRowEmitter: "deleteRowEmitter", selectRowChange: "selectRowChange", fieldValueChanged: "fieldValueChanged" }, viewQueries: [{ propertyName: "matInput", first: true, predicate: MatInput, descendants: true }, { propertyName: "matSelect", first: true, predicate: MatSelect, descendants: true }], ngImport: i0, template: "@switch (column().type || 'string') {\r\n @case ('custom-template') {\r\n @if (rowEditing && column().allowEditColumn) {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"column().customTemplate!\"\r\n [ngTemplateOutletContext]=\"{ data: rowData(), rowIndex: rowIndex() }\"\r\n ></ng-container>\r\n }\r\n }\r\n\r\n @case ('actions') {\r\n @if (column().actions) {\r\n @if (\r\n (!column().actionsInMenu && !mobileView) ||\r\n (mobileView && column().actions!.length <= 1)\r\n ) {\r\n <div [ngStyle]=\"{ float: column().flexRight ? 'right' : 'none' }\">\r\n @for (action of column().actions; track action) {\r\n @if ((action.show && action.show(rowData())) || !action.show) {\r\n @if (!action.url && action.action) {\r\n <button\r\n class=\"action-icon-button\"\r\n type=\"button\"\r\n mat-icon-button\r\n [color]=\"\r\n actionIconColorDef[action.iconName]\r\n ? actionIconColorDef[action.iconName]\r\n : action.iconColor\r\n \"\r\n [matTooltip]=\"action.tooltipName || ''\"\r\n [matTooltipDisabled]=\"!action.tooltipName\"\r\n (click)=\"\r\n $event.stopPropagation();\r\n action.action!(rowData(), rowIndex())\r\n \"\r\n >\r\n <mat-icon>{{ action.iconName }}</mat-icon>\r\n </button>\r\n }\r\n @if (action.url) {\r\n <a [routerLink]=\"action.url\">\r\n <button\r\n class=\"action-icon-button\"\r\n type=\"button\"\r\n mat-icon-button\r\n [color]=\"\r\n actionIconColorDef[action.iconName]\r\n ? actionIconColorDef[action.iconName]\r\n : action.iconColor\r\n \"\r\n [matTooltip]=\"action.tooltipName || ''\"\r\n [matTooltipDisabled]=\"!action.tooltipName\"\r\n >\r\n <mat-icon>{{ action.iconName }}</mat-icon>\r\n </button>\r\n </a>\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n @if (\r\n column().actionsInMenu || (mobileView && column().actions!.length > 1)\r\n ) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n @for (action of column().actions; track action) {\r\n @if ((action.show && action.show(rowData())) || !action.show) {\r\n @if (!action.url && action.action) {\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n (click)=\"$event.stopPropagation(); action.action!(rowData())\"\r\n >\r\n {{ action.tooltipName }}\r\n </button>\r\n }\r\n @if (action.url) {\r\n <a [routerLink]=\"action.url\">\r\n <button type=\"button\" mat-menu-item>\r\n {{ action.tooltipName }}\r\n </button>\r\n </a>\r\n }\r\n }\r\n }\r\n </mat-menu>\r\n }\r\n }\r\n }\r\n\r\n @case ('string') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('number') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('boolean') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('date') {\r\n @if (rowEditing && column().allowEditColumn) {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n } @else {\r\n {{ rowData()[column().field] | stDateFormatPipe }}\r\n }\r\n }\r\n\r\n @case ('actions-row-editing') {\r\n <div class=\"row justify-content-end\">\r\n @if (rowEditing) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"accent\"\r\n (click)=\"saveRow()\"\r\n [matTooltip]=\"'Save row'\"\r\n >\r\n <mat-icon>done</mat-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"cancelRow()\"\r\n [matTooltip]=\"'Cancel row'\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"primary\"\r\n (click)=\"editRow()\"\r\n [matTooltip]=\"'Edit row'\"\r\n [disabled]=\"\r\n canEditRowValidator() ? !canEditRowValidator()(rowData()) : false\r\n \"\r\n >\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"deleteRow()\"\r\n [matTooltip]=\"'Delete row'\"\r\n [disabled]=\"\r\n canDeleteRowValidator()\r\n ? !canDeleteRowValidator()(rowData())\r\n : false\r\n \"\r\n >\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n @case ('actions-row-selecting') {\r\n <!-- @if (selectRowOnlyOne()) {-->\r\n <!-- <mat-radio-button-->\r\n <!-- color=\"primary\"-->\r\n <!-- (click)=\"$event.stopPropagation()\"-->\r\n <!-- (change)=\"selectRow({ checked: true })\"-->\r\n <!-- [checked]=\"rowIsSelected()\"-->\r\n <!-- ></mat-radio-button>-->\r\n <!-- } @else {-->\r\n <mat-checkbox\r\n color=\"primary\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"selectRow($event)\"\r\n [checked]=\"rowIsSelected()\"\r\n ></mat-checkbox>\r\n <!-- }-->\r\n }\r\n\r\n @case ('actions-row-extending') {\r\n @if (rowIsExpanded()) {\r\n <mat-icon>keyboard_arrow_up</mat-icon>\r\n } @else {\r\n <mat-icon>keyboard_arrow_down</mat-icon>\r\n }\r\n }\r\n}\r\n\r\n<ng-template #baseFieldCell let-column>\r\n @if ((rowEditing || autoSaveOnChange()) && column.allowEditColumn) {\r\n @if (column.rowEditType === 'string' || column.rowEditType === 'number') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n >\r\n <input\r\n matInput\r\n [type]=\"column.rowEditType === 'string' ? 'text' : 'number'\"\r\n [(ngModel)]=\"\r\n autoSaveOnChange()\r\n ? rowData()[column.field]\r\n : rowDataCopy()![column.field]\r\n \"\r\n (ngModelChange)=\"\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n [required]=\"column.editColumnRequired\"\r\n />\r\n </mat-form-field>\r\n }\r\n @if (column.rowEditType === 'date') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n >\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker1\"\r\n [(ngModel)]=\"\r\n autoSaveOnChange()\r\n ? rowData()[column.field]\r\n : rowDataCopy()![column.field]\r\n \"\r\n (ngModelChange)=\"\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n [required]=\"column.editColumnRequired\"\r\n />\r\n <mat-datepicker-toggle\r\n matIconSuffix\r\n [for]=\"picker1\"\r\n ></mat-datepicker-toggle>\r\n <mat-datepicker #picker1></mat-datepicker>\r\n </mat-form-field>\r\n }\r\n @if (column.rowEditType === 'boolean') {\r\n <mat-checkbox\r\n [(ngModel)]=\"\r\n autoSaveOnChange()\r\n ? rowData()[column.field]\r\n : rowDataCopy()![column.field]\r\n \"\r\n (ngModelChange)=\"\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n ></mat-checkbox>\r\n }\r\n\r\n @if (column.rowEditType === 'custom') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n >\r\n <mat-select\r\n [(ngModel)]=\"\r\n autoSaveOnChange()\r\n ? rowData()[column.field]\r\n : rowDataCopy()![column.field]\r\n \"\r\n (ngModelChange)=\"\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n [required]=\"column.editColumnRequired\"\r\n >\r\n <mat-option value=\"\"></mat-option>\r\n @for (option of column.customRowEditOptions; track option) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n\r\n @if (column.rowEditType === 'custom-dynamic-select') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n >\r\n <mat-select\r\n [(ngModel)]=\"\r\n autoSaveOnChange()\r\n ? rowData()[column.field]\r\n : rowDataCopy()![column.field]\r\n \"\r\n (ngModelChange)=\"\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n [required]=\"column.editColumnRequired\"\r\n >\r\n @if (!column.editColumnRequired) {\r\n <mat-option value=\"\"></mat-option>\r\n }\r\n\r\n @for (option of dynamicSelectOptions(); track option) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n } @else {\r\n <div>\r\n @if (column.translateValue) {\r\n {{ column.translateValue![rowData()[column.field]] || '' }}\r\n }\r\n @if (column.customValueDisplay) {\r\n {{ column.customValueDisplay(rowData()[column.field]) }}\r\n }\r\n @if (!column.translateValue && !column.customValueDisplay) {\r\n {{ rowData()[column.field] }}\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n", styles: ["mat-form-field{padding:0 2px}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.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: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: i10.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: "component", type: i11.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i14.DateFormatPipe, name: "stDateFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
898
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableRowCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
899
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableRowCellComponent, selector: "st-material-table-row-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, rowDataCopy: { classPropertyName: "rowDataCopy", publicName: "rowDataCopy", isSignal: true, isRequired: false, transformFunction: null }, canEditRowValidator: { classPropertyName: "canEditRowValidator", publicName: "canEditRowValidator", isSignal: true, isRequired: false, transformFunction: null }, canDeleteRowValidator: { classPropertyName: "canDeleteRowValidator", publicName: "canDeleteRowValidator", isSignal: true, isRequired: false, transformFunction: null }, selectRowOnlyOne: { classPropertyName: "selectRowOnlyOne", publicName: "selectRowOnlyOne", isSignal: true, isRequired: false, transformFunction: null }, isFirstEditableColumn: { classPropertyName: "isFirstEditableColumn", publicName: "isFirstEditableColumn", isSignal: true, isRequired: false, transformFunction: null }, autoSaveOnChange: { classPropertyName: "autoSaveOnChange", publicName: "autoSaveOnChange", isSignal: true, isRequired: false, transformFunction: null }, rowIsSelected: { classPropertyName: "rowIsSelected", publicName: "rowIsSelected", isSignal: true, isRequired: false, transformFunction: null }, rowIsExpanded: { classPropertyName: "rowIsExpanded", publicName: "rowIsExpanded", isSignal: true, isRequired: false, transformFunction: null }, rowEditing: { classPropertyName: "rowEditing", publicName: "rowEditing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saveEditRowEmitter: "saveEditRowEmitter", cancelEditRowEmitter: "cancelEditRowEmitter", editRowEmitter: "editRowEmitter", deleteRowEmitter: "deleteRowEmitter", selectRowChange: "selectRowChange", fieldValueChanged: "fieldValueChanged" }, viewQueries: [{ propertyName: "matInput", first: true, predicate: MatInput, descendants: true }, { propertyName: "matSelect", first: true, predicate: MatSelect, descendants: true }], ngImport: i0, template: "@switch (column().type || 'string') {\r\n @case ('custom-template') {\r\n @if (rowEditing() && column().allowEditColumn) {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"column().customTemplate!\"\r\n [ngTemplateOutletContext]=\"{ data: rowData(), rowIndex: rowIndex() }\"\r\n ></ng-container>\r\n }\r\n }\r\n\r\n @case ('actions') {\r\n @if (column().actions) {\r\n @if (\r\n (!column().actionsInMenu && !mobileView()) ||\r\n (mobileView() && column().actions!.length <= 1)\r\n ) {\r\n <div [ngStyle]=\"{ float: column().flexRight ? 'right' : 'none' }\">\r\n @for (action of column().actions; track action) {\r\n @if ((action.show && action.show(rowData())) || !action.show) {\r\n @if (!action.url && action.action) {\r\n <button\r\n class=\"action-icon-button\"\r\n type=\"button\"\r\n mat-icon-button\r\n [color]=\"\r\n actionIconColorDef[action.iconName]\r\n ? actionIconColorDef[action.iconName]\r\n : action.iconColor\r\n \"\r\n [matTooltip]=\"action.tooltipName || ''\"\r\n [matTooltipDisabled]=\"!action.tooltipName\"\r\n (click)=\"\r\n $event.stopPropagation();\r\n action.action!(rowData(), rowIndex())\r\n \"\r\n >\r\n <mat-icon>{{ action.iconName }}</mat-icon>\r\n </button>\r\n }\r\n @if (action.url) {\r\n <a [routerLink]=\"action.url\">\r\n <button\r\n class=\"action-icon-button\"\r\n type=\"button\"\r\n mat-icon-button\r\n [color]=\"\r\n actionIconColorDef[action.iconName]\r\n ? actionIconColorDef[action.iconName]\r\n : action.iconColor\r\n \"\r\n [matTooltip]=\"action.tooltipName || ''\"\r\n [matTooltipDisabled]=\"!action.tooltipName\"\r\n >\r\n <mat-icon>{{ action.iconName }}</mat-icon>\r\n </button>\r\n </a>\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n @if (\r\n column().actionsInMenu || (mobileView() && column().actions!.length > 1)\r\n ) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n @for (action of column().actions; track action) {\r\n @if ((action.show && action.show(rowData())) || !action.show) {\r\n @if (!action.url && action.action) {\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n (click)=\"$event.stopPropagation(); action.action!(rowData())\"\r\n >\r\n {{ action.tooltipName }}\r\n </button>\r\n }\r\n @if (action.url) {\r\n <a [routerLink]=\"action.url\">\r\n <button type=\"button\" mat-menu-item>\r\n {{ action.tooltipName }}\r\n </button>\r\n </a>\r\n }\r\n }\r\n }\r\n </mat-menu>\r\n }\r\n }\r\n }\r\n\r\n @case ('string') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('number') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('boolean') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('date') {\r\n @if (rowEditing() && column().allowEditColumn) {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n } @else {\r\n {{ rowData()[column().field] | stDateFormatPipe }}\r\n }\r\n }\r\n\r\n @case ('actions-row-editing') {\r\n <div class=\"row justify-content-end\">\r\n @if (rowEditing()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"accent\"\r\n (click)=\"saveRow()\"\r\n [matTooltip]=\"'Save row'\"\r\n >\r\n <mat-icon>done</mat-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"cancelRow()\"\r\n [matTooltip]=\"'Cancel row'\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"primary\"\r\n (click)=\"editRow()\"\r\n [matTooltip]=\"'Edit row'\"\r\n [disabled]=\"\r\n canEditRowValidator() ? !canEditRowValidator()(rowData()) : false\r\n \"\r\n >\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"deleteRow()\"\r\n [matTooltip]=\"'Delete row'\"\r\n [disabled]=\"\r\n canDeleteRowValidator()\r\n ? !canDeleteRowValidator()(rowData())\r\n : false\r\n \"\r\n >\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n @case ('actions-row-selecting') {\r\n <!-- @if (selectRowOnlyOne()) {-->\r\n <!-- <mat-radio-button-->\r\n <!-- color=\"primary\"-->\r\n <!-- (click)=\"$event.stopPropagation()\"-->\r\n <!-- (change)=\"selectRow({ checked: true })\"-->\r\n <!-- [checked]=\"rowIsSelected()\"-->\r\n <!-- ></mat-radio-button>-->\r\n <!-- } @else {-->\r\n <mat-checkbox\r\n color=\"primary\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"selectRow($event)\"\r\n [checked]=\"rowIsSelected()\"\r\n ></mat-checkbox>\r\n <!-- }-->\r\n }\r\n\r\n @case ('actions-row-extending') {\r\n @if (rowIsExpanded()) {\r\n <mat-icon>keyboard_arrow_up</mat-icon>\r\n } @else {\r\n <mat-icon>keyboard_arrow_down</mat-icon>\r\n }\r\n }\r\n}\r\n\r\n<ng-template #baseFieldCell let-column>\r\n @if ((rowEditing() || autoSaveOnChange()) && column.allowEditColumn) {\r\n @if (column.rowEditType === 'string' || column.rowEditType === 'number') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n >\r\n <input\r\n matInput\r\n [type]=\"column.rowEditType === 'string' ? 'text' : 'number'\"\r\n [(ngModel)]=\"\r\n autoSaveOnChange()\r\n ? rowData()[column.field]\r\n : rowDataCopy()![column.field]\r\n \"\r\n (ngModelChange)=\"\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n [required]=\"column.editColumnRequired\"\r\n />\r\n </mat-form-field>\r\n }\r\n @if (column.rowEditType === 'date') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n >\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker1\"\r\n [(ngModel)]=\"\r\n autoSaveOnChange()\r\n ? rowData()[column.field]\r\n : rowDataCopy()![column.field]\r\n \"\r\n (ngModelChange)=\"\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n [required]=\"column.editColumnRequired\"\r\n />\r\n <mat-datepicker-toggle\r\n matIconSuffix\r\n [for]=\"picker1\"\r\n ></mat-datepicker-toggle>\r\n <mat-datepicker #picker1></mat-datepicker>\r\n </mat-form-field>\r\n }\r\n @if (column.rowEditType === 'boolean') {\r\n <mat-checkbox\r\n [(ngModel)]=\"\r\n autoSaveOnChange()\r\n ? rowData()[column.field]\r\n : rowDataCopy()![column.field]\r\n \"\r\n (ngModelChange)=\"\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n ></mat-checkbox>\r\n }\r\n\r\n @if (column.rowEditType === 'custom') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n >\r\n <mat-select\r\n [(ngModel)]=\"\r\n autoSaveOnChange()\r\n ? rowData()[column.field]\r\n : rowDataCopy()![column.field]\r\n \"\r\n (ngModelChange)=\"\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n [required]=\"column.editColumnRequired\"\r\n >\r\n <mat-option value=\"\"></mat-option>\r\n @for (option of column.customRowEditOptions; track option) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n\r\n @if (column.rowEditType === 'custom-dynamic-select') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n >\r\n <mat-select\r\n [(ngModel)]=\"\r\n autoSaveOnChange()\r\n ? rowData()[column.field]\r\n : rowDataCopy()![column.field]\r\n \"\r\n (ngModelChange)=\"\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n [required]=\"column.editColumnRequired\"\r\n >\r\n @if (!column.editColumnRequired) {\r\n <mat-option value=\"\"></mat-option>\r\n }\r\n\r\n @for (option of dynamicSelectOptions(); track option) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n } @else {\r\n <div>\r\n @if (column.translateValue) {\r\n {{ column.translateValue![rowData()[column.field]] || '' }}\r\n }\r\n @if (column.customValueDisplay) {\r\n {{ column.customValueDisplay(rowData()[column.field]) }}\r\n }\r\n @if (!column.translateValue && !column.customValueDisplay) {\r\n {{ rowData()[column.field] }}\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n", styles: ["mat-form-field{padding:0 2px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.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: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: i8.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: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i12.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: i7$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i14.DateFormatPipe, name: "stDateFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
931
900
  }
932
901
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableRowCellComponent, decorators: [{
933
902
  type: Component,
934
- args: [{ selector: 'st-material-table-row-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (column().type || 'string') {\r\n @case ('custom-template') {\r\n @if (rowEditing && column().allowEditColumn) {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"column().customTemplate!\"\r\n [ngTemplateOutletContext]=\"{ data: rowData(), rowIndex: rowIndex() }\"\r\n ></ng-container>\r\n }\r\n }\r\n\r\n @case ('actions') {\r\n @if (column().actions) {\r\n @if (\r\n (!column().actionsInMenu && !mobileView) ||\r\n (mobileView && column().actions!.length <= 1)\r\n ) {\r\n <div [ngStyle]=\"{ float: column().flexRight ? 'right' : 'none' }\">\r\n @for (action of column().actions; track action) {\r\n @if ((action.show && action.show(rowData())) || !action.show) {\r\n @if (!action.url && action.action) {\r\n <button\r\n class=\"action-icon-button\"\r\n type=\"button\"\r\n mat-icon-button\r\n [color]=\"\r\n actionIconColorDef[action.iconName]\r\n ? actionIconColorDef[action.iconName]\r\n : action.iconColor\r\n \"\r\n [matTooltip]=\"action.tooltipName || ''\"\r\n [matTooltipDisabled]=\"!action.tooltipName\"\r\n (click)=\"\r\n $event.stopPropagation();\r\n action.action!(rowData(), rowIndex())\r\n \"\r\n >\r\n <mat-icon>{{ action.iconName }}</mat-icon>\r\n </button>\r\n }\r\n @if (action.url) {\r\n <a [routerLink]=\"action.url\">\r\n <button\r\n class=\"action-icon-button\"\r\n type=\"button\"\r\n mat-icon-button\r\n [color]=\"\r\n actionIconColorDef[action.iconName]\r\n ? actionIconColorDef[action.iconName]\r\n : action.iconColor\r\n \"\r\n [matTooltip]=\"action.tooltipName || ''\"\r\n [matTooltipDisabled]=\"!action.tooltipName\"\r\n >\r\n <mat-icon>{{ action.iconName }}</mat-icon>\r\n </button>\r\n </a>\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n @if (\r\n column().actionsInMenu || (mobileView && column().actions!.length > 1)\r\n ) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n @for (action of column().actions; track action) {\r\n @if ((action.show && action.show(rowData())) || !action.show) {\r\n @if (!action.url && action.action) {\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n (click)=\"$event.stopPropagation(); action.action!(rowData())\"\r\n >\r\n {{ action.tooltipName }}\r\n </button>\r\n }\r\n @if (action.url) {\r\n <a [routerLink]=\"action.url\">\r\n <button type=\"button\" mat-menu-item>\r\n {{ action.tooltipName }}\r\n </button>\r\n </a>\r\n }\r\n }\r\n }\r\n </mat-menu>\r\n }\r\n }\r\n }\r\n\r\n @case ('string') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('number') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('boolean') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('date') {\r\n @if (rowEditing && column().allowEditColumn) {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n } @else {\r\n {{ rowData()[column().field] | stDateFormatPipe }}\r\n }\r\n }\r\n\r\n @case ('actions-row-editing') {\r\n <div class=\"row justify-content-end\">\r\n @if (rowEditing) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"accent\"\r\n (click)=\"saveRow()\"\r\n [matTooltip]=\"'Save row'\"\r\n >\r\n <mat-icon>done</mat-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"cancelRow()\"\r\n [matTooltip]=\"'Cancel row'\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"primary\"\r\n (click)=\"editRow()\"\r\n [matTooltip]=\"'Edit row'\"\r\n [disabled]=\"\r\n canEditRowValidator() ? !canEditRowValidator()(rowData()) : false\r\n \"\r\n >\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"deleteRow()\"\r\n [matTooltip]=\"'Delete row'\"\r\n [disabled]=\"\r\n canDeleteRowValidator()\r\n ? !canDeleteRowValidator()(rowData())\r\n : false\r\n \"\r\n >\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n @case ('actions-row-selecting') {\r\n <!-- @if (selectRowOnlyOne()) {-->\r\n <!-- <mat-radio-button-->\r\n <!-- color=\"primary\"-->\r\n <!-- (click)=\"$event.stopPropagation()\"-->\r\n <!-- (change)=\"selectRow({ checked: true })\"-->\r\n <!-- [checked]=\"rowIsSelected()\"-->\r\n <!-- ></mat-radio-button>-->\r\n <!-- } @else {-->\r\n <mat-checkbox\r\n color=\"primary\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"selectRow($event)\"\r\n [checked]=\"rowIsSelected()\"\r\n ></mat-checkbox>\r\n <!-- }-->\r\n }\r\n\r\n @case ('actions-row-extending') {\r\n @if (rowIsExpanded()) {\r\n <mat-icon>keyboard_arrow_up</mat-icon>\r\n } @else {\r\n <mat-icon>keyboard_arrow_down</mat-icon>\r\n }\r\n }\r\n}\r\n\r\n<ng-template #baseFieldCell let-column>\r\n @if ((rowEditing || autoSaveOnChange()) && column.allowEditColumn) {\r\n @if (column.rowEditType === 'string' || column.rowEditType === 'number') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n >\r\n <input\r\n matInput\r\n [type]=\"column.rowEditType === 'string' ? 'text' : 'number'\"\r\n [(ngModel)]=\"\r\n autoSaveOnChange()\r\n ? rowData()[column.field]\r\n : rowDataCopy()![column.field]\r\n \"\r\n (ngModelChange)=\"\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n [required]=\"column.editColumnRequired\"\r\n />\r\n </mat-form-field>\r\n }\r\n @if (column.rowEditType === 'date') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n >\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker1\"\r\n [(ngModel)]=\"\r\n autoSaveOnChange()\r\n ? rowData()[column.field]\r\n : rowDataCopy()![column.field]\r\n \"\r\n (ngModelChange)=\"\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n [required]=\"column.editColumnRequired\"\r\n />\r\n <mat-datepicker-toggle\r\n matIconSuffix\r\n [for]=\"picker1\"\r\n ></mat-datepicker-toggle>\r\n <mat-datepicker #picker1></mat-datepicker>\r\n </mat-form-field>\r\n }\r\n @if (column.rowEditType === 'boolean') {\r\n <mat-checkbox\r\n [(ngModel)]=\"\r\n autoSaveOnChange()\r\n ? rowData()[column.field]\r\n : rowDataCopy()![column.field]\r\n \"\r\n (ngModelChange)=\"\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n ></mat-checkbox>\r\n }\r\n\r\n @if (column.rowEditType === 'custom') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n >\r\n <mat-select\r\n [(ngModel)]=\"\r\n autoSaveOnChange()\r\n ? rowData()[column.field]\r\n : rowDataCopy()![column.field]\r\n \"\r\n (ngModelChange)=\"\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n [required]=\"column.editColumnRequired\"\r\n >\r\n <mat-option value=\"\"></mat-option>\r\n @for (option of column.customRowEditOptions; track option) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n\r\n @if (column.rowEditType === 'custom-dynamic-select') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n >\r\n <mat-select\r\n [(ngModel)]=\"\r\n autoSaveOnChange()\r\n ? rowData()[column.field]\r\n : rowDataCopy()![column.field]\r\n \"\r\n (ngModelChange)=\"\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n [required]=\"column.editColumnRequired\"\r\n >\r\n @if (!column.editColumnRequired) {\r\n <mat-option value=\"\"></mat-option>\r\n }\r\n\r\n @for (option of dynamicSelectOptions(); track option) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n } @else {\r\n <div>\r\n @if (column.translateValue) {\r\n {{ column.translateValue![rowData()[column.field]] || '' }}\r\n }\r\n @if (column.customValueDisplay) {\r\n {{ column.customValueDisplay(rowData()[column.field]) }}\r\n }\r\n @if (!column.translateValue && !column.customValueDisplay) {\r\n {{ rowData()[column.field] }}\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n", styles: ["mat-form-field{padding:0 2px}\n"] }]
935
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { matInput: [{
903
+ args: [{ selector: 'st-material-table-row-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (column().type || 'string') {\r\n @case ('custom-template') {\r\n @if (rowEditing() && column().allowEditColumn) {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"column().customTemplate!\"\r\n [ngTemplateOutletContext]=\"{ data: rowData(), rowIndex: rowIndex() }\"\r\n ></ng-container>\r\n }\r\n }\r\n\r\n @case ('actions') {\r\n @if (column().actions) {\r\n @if (\r\n (!column().actionsInMenu && !mobileView()) ||\r\n (mobileView() && column().actions!.length <= 1)\r\n ) {\r\n <div [ngStyle]=\"{ float: column().flexRight ? 'right' : 'none' }\">\r\n @for (action of column().actions; track action) {\r\n @if ((action.show && action.show(rowData())) || !action.show) {\r\n @if (!action.url && action.action) {\r\n <button\r\n class=\"action-icon-button\"\r\n type=\"button\"\r\n mat-icon-button\r\n [color]=\"\r\n actionIconColorDef[action.iconName]\r\n ? actionIconColorDef[action.iconName]\r\n : action.iconColor\r\n \"\r\n [matTooltip]=\"action.tooltipName || ''\"\r\n [matTooltipDisabled]=\"!action.tooltipName\"\r\n (click)=\"\r\n $event.stopPropagation();\r\n action.action!(rowData(), rowIndex())\r\n \"\r\n >\r\n <mat-icon>{{ action.iconName }}</mat-icon>\r\n </button>\r\n }\r\n @if (action.url) {\r\n <a [routerLink]=\"action.url\">\r\n <button\r\n class=\"action-icon-button\"\r\n type=\"button\"\r\n mat-icon-button\r\n [color]=\"\r\n actionIconColorDef[action.iconName]\r\n ? actionIconColorDef[action.iconName]\r\n : action.iconColor\r\n \"\r\n [matTooltip]=\"action.tooltipName || ''\"\r\n [matTooltipDisabled]=\"!action.tooltipName\"\r\n >\r\n <mat-icon>{{ action.iconName }}</mat-icon>\r\n </button>\r\n </a>\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n @if (\r\n column().actionsInMenu || (mobileView() && column().actions!.length > 1)\r\n ) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n @for (action of column().actions; track action) {\r\n @if ((action.show && action.show(rowData())) || !action.show) {\r\n @if (!action.url && action.action) {\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n (click)=\"$event.stopPropagation(); action.action!(rowData())\"\r\n >\r\n {{ action.tooltipName }}\r\n </button>\r\n }\r\n @if (action.url) {\r\n <a [routerLink]=\"action.url\">\r\n <button type=\"button\" mat-menu-item>\r\n {{ action.tooltipName }}\r\n </button>\r\n </a>\r\n }\r\n }\r\n }\r\n </mat-menu>\r\n }\r\n }\r\n }\r\n\r\n @case ('string') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('number') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('boolean') {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n }\r\n\r\n @case ('date') {\r\n @if (rowEditing() && column().allowEditColumn) {\r\n <ng-container\r\n *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n ></ng-container>\r\n } @else {\r\n {{ rowData()[column().field] | stDateFormatPipe }}\r\n }\r\n }\r\n\r\n @case ('actions-row-editing') {\r\n <div class=\"row justify-content-end\">\r\n @if (rowEditing()) {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"accent\"\r\n (click)=\"saveRow()\"\r\n [matTooltip]=\"'Save row'\"\r\n >\r\n <mat-icon>done</mat-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"cancelRow()\"\r\n [matTooltip]=\"'Cancel row'\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"primary\"\r\n (click)=\"editRow()\"\r\n [matTooltip]=\"'Edit row'\"\r\n [disabled]=\"\r\n canEditRowValidator() ? !canEditRowValidator()(rowData()) : false\r\n \"\r\n >\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"deleteRow()\"\r\n [matTooltip]=\"'Delete row'\"\r\n [disabled]=\"\r\n canDeleteRowValidator()\r\n ? !canDeleteRowValidator()(rowData())\r\n : false\r\n \"\r\n >\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n @case ('actions-row-selecting') {\r\n <!-- @if (selectRowOnlyOne()) {-->\r\n <!-- <mat-radio-button-->\r\n <!-- color=\"primary\"-->\r\n <!-- (click)=\"$event.stopPropagation()\"-->\r\n <!-- (change)=\"selectRow({ checked: true })\"-->\r\n <!-- [checked]=\"rowIsSelected()\"-->\r\n <!-- ></mat-radio-button>-->\r\n <!-- } @else {-->\r\n <mat-checkbox\r\n color=\"primary\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"selectRow($event)\"\r\n [checked]=\"rowIsSelected()\"\r\n ></mat-checkbox>\r\n <!-- }-->\r\n }\r\n\r\n @case ('actions-row-extending') {\r\n @if (rowIsExpanded()) {\r\n <mat-icon>keyboard_arrow_up</mat-icon>\r\n } @else {\r\n <mat-icon>keyboard_arrow_down</mat-icon>\r\n }\r\n }\r\n}\r\n\r\n<ng-template #baseFieldCell let-column>\r\n @if ((rowEditing() || autoSaveOnChange()) && column.allowEditColumn) {\r\n @if (column.rowEditType === 'string' || column.rowEditType === 'number') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n >\r\n <input\r\n matInput\r\n [type]=\"column.rowEditType === 'string' ? 'text' : 'number'\"\r\n [(ngModel)]=\"\r\n autoSaveOnChange()\r\n ? rowData()[column.field]\r\n : rowDataCopy()![column.field]\r\n \"\r\n (ngModelChange)=\"\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n [required]=\"column.editColumnRequired\"\r\n />\r\n </mat-form-field>\r\n }\r\n @if (column.rowEditType === 'date') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n >\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker1\"\r\n [(ngModel)]=\"\r\n autoSaveOnChange()\r\n ? rowData()[column.field]\r\n : rowDataCopy()![column.field]\r\n \"\r\n (ngModelChange)=\"\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n [required]=\"column.editColumnRequired\"\r\n />\r\n <mat-datepicker-toggle\r\n matIconSuffix\r\n [for]=\"picker1\"\r\n ></mat-datepicker-toggle>\r\n <mat-datepicker #picker1></mat-datepicker>\r\n </mat-form-field>\r\n }\r\n @if (column.rowEditType === 'boolean') {\r\n <mat-checkbox\r\n [(ngModel)]=\"\r\n autoSaveOnChange()\r\n ? rowData()[column.field]\r\n : rowDataCopy()![column.field]\r\n \"\r\n (ngModelChange)=\"\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n ></mat-checkbox>\r\n }\r\n\r\n @if (column.rowEditType === 'custom') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n >\r\n <mat-select\r\n [(ngModel)]=\"\r\n autoSaveOnChange()\r\n ? rowData()[column.field]\r\n : rowDataCopy()![column.field]\r\n \"\r\n (ngModelChange)=\"\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n [required]=\"column.editColumnRequired\"\r\n >\r\n <mat-option value=\"\"></mat-option>\r\n @for (option of column.customRowEditOptions; track option) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n\r\n @if (column.rowEditType === 'custom-dynamic-select') {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n >\r\n <mat-select\r\n [(ngModel)]=\"\r\n autoSaveOnChange()\r\n ? rowData()[column.field]\r\n : rowDataCopy()![column.field]\r\n \"\r\n (ngModelChange)=\"\r\n autoSaveOnChange() && onFieldChange(column.field, $event)\r\n \"\r\n [required]=\"column.editColumnRequired\"\r\n >\r\n @if (!column.editColumnRequired) {\r\n <mat-option value=\"\"></mat-option>\r\n }\r\n\r\n @for (option of dynamicSelectOptions(); track option) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n } @else {\r\n <div>\r\n @if (column.translateValue) {\r\n {{ column.translateValue![rowData()[column.field]] || '' }}\r\n }\r\n @if (column.customValueDisplay) {\r\n {{ column.customValueDisplay(rowData()[column.field]) }}\r\n }\r\n @if (!column.translateValue && !column.customValueDisplay) {\r\n {{ rowData()[column.field] }}\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n", styles: ["mat-form-field{padding:0 2px}\n"] }]
904
+ }], ctorParameters: () => [], propDecorators: { matInput: [{
936
905
  type: ViewChild,
937
906
  args: [MatInput]
938
907
  }], matSelect: [{
939
908
  type: ViewChild,
940
909
  args: [MatSelect]
941
- }], rowEditing: [{
942
- type: Input
943
910
  }] } });
944
911
 
945
912
  class MaterialTableComponent extends StSubscribeDestroyComponent {
946
- /**
947
- * Immutable Data Pattern:
948
- * Creates a deep copy of incoming data to prevent mutations of parent data.
949
- * IDs are generated on the copy, not on the original parent data.
950
- * This ensures the parent maintains control of their data while the library
951
- * manages its own working copy for UI operations.
952
- *
953
- * When data is updated (e.g., after fieldValueChanged), existing row IDs are preserved
954
- * to prevent focus loss on inputs.
955
- */
956
- set data(data) {
957
- let dataToCompare = this.tableSource
958
- ? [...this.tableSource?.data.map(tmp => ({ ...tmp }))]
959
- : [];
960
- if (data && data[0] && !data[0].id) {
961
- dataToCompare = dataToCompare.map(tmp => {
962
- if (tmp.id) {
963
- delete tmp.id;
964
- }
965
- return tmp;
966
- });
967
- }
968
- if (JSON.stringify(data) !== JSON.stringify(dataToCompare)) {
969
- // Create a deep copy to avoid mutating parent data
970
- let clonedData = (data || []).map(row => ({ ...row }));
971
- // Add IDs if needed (only on the copy)
972
- if (this.allowEditRow() || this.allowSelectRow()) {
973
- clonedData = clonedData.map(row => ({
974
- ...row,
975
- id: row.id || StBaseService.generateGUID(),
976
- }));
977
- }
978
- console.log(clonedData);
979
- this._data = clonedData;
980
- if (this.tableSource) {
981
- this.tableSource.data = [...clonedData];
982
- if (!this.lazyLoading() && this.localStorageData) {
983
- this.paginator.pageIndex = this.localStorageData.pageIndex;
984
- //@ts-ignore
985
- this.paginator._emitPageEvent(this.localStorageData.pageIndex);
986
- }
987
- }
988
- this.changeDetectorRef.markForCheck();
989
- }
990
- }
991
- get data() {
992
- return this._data;
993
- }
994
913
  constructor(changeDetectorRef, snackbar, stTableTranslations, stDialogService) {
995
914
  super();
996
915
  this.changeDetectorRef = changeDetectorRef;
@@ -1029,6 +948,10 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
1029
948
  this.extendedRowTemplate = input();
1030
949
  this.initSelectedRow = input();
1031
950
  this.extraCustomFilter = input();
951
+ /**
952
+ * Immutable Data Pattern - Optimized version with ID cleanup
953
+ */
954
+ this.data = input([]);
1032
955
  this.loadData = output();
1033
956
  this.saveEditedRow = output();
1034
957
  this.saveCreatedRow = output();
@@ -1051,100 +974,19 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
1051
974
  this.showTable = true;
1052
975
  this.activeRowsEditing = {};
1053
976
  this.activeRowsCreating = {};
977
+ // Effect to handle data changes
978
+ effect(() => {
979
+ const inputData = this.data();
980
+ this.handleDataChange(inputData);
981
+ });
1054
982
  }
1055
983
  ngOnInit() {
1056
984
  // Initialize SelectionModel with compareWith to compare by ID
1057
985
  const multiple = !this.selectRowOnlyOne();
1058
986
  this.selection = new SelectionModel(multiple, [], true, (a, b) => (a?.id ?? a) === (b?.id ?? b));
1059
- this.initLocalColumns.set([...this.initColumns()]);
1060
- if (this.allowSelectRow()) {
1061
- this.initLocalColumns().unshift({
1062
- field: 'actions-row-selecting',
1063
- header: '',
1064
- type: 'actions-row-selecting',
1065
- sort: false,
1066
- filter: false,
1067
- width: '60px',
1068
- selectColumnLabel: this.stTableTranslations.getTranslations()().rowSelectColumnLabel,
1069
- });
1070
- if (this.initSelectedRow()) {
1071
- this.selection.select(...this.initSelectedRow());
1072
- }
1073
- }
1074
- else {
1075
- this.initLocalColumns.update(oldVal => oldVal.filter(column => column.field !== 'action-row-selecting'));
1076
- }
1077
- if (this.allowEditRow() && !this.autoSaveOnChange()) {
1078
- const editingColumn = {
1079
- field: 'actions-row-editing',
1080
- header: '',
1081
- type: 'actions-row-editing',
1082
- sort: false,
1083
- filter: false,
1084
- width: '110px',
1085
- selectColumnLabel: this.stTableTranslations.getTranslations()().rowActionsColumnLabel,
1086
- };
1087
- this.initLocalColumns.update(columns => {
1088
- const lastColumn = columns[columns.length - 1];
1089
- if (lastColumn?.type !== 'actions') {
1090
- return [...columns, editingColumn];
1091
- }
1092
- else {
1093
- const newColumns = [...columns];
1094
- newColumns.splice(newColumns.length - 1, 0, editingColumn);
1095
- return newColumns;
1096
- }
1097
- });
1098
- }
1099
- else {
1100
- this.initLocalColumns.update(oldVal => oldVal.filter(column => column.field !== 'action-row-editing'));
1101
- }
1102
- if (this.allowExtendRow()) {
1103
- this.initLocalColumns().unshift({
1104
- field: 'actions-row-extending',
1105
- header: '',
1106
- type: 'actions-row-extending',
1107
- sort: false,
1108
- filter: false,
1109
- width: '60px',
1110
- selectColumnLabel: this.stTableTranslations.getTranslations()().rowExtendColumnLabel,
1111
- });
1112
- }
1113
- else {
1114
- this.initLocalColumns.update(oldVal => oldVal.filter(column => column.field !== 'action-row-extending'));
1115
- }
1116
- this.setColumnsFilterRowEditTypes();
987
+ this.initializeColumns();
1117
988
  this.loadLocalStorageData();
1118
- //validate filters
1119
- const filterKeys = Object.keys(this.initFilters);
1120
- const newFilters = {};
1121
- if (filterKeys.length > 0) {
1122
- filterKeys.forEach(key => {
1123
- const col = this.initLocalColumns().find(column => column.field === key);
1124
- if (col) {
1125
- let tmpVal = this.initFilters[key].value || '';
1126
- if (this.initFilters[key].matchMode === 'equal') {
1127
- tmpVal = this.initFilters[key].value || null;
1128
- }
1129
- if (this.initFilters[key].matchMode === 'between') {
1130
- tmpVal =
1131
- this.initFilters[key].value &&
1132
- Array.isArray(this.initFilters[key].value)
1133
- ? this.initFilters[key].value
1134
- : [null, null];
1135
- }
1136
- newFilters[key] = {
1137
- value: tmpVal,
1138
- matchMode: MaterialTableFilterDialogComponent.getBaseMatchModeByType(col.filterType),
1139
- };
1140
- }
1141
- });
1142
- }
1143
- if (JSON.stringify(newFilters) !== JSON.stringify(this.initFilters)) {
1144
- this.initFilters = newFilters;
1145
- this.localStorageData.filters = newFilters;
1146
- this.updateDataToLocalStorage();
1147
- }
989
+ this.validateAndUpdateFilters();
1148
990
  this.setDisplayedColumns();
1149
991
  }
1150
992
  ngAfterViewInit() {
@@ -1158,11 +1000,9 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
1158
1000
  this.changeDetectorRef.markForCheck();
1159
1001
  }
1160
1002
  captionDataChanged(event) {
1161
- let loadLazyData = false;
1162
- if (event.globalSearch !== this.localStorageData.globalSearch ||
1163
- event.filters !== this.localStorageData.filters) {
1164
- loadLazyData = true;
1165
- }
1003
+ const loadLazyData = event.globalSearch !== this.localStorageData.globalSearch ||
1004
+ JSON.stringify(event.filters) !==
1005
+ JSON.stringify(this.localStorageData.filters);
1166
1006
  this.localStorageData = {
1167
1007
  ...event,
1168
1008
  pageSize: this.paginator.pageSize,
@@ -1176,9 +1016,9 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
1176
1016
  this.updateDataToLocalStorage();
1177
1017
  if (loadLazyData) {
1178
1018
  this.emitLazyLoading();
1179
- this.paginator.pageIndex = this.localStorageData.pageIndex;
1019
+ this.paginator.pageIndex = 0;
1180
1020
  //@ts-ignore
1181
- this.paginator._emitPageEvent(this.localStorageData.pageIndex);
1021
+ this.paginator._emitPageEvent(0);
1182
1022
  }
1183
1023
  this.changeDetectorRef.markForCheck();
1184
1024
  }
@@ -1226,8 +1066,6 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
1226
1066
  }
1227
1067
  editRow(row, column) {
1228
1068
  this.activeRowsEditing[row.id] = { ...row };
1229
- console.log(this.activeRowsEditing);
1230
- console.log(this.tableSource);
1231
1069
  }
1232
1070
  deleteRow(row, column, index) {
1233
1071
  const absoluteIndex = this.getAbsoluteIndex(index);
@@ -1255,58 +1093,26 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
1255
1093
  */
1256
1094
  saveEditRow(row, column, index) {
1257
1095
  const absoluteIndex = this.getAbsoluteIndex(index);
1258
- let allowSave = true;
1259
- // Check if this specific row is being created or edited
1260
1096
  const isCreatingThisRow = !!this.activeRowsCreating[row.id];
1261
1097
  const rowData = isCreatingThisRow
1262
1098
  ? this.activeRowsCreating[row.id]
1263
1099
  : this.activeRowsEditing[row.id];
1264
- this.columns
1265
- .filter(col => col.allowEditColumn)
1266
- .forEach(col => {
1267
- if (col.customEditRowValidator) {
1268
- const result = col.customEditRowValidator(rowData[col.field], row[col.field], row);
1269
- if (!result.isValid) {
1270
- allowSave = false;
1271
- this.snackbar.error(result.errorMessage);
1272
- }
1273
- }
1274
- if (col.editColumnRequired) {
1275
- if (rowData[col.field] === undefined ||
1276
- rowData[col.field] === null ||
1277
- rowData[col.field] === '') {
1278
- allowSave = false;
1279
- this.snackbar.error(`${col.header} is required`);
1280
- }
1281
- }
1282
- });
1283
- if (allowSave) {
1284
- if (isCreatingThisRow) {
1285
- // Emit new row to parent for handling (API call, etc.)
1286
- this.saveCreatedRow.emit({ ...this.activeRowsCreating[row.id] });
1287
- delete this.activeRowsCreating[row.id];
1288
- }
1289
- else {
1290
- // Emit edited row to parent for handling
1291
- this.saveEditedRow.emit({
1292
- row: { ...this.activeRowsEditing[row.id] },
1293
- index: absoluteIndex,
1294
- });
1295
- delete this.activeRowsEditing[row.id];
1296
- }
1297
- // Update local table copy
1298
- if (absoluteIndex >= 0) {
1299
- const updatedRow = { ...row };
1300
- this.columns
1301
- .filter(col => col.allowEditColumn)
1302
- .forEach(col => {
1303
- updatedRow[col.field] = rowData[col.field];
1304
- });
1305
- this.tableSource.data[absoluteIndex] = updatedRow;
1306
- this.tableSource.data = [...this.tableSource.data];
1307
- }
1308
- this.changeDetectorRef.markForCheck();
1100
+ // Validate row
1101
+ if (!this.validateRow(rowData, row)) {
1102
+ return;
1103
+ }
1104
+ // Emit to parent
1105
+ if (isCreatingThisRow) {
1106
+ this.saveCreatedRow.emit({ ...rowData });
1107
+ delete this.activeRowsCreating[row.id];
1108
+ }
1109
+ else {
1110
+ this.saveEditedRow.emit({ row: { ...rowData }, index: absoluteIndex });
1111
+ delete this.activeRowsEditing[row.id];
1309
1112
  }
1113
+ // Update local table copy
1114
+ this.updateRowInDataSource(absoluteIndex, row, rowData);
1115
+ this.changeDetectorRef.markForCheck();
1310
1116
  }
1311
1117
  cancelEditRow(row, column) {
1312
1118
  // Check if this specific row is being created
@@ -1348,15 +1154,19 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
1348
1154
  return false;
1349
1155
  }
1350
1156
  }
1351
- toggleAllRows() {
1352
- if (this.isAllSelected()) {
1157
+ toggleAllRows(event) {
1158
+ if (event) {
1159
+ this.selection.select(...this.tableSource.data);
1160
+ }
1161
+ else {
1353
1162
  this.selection.clear();
1354
- return;
1355
1163
  }
1356
- this.selection.select(...this.tableSource.data);
1357
1164
  this.selectRowChange.emit(this.selection.selected);
1358
1165
  }
1359
- removeSelectedRow(row) {
1166
+ removeSelectedRow(event, row) {
1167
+ if (this.selection.selected.length > 1) {
1168
+ event.stopPropagation();
1169
+ }
1360
1170
  this.selection.deselect(row);
1361
1171
  this.selectRowChange.emit(this.selection.selected);
1362
1172
  }
@@ -1526,18 +1336,13 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
1526
1336
  sortOrder: this.localStorageData.sortOrder,
1527
1337
  filters: this.localStorageData.filters,
1528
1338
  };
1529
- // if (this.returnNewApiTableResult()) {
1530
- // this.loadData.emit(mapTableDataToApi(loadDataRequest));
1531
- // } else {
1532
1339
  this.loadData.emit(loadDataRequest);
1533
- // }
1534
1340
  }
1535
1341
  else {
1536
1342
  this.tableSource.filter = JSON.stringify({
1537
1343
  ...this.localStorageData.filters,
1538
1344
  stGlobalSearch: this.localStorageData.globalSearch,
1539
1345
  });
1540
- this.changeDetectorRef.markForCheck();
1541
1346
  }
1542
1347
  }
1543
1348
  updateDataToLocalStorage() {
@@ -1546,7 +1351,6 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
1546
1351
  }
1547
1352
  }
1548
1353
  setInitTable() {
1549
- console.log(this._data);
1550
1354
  this.tableSource = new MatTableDataSource(this._data);
1551
1355
  this.paginator.pageSize = this.localStorageData.pageSize;
1552
1356
  this.paginator.pageIndex = this.localStorageData.pageIndex;
@@ -1684,8 +1488,187 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
1684
1488
  // Return true if this is the first editable column
1685
1489
  return (editableColumns.length > 0 && editableColumns[0].field === column.field);
1686
1490
  }
1687
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.StSnackBarService }, { token: StTablesTranslationsService }, { token: i3$3.StDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
1688
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableComponent, selector: "ngx-st-material-table", inputs: { showGlobalSearch: { classPropertyName: "showGlobalSearch", publicName: "showGlobalSearch", isSignal: true, isRequired: false, transformFunction: null }, tableTitle: { classPropertyName: "tableTitle", publicName: "tableTitle", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, dataLength: { classPropertyName: "dataLength", publicName: "dataLength", isSignal: true, isRequired: false, transformFunction: null }, allowPickColumns: { classPropertyName: "allowPickColumns", publicName: "allowPickColumns", isSignal: true, isRequired: false, transformFunction: null }, allowReorderColumns: { classPropertyName: "allowReorderColumns", publicName: "allowReorderColumns", isSignal: true, isRequired: false, transformFunction: null }, localStorageName: { classPropertyName: "localStorageName", publicName: "localStorageName", isSignal: true, isRequired: false, transformFunction: null }, lazyLoading: { classPropertyName: "lazyLoading", publicName: "lazyLoading", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, initColumns: { classPropertyName: "initColumns", publicName: "initColumns", isSignal: true, isRequired: false, transformFunction: null }, rowClickAction: { classPropertyName: "rowClickAction", publicName: "rowClickAction", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, allowEditRow: { classPropertyName: "allowEditRow", publicName: "allowEditRow", isSignal: true, isRequired: false, transformFunction: null }, showEditAllRows: { classPropertyName: "showEditAllRows", publicName: "showEditAllRows", isSignal: true, isRequired: false, transformFunction: null }, autoSaveOnChange: { classPropertyName: "autoSaveOnChange", publicName: "autoSaveOnChange", isSignal: true, isRequired: false, transformFunction: null }, canEditRowValidator: { classPropertyName: "canEditRowValidator", publicName: "canEditRowValidator", isSignal: true, isRequired: false, transformFunction: null }, canDeleteRowValidator: { classPropertyName: "canDeleteRowValidator", publicName: "canDeleteRowValidator", isSignal: true, isRequired: false, transformFunction: null }, allowSelectRow: { classPropertyName: "allowSelectRow", publicName: "allowSelectRow", isSignal: true, isRequired: false, transformFunction: null }, selectionFieldLabel: { classPropertyName: "selectionFieldLabel", publicName: "selectionFieldLabel", isSignal: true, isRequired: false, transformFunction: null }, selectRowOnlyOne: { classPropertyName: "selectRowOnlyOne", publicName: "selectRowOnlyOne", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, createButtonAction: { classPropertyName: "createButtonAction", publicName: "createButtonAction", isSignal: true, isRequired: false, transformFunction: null }, disableCreateButton: { classPropertyName: "disableCreateButton", publicName: "disableCreateButton", isSignal: true, isRequired: false, transformFunction: null }, allowCreateRow: { classPropertyName: "allowCreateRow", publicName: "allowCreateRow", isSignal: true, isRequired: false, transformFunction: null }, allowExtendRow: { classPropertyName: "allowExtendRow", publicName: "allowExtendRow", isSignal: true, isRequired: false, transformFunction: null }, extendedRowTemplate: { classPropertyName: "extendedRowTemplate", publicName: "extendedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, initSelectedRow: { classPropertyName: "initSelectedRow", publicName: "initSelectedRow", isSignal: true, isRequired: false, transformFunction: null }, extraCustomFilter: { classPropertyName: "extraCustomFilter", publicName: "extraCustomFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadData: "loadData", saveEditedRow: "saveEditedRow", saveCreatedRow: "saveCreatedRow", rowDeleted: "rowDeleted", selectRowChange: "selectRowChange", fieldValueChanged: "fieldValueChanged" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"st-material-table\">\r\n @if (isLoading()) {\r\n <div class=\"loading-spinner\">\r\n <mat-spinner color=\"accent\"></mat-spinner>\r\n </div>\r\n }\r\n\r\n @if (showTable) {\r\n <st-material-table-caption\r\n [tableTitle]=\"tableTitle()\"\r\n [allowPickColumns]=\"allowPickColumns()\"\r\n [showGlobalSearch]=\"showGlobalSearch()\"\r\n [allowReorderColumns]=\"allowReorderColumns()\"\r\n [columns]=\"columns\"\r\n [initFilters]=\"initFilters\"\r\n [initGlobalSearch]=\"initGlobalSearch\"\r\n [showCreateButton]=\"showCreateButton()\"\r\n [createButtonLabel]=\"createButtonLabel()\"\r\n [createButtonAction]=\"createButtonAction()\"\r\n [allowCreateRow]=\"allowCreateRow()\"\r\n [disableCreateButton]=\"disableCreateButton()\"\r\n [extraCustomFilter]=\"extraCustomFilter()\"\r\n [creatingRow]=\"creatingRow()\"\r\n (captionDataChanged)=\"captionDataChanged($event)\"\r\n (resetTableSettings)=\"resetTableSettings()\"\r\n (addNewRow)=\"addNewRow()\"\r\n ></st-material-table-caption>\r\n }\r\n\r\n <table\r\n [ngClass]=\"{ 'no-hover': !rowClickAction() }\"\r\n mat-table\r\n [dataSource]=\"tableSource\"\r\n matSort\r\n [multiTemplateDataRows]=\"allowExtendRow()\"\r\n >\r\n @for (column of selectedColumns; track column) {\r\n <ng-container [matColumnDef]=\"column.field\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n mat-sort-header\r\n [disabled]=\"!column.sort\"\r\n >\r\n @if (column.type === 'actions-row-selecting' && !selectRowOnlyOne()) {\r\n <mat-checkbox\r\n color=\"primary\"\r\n (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n >\r\n </mat-checkbox>\r\n } @else if (\r\n column.type === 'actions-row-editing' && showEditAllRows()\r\n ) {\r\n <div class=\"row justify-content-end\" style=\"width: 98px\">\r\n <button\r\n mat-icon-button\r\n (click)=\"turnOnAllEditRows()\"\r\n [matTooltip]=\"'Edit all rows'\"\r\n >\r\n <mat-icon>edit_arrow_down</mat-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n {{ column.header }}\r\n }\r\n </th>\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element; let i = index\"\r\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n >\r\n {{ !!activeRowsEditing[element.id] }}\r\n {{ !!activeRowsCreating[element.id] }}\r\n <st-material-table-row-cell\r\n [column]=\"column\"\r\n [rowData]=\"element\"\r\n [rowIndex]=\"getAbsoluteIndex(i)\"\r\n [rowDataCopy]=\"\r\n activeRowsEditing[element.id] || activeRowsCreating[element.id]\r\n \"\r\n [rowEditing]=\"\r\n !!activeRowsEditing[element.id] ||\r\n !!activeRowsCreating[element.id]\r\n \"\r\n [rowIsSelected]=\"selection.isSelected(element)\"\r\n [rowIsExpanded]=\"element == expandedRow()\"\r\n [canEditRowValidator]=\"canEditRowValidator()\"\r\n [canDeleteRowValidator]=\"canDeleteRowValidator()\"\r\n [selectRowOnlyOne]=\"selectRowOnlyOne()\"\r\n [isFirstEditableColumn]=\"isFirstEditableColumn(column)\"\r\n [autoSaveOnChange]=\"autoSaveOnChange()\"\r\n (editRowEmitter)=\"editRow(element, column)\"\r\n (deleteRowEmitter)=\"deleteRow(element, column, i)\"\r\n (saveEditRowEmitter)=\"saveEditRow(element, column, i)\"\r\n (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n (selectRowChange)=\"selectRowChanged($event, element)\"\r\n (fieldValueChanged)=\"\r\n onFieldValueChanged(element, column, $event.value, i)\r\n \"\r\n ></st-material-table-row-cell>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n [attr.colspan]=\"selectedColumnsString.length\"\r\n >\r\n <div\r\n class=\"expanded-element-detail-wrapper\"\r\n [@detailExpand]=\"element == expandedRow() ? 'expanded' : 'collapsed'\"\r\n >\r\n <div class=\"expanded-element-detail\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"extendedRowTemplate()!\"\r\n [ngTemplateOutletContext]=\"{ data: element }\"\r\n ></ng-container>\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: selectedColumnsString\"\r\n [class.expanded-expanded-row]=\"expandedRow() === row\"\r\n (click)=\"this.clickRowAction(row)\"\r\n ></tr>\r\n @if (allowExtendRow()) {\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n class=\"extended-detail-row\"\r\n ></tr>\r\n }\r\n </table>\r\n <mat-paginator\r\n [showFirstLastButtons]=\"true\"\r\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n [length]=\"dataLength()\"\r\n ></mat-paginator>\r\n @if (allowSelectRow()) {\r\n <div class=\"st-material-table-selected-rows\">\r\n <button type=\"button\" mat-stroked-button [matMenuTriggerFor]=\"menu\">\r\n {{ selection.selected.length }}\r\n {{ stTableTranslations.getTranslations()().rowSelected }}\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n @for (row of selection.selected; track row) {\r\n <button type=\"button\" mat-menu-item (click)=\"removeSelectedRow(row)\">\r\n <div class=\"d-flex\">\r\n {{ row[selectionFieldLabel()]\r\n }}<mat-icon style=\"margin-right: 0; margin-left: 10px\"\r\n >delete</mat-icon\r\n >\r\n </div>\r\n </button>\r\n }\r\n </mat-menu>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:2rem}.st-material-table .st-material-table-selected-rows{position:absolute;bottom:12px;left:5px}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr.extended-detail-row{height:0;cursor:default}.st-material-table table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}.st-material-table table tbody>tr.expanded-element-row td{border-bottom-width:0}.st-material-table table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr.extended-detail-row{height:0;cursor:default}table.st-material-table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}table.st-material-table tbody>tr.expanded-element-row td{border-bottom-width:0}table.st-material-table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}table.st-material-table .mat-column-active{width:48px}table.st-material-table.no-hover tbody tr{cursor:default}table.st-material-table.no-hover tbody tr.active{background-color:transparent!important}table.st-material-table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}table.st-material-table.no-hover tbody tr:hover{background-color:transparent!important}table.st-material-table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}table.st-material-table.admin-table .actions-cell{width:100px}.dark-theme table.st-material-table thead tr{background-color:#5e4803!important}.dark-theme table.st-material-table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme table.st-material-table tbody tr:hover{background-color:#ffffff08!important}.dark-theme table.st-material-table tbody tr.active{background-color:#1121114d!important}.dark-theme table.st-material-table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table table tbody tr:hover{background-color:#ffffff08!important}.dark-theme .st-material-table table tbody tr.active{background-color:#1121114d!important}.dark-theme .st-material-table table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table mat-paginator{background-color:transparent!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element p,.dark-theme .st-material-table .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .st-material-table .filter .filter-title{color:#eee!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: ["showGlobalSearch", "tableTitle", "allowPickColumns", "allowReorderColumns", "initGlobalSearch", "initFilters", "showCreateButton", "createButtonLabel", "createButtonAction", "allowCreateRow", "disableCreateButton", "creatingRow", "extraCustomFilter", "columns"], outputs: ["captionDataChanged", "resetTableSettings", "addNewRow"] }, { kind: "component", type: MaterialTableRowCellComponent, selector: "st-material-table-row-cell", inputs: ["column", "rowData", "rowIndex", "rowDataCopy", "canEditRowValidator", "canDeleteRowValidator", "selectRowOnlyOne", "isFirstEditableColumn", "autoSaveOnChange", "rowEditing", "rowIsSelected", "rowIsExpanded"], outputs: ["saveEditRowEmitter", "cancelEditRowEmitter", "editRowEmitter", "deleteRowEmitter", "selectRowChange", "fieldValueChanged"] }], animations: [
1491
+ validateRow(rowData, originalRow) {
1492
+ const editableColumns = this.columns.filter(col => col.allowEditColumn);
1493
+ for (const col of editableColumns) {
1494
+ if (col.customEditRowValidator) {
1495
+ const result = col.customEditRowValidator(rowData[col.field], originalRow[col.field], originalRow);
1496
+ if (!result.isValid) {
1497
+ this.snackbar.error(result.errorMessage);
1498
+ return false;
1499
+ }
1500
+ }
1501
+ if (col.editColumnRequired) {
1502
+ const value = rowData[col.field];
1503
+ if (value === undefined || value === null || value === '') {
1504
+ this.snackbar.error(`${col.header} is required`);
1505
+ return false;
1506
+ }
1507
+ }
1508
+ }
1509
+ return true;
1510
+ }
1511
+ updateRowInDataSource(index, row, rowData) {
1512
+ if (index >= 0 && index < this.tableSource.data.length) {
1513
+ const updatedRow = { ...row };
1514
+ this.columns
1515
+ .filter(col => col.allowEditColumn)
1516
+ .forEach(col => {
1517
+ updatedRow[col.field] = rowData[col.field];
1518
+ });
1519
+ this.tableSource.data[index] = updatedRow;
1520
+ this.tableSource.data = [...this.tableSource.data];
1521
+ }
1522
+ }
1523
+ initializeColumns() {
1524
+ this.initLocalColumns.set([...this.initColumns()]);
1525
+ // Add special columns
1526
+ this.addSelectColumnIfNeeded();
1527
+ this.addEditColumnIfNeeded();
1528
+ this.addExtendColumnIfNeeded();
1529
+ this.setColumnsFilterRowEditTypes();
1530
+ }
1531
+ addSelectColumnIfNeeded() {
1532
+ if (!this.allowSelectRow()) {
1533
+ this.removeColumnByType('actions-row-selecting');
1534
+ return;
1535
+ }
1536
+ this.initLocalColumns().unshift({
1537
+ field: 'actions-row-selecting',
1538
+ header: '',
1539
+ type: 'actions-row-selecting',
1540
+ sort: false,
1541
+ filter: false,
1542
+ width: '60px',
1543
+ selectColumnLabel: this.stTableTranslations.getTranslations()().rowSelectColumnLabel,
1544
+ });
1545
+ if (this.initSelectedRow()) {
1546
+ this.selection.select(...this.initSelectedRow());
1547
+ }
1548
+ }
1549
+ addEditColumnIfNeeded() {
1550
+ if (!this.allowEditRow() || this.autoSaveOnChange()) {
1551
+ this.removeColumnByType('actions-row-editing');
1552
+ return;
1553
+ }
1554
+ const editingColumn = {
1555
+ field: 'actions-row-editing',
1556
+ header: '',
1557
+ type: 'actions-row-editing',
1558
+ sort: false,
1559
+ filter: false,
1560
+ width: '110px',
1561
+ selectColumnLabel: this.stTableTranslations.getTranslations()().rowActionsColumnLabel,
1562
+ };
1563
+ this.initLocalColumns.update(columns => {
1564
+ const lastColumn = columns[columns.length - 1];
1565
+ if (lastColumn?.type !== 'actions') {
1566
+ return [...columns, editingColumn];
1567
+ }
1568
+ const newColumns = [...columns];
1569
+ newColumns.splice(newColumns.length - 1, 0, editingColumn);
1570
+ return newColumns;
1571
+ });
1572
+ }
1573
+ addExtendColumnIfNeeded() {
1574
+ if (!this.allowExtendRow()) {
1575
+ this.removeColumnByType('actions-row-extending');
1576
+ return;
1577
+ }
1578
+ this.initLocalColumns().unshift({
1579
+ field: 'actions-row-extending',
1580
+ header: '',
1581
+ type: 'actions-row-extending',
1582
+ sort: false,
1583
+ filter: false,
1584
+ width: '60px',
1585
+ selectColumnLabel: this.stTableTranslations.getTranslations()().rowExtendColumnLabel,
1586
+ });
1587
+ }
1588
+ removeColumnByType(type) {
1589
+ this.initLocalColumns.update(columns => columns.filter(column => column.field !== type));
1590
+ }
1591
+ validateAndUpdateFilters() {
1592
+ const filterKeys = Object.keys(this.initFilters);
1593
+ if (filterKeys.length === 0)
1594
+ return;
1595
+ const newFilters = {};
1596
+ for (const key of filterKeys) {
1597
+ const col = this.initLocalColumns().find(column => column.field === key);
1598
+ if (!col)
1599
+ continue;
1600
+ newFilters[key] = {
1601
+ value: this.getDefaultFilterValue(col, this.initFilters[key]),
1602
+ matchMode: MaterialTableFilterDialogComponent.getBaseMatchModeByType(col.filterType),
1603
+ };
1604
+ }
1605
+ if (JSON.stringify(newFilters) !== JSON.stringify(this.initFilters)) {
1606
+ this.initFilters = newFilters;
1607
+ this.localStorageData.filters = newFilters;
1608
+ this.updateDataToLocalStorage();
1609
+ }
1610
+ }
1611
+ getDefaultFilterValue(col, filter) {
1612
+ if (filter.matchMode === 'equal') {
1613
+ return filter.value || null;
1614
+ }
1615
+ if (filter.matchMode === 'between') {
1616
+ return filter.value && Array.isArray(filter.value)
1617
+ ? filter.value
1618
+ : [null, null];
1619
+ }
1620
+ return filter.value || '';
1621
+ }
1622
+ /**
1623
+ * Handles data changes from the input signal
1624
+ */
1625
+ handleDataChange(data) {
1626
+ if (!data || !Array.isArray(data)) {
1627
+ this._data = [];
1628
+ if (this.tableSource) {
1629
+ this.tableSource.data = [];
1630
+ }
1631
+ return;
1632
+ }
1633
+ // Check if data is actually different (excluding IDs we might have added)
1634
+ // This prevents unnecessary updates when parent sends the same data
1635
+ if (this._data.length === data.length) {
1636
+ const dataWithoutIds = data.map(row => {
1637
+ const tmp = { ...row };
1638
+ delete tmp.id;
1639
+ return tmp;
1640
+ });
1641
+ const currentDataWithoutIds = this._data.map(row => {
1642
+ const tmp = { ...row };
1643
+ delete tmp.id;
1644
+ return tmp;
1645
+ });
1646
+ if (JSON.stringify(dataWithoutIds) === JSON.stringify(currentDataWithoutIds)) {
1647
+ return;
1648
+ }
1649
+ }
1650
+ // Create shallow copy to avoid mutating parent data
1651
+ let clonedData = data.map(row => ({ ...row }));
1652
+ // Add IDs if needed (only on the copy)
1653
+ if (this.allowEditRow() || this.allowSelectRow()) {
1654
+ clonedData = clonedData.map(row => ({
1655
+ ...row,
1656
+ id: row.id || StBaseService.generateGUID(),
1657
+ }));
1658
+ }
1659
+ this._data = clonedData;
1660
+ if (this.tableSource) {
1661
+ this.tableSource.data = clonedData;
1662
+ if (!this.lazyLoading() && this.localStorageData) {
1663
+ this.paginator.pageIndex = this.localStorageData.pageIndex;
1664
+ //@ts-ignore
1665
+ this.paginator._emitPageEvent(this.localStorageData.pageIndex);
1666
+ }
1667
+ this.changeDetectorRef.markForCheck();
1668
+ }
1669
+ }
1670
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.StSnackBarService }, { token: StTablesTranslationsService }, { token: i3$2.StDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
1671
+ 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 }, allowEditRow: { classPropertyName: "allowEditRow", publicName: "allowEditRow", isSignal: true, isRequired: false, transformFunction: null }, showEditAllRows: { classPropertyName: "showEditAllRows", publicName: "showEditAllRows", isSignal: true, isRequired: false, transformFunction: null }, autoSaveOnChange: { classPropertyName: "autoSaveOnChange", publicName: "autoSaveOnChange", isSignal: true, isRequired: false, transformFunction: null }, canEditRowValidator: { classPropertyName: "canEditRowValidator", publicName: "canEditRowValidator", isSignal: true, isRequired: false, transformFunction: null }, canDeleteRowValidator: { classPropertyName: "canDeleteRowValidator", publicName: "canDeleteRowValidator", isSignal: true, isRequired: false, transformFunction: null }, allowSelectRow: { classPropertyName: "allowSelectRow", publicName: "allowSelectRow", isSignal: true, isRequired: false, transformFunction: null }, selectionFieldLabel: { classPropertyName: "selectionFieldLabel", publicName: "selectionFieldLabel", isSignal: true, isRequired: false, transformFunction: null }, selectRowOnlyOne: { classPropertyName: "selectRowOnlyOne", publicName: "selectRowOnlyOne", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, createButtonAction: { classPropertyName: "createButtonAction", publicName: "createButtonAction", isSignal: true, isRequired: false, transformFunction: null }, disableCreateButton: { classPropertyName: "disableCreateButton", publicName: "disableCreateButton", isSignal: true, isRequired: false, transformFunction: null }, allowCreateRow: { classPropertyName: "allowCreateRow", publicName: "allowCreateRow", isSignal: true, isRequired: false, transformFunction: null }, allowExtendRow: { classPropertyName: "allowExtendRow", publicName: "allowExtendRow", isSignal: true, isRequired: false, transformFunction: null }, extendedRowTemplate: { classPropertyName: "extendedRowTemplate", publicName: "extendedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, initSelectedRow: { classPropertyName: "initSelectedRow", publicName: "initSelectedRow", isSignal: true, isRequired: false, transformFunction: null }, extraCustomFilter: { classPropertyName: "extraCustomFilter", publicName: "extraCustomFilter", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadData: "loadData", saveEditedRow: "saveEditedRow", saveCreatedRow: "saveCreatedRow", rowDeleted: "rowDeleted", selectRowChange: "selectRowChange", fieldValueChanged: "fieldValueChanged" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"st-material-table\">\r\n @if (isLoading()) {\r\n <div class=\"loading-spinner\">\r\n <mat-spinner color=\"accent\"></mat-spinner>\r\n </div>\r\n }\r\n\r\n @if (showTable) {\r\n <st-material-table-caption\r\n [tableTitle]=\"tableTitle()\"\r\n [allowPickColumns]=\"allowPickColumns()\"\r\n [showGlobalSearch]=\"showGlobalSearch()\"\r\n [allowReorderColumns]=\"allowReorderColumns()\"\r\n [columns]=\"columns\"\r\n [initFilters]=\"initFilters\"\r\n [initGlobalSearch]=\"initGlobalSearch\"\r\n [showCreateButton]=\"showCreateButton()\"\r\n [createButtonLabel]=\"createButtonLabel()\"\r\n [createButtonAction]=\"createButtonAction()\"\r\n [allowCreateRow]=\"allowCreateRow()\"\r\n [disableCreateButton]=\"disableCreateButton()\"\r\n [extraCustomFilter]=\"extraCustomFilter()\"\r\n [creatingRow]=\"creatingRow()\"\r\n (captionDataChanged)=\"captionDataChanged($event)\"\r\n (resetTableSettings)=\"resetTableSettings()\"\r\n (addNewRow)=\"addNewRow()\"\r\n ></st-material-table-caption>\r\n }\r\n\r\n <table\r\n [ngClass]=\"{ 'no-hover': !rowClickAction() }\"\r\n mat-table\r\n [dataSource]=\"tableSource\"\r\n matSort\r\n [multiTemplateDataRows]=\"allowExtendRow()\"\r\n >\r\n @for (column of selectedColumns; track column) {\r\n <ng-container [matColumnDef]=\"column.field\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n [style.width]=\"column.width\"\r\n mat-sort-header\r\n [disabled]=\"!column.sort\"\r\n >\r\n @if (column.type === 'actions-row-selecting' && !selectRowOnlyOne()) {\r\n <mat-checkbox\r\n color=\"primary\"\r\n (change)=\"toggleAllRows($event.checked)\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n >\r\n </mat-checkbox>\r\n } @else if (\r\n column.type === 'actions-row-editing' && showEditAllRows()\r\n ) {\r\n <div class=\"row justify-content-end edit-all-rows-button\">\r\n <button\r\n mat-icon-button\r\n (click)=\"turnOnAllEditRows()\"\r\n matTooltip=\"Edit all rows\"\r\n >\r\n <mat-icon>edit_arrow_down</mat-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n {{ column.header }}\r\n }\r\n </th>\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element; let i = index\"\r\n [style.width]=\"column.width\"\r\n >\r\n <st-material-table-row-cell\r\n [column]=\"column\"\r\n [rowData]=\"element\"\r\n [rowIndex]=\"getAbsoluteIndex(i)\"\r\n [rowDataCopy]=\"activeRowsEditing[element.id] || activeRowsCreating[element.id]\"\r\n [rowEditing]=\"!!activeRowsEditing[element.id] || !!activeRowsCreating[element.id]\"\r\n [rowIsSelected]=\"selection.isSelected(element)\"\r\n [rowIsExpanded]=\"element === expandedRow()\"\r\n [canEditRowValidator]=\"canEditRowValidator()\"\r\n [canDeleteRowValidator]=\"canDeleteRowValidator()\"\r\n [selectRowOnlyOne]=\"selectRowOnlyOne()\"\r\n [isFirstEditableColumn]=\"isFirstEditableColumn(column)\"\r\n [autoSaveOnChange]=\"autoSaveOnChange()\"\r\n (editRowEmitter)=\"editRow(element, column)\"\r\n (deleteRowEmitter)=\"deleteRow(element, column, i)\"\r\n (saveEditRowEmitter)=\"saveEditRow(element, column, i)\"\r\n (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n (selectRowChange)=\"selectRowChanged($event, element)\"\r\n (fieldValueChanged)=\"onFieldValueChanged(element, column, $event.value, i)\"\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)=\"clickRowAction(row)\"\r\n ></tr>\r\n @if (allowExtendRow()) {\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n class=\"extended-detail-row\"\r\n ></tr>\r\n }\r\n </table>\r\n <mat-paginator\r\n [showFirstLastButtons]=\"true\"\r\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n [length]=\"dataLength()\"\r\n ></mat-paginator>\r\n @if (allowSelectRow()) {\r\n <div class=\"st-material-table-selected-rows\">\r\n <button type=\"button\" mat-stroked-button [matMenuTriggerFor]=\"menu\">\r\n {{ selection.selected.length }}\r\n {{ stTableTranslations.getTranslations()().rowSelected }}\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n @for (row of selection.selected; track row.id) {\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n [disabled]=\"selection.selected.length <= 0\"\r\n (click)=\"removeSelectedRow($event, row)\"\r\n >\r\n <div class=\"d-flex\">\r\n {{ row[selectionFieldLabel()] }}\r\n <mat-icon class=\"delete-icon\">delete</mat-icon>\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}.st-material-table .edit-all-rows-button{width:98px}.st-material-table .delete-icon{margin-right:0;margin-left:10px}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr.extended-detail-row{height:0;cursor:default}.st-material-table table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}.st-material-table table tbody>tr.expanded-element-row td{border-bottom-width:0}.st-material-table table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr.extended-detail-row{height:0;cursor:default}table.st-material-table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}table.st-material-table tbody>tr.expanded-element-row td{border-bottom-width:0}table.st-material-table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}table.st-material-table .mat-column-active{width:48px}table.st-material-table.no-hover tbody tr{cursor:default}table.st-material-table.no-hover tbody tr.active{background-color:transparent!important}table.st-material-table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}table.st-material-table.no-hover tbody tr:hover{background-color:transparent!important}table.st-material-table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}table.st-material-table.admin-table .actions-cell{width:100px}.dark-theme table.st-material-table thead tr{background-color:#5e4803!important}.dark-theme table.st-material-table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme table.st-material-table tbody tr:hover{background-color:#ffffff08!important}.dark-theme table.st-material-table tbody tr.active{background-color:#1121114d!important}.dark-theme table.st-material-table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table table tbody tr:hover{background-color:#ffffff08!important}.dark-theme .st-material-table table tbody tr.active{background-color:#1121114d!important}.dark-theme .st-material-table table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table mat-paginator{background-color:transparent!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element p,.dark-theme .st-material-table .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .st-material-table .filter .filter-title{color:#eee!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: ["showGlobalSearch", "tableTitle", "allowPickColumns", "allowReorderColumns", "initGlobalSearch", "initFilters", "showCreateButton", "createButtonLabel", "createButtonAction", "allowCreateRow", "disableCreateButton", "creatingRow", "extraCustomFilter", "columns"], outputs: ["captionDataChanged", "resetTableSettings", "addNewRow"] }, { kind: "component", type: MaterialTableRowCellComponent, selector: "st-material-table-row-cell", inputs: ["column", "rowData", "rowIndex", "rowDataCopy", "canEditRowValidator", "canDeleteRowValidator", "selectRowOnlyOne", "isFirstEditableColumn", "autoSaveOnChange", "rowIsSelected", "rowIsExpanded", "rowEditing"], outputs: ["saveEditRowEmitter", "cancelEditRowEmitter", "editRowEmitter", "deleteRowEmitter", "selectRowChange", "fieldValueChanged"] }], animations: [
1689
1672
  trigger('detailExpand', [
1690
1673
  state('collapsed,void', style({ height: '0px', minHeight: '0' })),
1691
1674
  state('expanded', style({ height: '*' })),
@@ -1701,15 +1684,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
1701
1684
  state('expanded', style({ height: '*' })),
1702
1685
  transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
1703
1686
  ]),
1704
- ], 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 [allowCreateRow]=\"allowCreateRow()\"\r\n [disableCreateButton]=\"disableCreateButton()\"\r\n [extraCustomFilter]=\"extraCustomFilter()\"\r\n [creatingRow]=\"creatingRow()\"\r\n (captionDataChanged)=\"captionDataChanged($event)\"\r\n (resetTableSettings)=\"resetTableSettings()\"\r\n (addNewRow)=\"addNewRow()\"\r\n ></st-material-table-caption>\r\n }\r\n\r\n <table\r\n [ngClass]=\"{ 'no-hover': !rowClickAction() }\"\r\n mat-table\r\n [dataSource]=\"tableSource\"\r\n matSort\r\n [multiTemplateDataRows]=\"allowExtendRow()\"\r\n >\r\n @for (column of selectedColumns; track column) {\r\n <ng-container [matColumnDef]=\"column.field\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n mat-sort-header\r\n [disabled]=\"!column.sort\"\r\n >\r\n @if (column.type === 'actions-row-selecting' && !selectRowOnlyOne()) {\r\n <mat-checkbox\r\n color=\"primary\"\r\n (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n >\r\n </mat-checkbox>\r\n } @else if (\r\n column.type === 'actions-row-editing' && showEditAllRows()\r\n ) {\r\n <div class=\"row justify-content-end\" style=\"width: 98px\">\r\n <button\r\n mat-icon-button\r\n (click)=\"turnOnAllEditRows()\"\r\n [matTooltip]=\"'Edit all rows'\"\r\n >\r\n <mat-icon>edit_arrow_down</mat-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n {{ column.header }}\r\n }\r\n </th>\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element; let i = index\"\r\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n >\r\n {{ !!activeRowsEditing[element.id] }}\r\n {{ !!activeRowsCreating[element.id] }}\r\n <st-material-table-row-cell\r\n [column]=\"column\"\r\n [rowData]=\"element\"\r\n [rowIndex]=\"getAbsoluteIndex(i)\"\r\n [rowDataCopy]=\"\r\n activeRowsEditing[element.id] || activeRowsCreating[element.id]\r\n \"\r\n [rowEditing]=\"\r\n !!activeRowsEditing[element.id] ||\r\n !!activeRowsCreating[element.id]\r\n \"\r\n [rowIsSelected]=\"selection.isSelected(element)\"\r\n [rowIsExpanded]=\"element == expandedRow()\"\r\n [canEditRowValidator]=\"canEditRowValidator()\"\r\n [canDeleteRowValidator]=\"canDeleteRowValidator()\"\r\n [selectRowOnlyOne]=\"selectRowOnlyOne()\"\r\n [isFirstEditableColumn]=\"isFirstEditableColumn(column)\"\r\n [autoSaveOnChange]=\"autoSaveOnChange()\"\r\n (editRowEmitter)=\"editRow(element, column)\"\r\n (deleteRowEmitter)=\"deleteRow(element, column, i)\"\r\n (saveEditRowEmitter)=\"saveEditRow(element, column, i)\"\r\n (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n (selectRowChange)=\"selectRowChanged($event, element)\"\r\n (fieldValueChanged)=\"\r\n onFieldValueChanged(element, column, $event.value, i)\r\n \"\r\n ></st-material-table-row-cell>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n [attr.colspan]=\"selectedColumnsString.length\"\r\n >\r\n <div\r\n class=\"expanded-element-detail-wrapper\"\r\n [@detailExpand]=\"element == expandedRow() ? 'expanded' : 'collapsed'\"\r\n >\r\n <div class=\"expanded-element-detail\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"extendedRowTemplate()!\"\r\n [ngTemplateOutletContext]=\"{ data: element }\"\r\n ></ng-container>\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: selectedColumnsString\"\r\n [class.expanded-expanded-row]=\"expandedRow() === row\"\r\n (click)=\"this.clickRowAction(row)\"\r\n ></tr>\r\n @if (allowExtendRow()) {\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n class=\"extended-detail-row\"\r\n ></tr>\r\n }\r\n </table>\r\n <mat-paginator\r\n [showFirstLastButtons]=\"true\"\r\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n [length]=\"dataLength()\"\r\n ></mat-paginator>\r\n @if (allowSelectRow()) {\r\n <div class=\"st-material-table-selected-rows\">\r\n <button type=\"button\" mat-stroked-button [matMenuTriggerFor]=\"menu\">\r\n {{ selection.selected.length }}\r\n {{ stTableTranslations.getTranslations()().rowSelected }}\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n @for (row of selection.selected; track row) {\r\n <button type=\"button\" mat-menu-item (click)=\"removeSelectedRow(row)\">\r\n <div class=\"d-flex\">\r\n {{ row[selectionFieldLabel()]\r\n }}<mat-icon style=\"margin-right: 0; margin-left: 10px\"\r\n >delete</mat-icon\r\n >\r\n </div>\r\n </button>\r\n }\r\n </mat-menu>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:2rem}.st-material-table .st-material-table-selected-rows{position:absolute;bottom:12px;left:5px}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr.extended-detail-row{height:0;cursor:default}.st-material-table table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}.st-material-table table tbody>tr.expanded-element-row td{border-bottom-width:0}.st-material-table table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr.extended-detail-row{height:0;cursor:default}table.st-material-table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}table.st-material-table tbody>tr.expanded-element-row td{border-bottom-width:0}table.st-material-table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}table.st-material-table .mat-column-active{width:48px}table.st-material-table.no-hover tbody tr{cursor:default}table.st-material-table.no-hover tbody tr.active{background-color:transparent!important}table.st-material-table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}table.st-material-table.no-hover tbody tr:hover{background-color:transparent!important}table.st-material-table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}table.st-material-table.admin-table .actions-cell{width:100px}.dark-theme table.st-material-table thead tr{background-color:#5e4803!important}.dark-theme table.st-material-table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme table.st-material-table tbody tr:hover{background-color:#ffffff08!important}.dark-theme table.st-material-table tbody tr.active{background-color:#1121114d!important}.dark-theme table.st-material-table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table table tbody tr:hover{background-color:#ffffff08!important}.dark-theme .st-material-table table tbody tr.active{background-color:#1121114d!important}.dark-theme .st-material-table table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table mat-paginator{background-color:transparent!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element p,.dark-theme .st-material-table .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .st-material-table .filter .filter-title{color:#eee!important}\n"] }]
1705
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.StSnackBarService }, { type: StTablesTranslationsService }, { type: i3$3.StDialogService }], propDecorators: { paginator: [{
1687
+ ], 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 [allowCreateRow]=\"allowCreateRow()\"\r\n [disableCreateButton]=\"disableCreateButton()\"\r\n [extraCustomFilter]=\"extraCustomFilter()\"\r\n [creatingRow]=\"creatingRow()\"\r\n (captionDataChanged)=\"captionDataChanged($event)\"\r\n (resetTableSettings)=\"resetTableSettings()\"\r\n (addNewRow)=\"addNewRow()\"\r\n ></st-material-table-caption>\r\n }\r\n\r\n <table\r\n [ngClass]=\"{ 'no-hover': !rowClickAction() }\"\r\n mat-table\r\n [dataSource]=\"tableSource\"\r\n matSort\r\n [multiTemplateDataRows]=\"allowExtendRow()\"\r\n >\r\n @for (column of selectedColumns; track column) {\r\n <ng-container [matColumnDef]=\"column.field\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n [style.width]=\"column.width\"\r\n mat-sort-header\r\n [disabled]=\"!column.sort\"\r\n >\r\n @if (column.type === 'actions-row-selecting' && !selectRowOnlyOne()) {\r\n <mat-checkbox\r\n color=\"primary\"\r\n (change)=\"toggleAllRows($event.checked)\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n >\r\n </mat-checkbox>\r\n } @else if (\r\n column.type === 'actions-row-editing' && showEditAllRows()\r\n ) {\r\n <div class=\"row justify-content-end edit-all-rows-button\">\r\n <button\r\n mat-icon-button\r\n (click)=\"turnOnAllEditRows()\"\r\n matTooltip=\"Edit all rows\"\r\n >\r\n <mat-icon>edit_arrow_down</mat-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n {{ column.header }}\r\n }\r\n </th>\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element; let i = index\"\r\n [style.width]=\"column.width\"\r\n >\r\n <st-material-table-row-cell\r\n [column]=\"column\"\r\n [rowData]=\"element\"\r\n [rowIndex]=\"getAbsoluteIndex(i)\"\r\n [rowDataCopy]=\"activeRowsEditing[element.id] || activeRowsCreating[element.id]\"\r\n [rowEditing]=\"!!activeRowsEditing[element.id] || !!activeRowsCreating[element.id]\"\r\n [rowIsSelected]=\"selection.isSelected(element)\"\r\n [rowIsExpanded]=\"element === expandedRow()\"\r\n [canEditRowValidator]=\"canEditRowValidator()\"\r\n [canDeleteRowValidator]=\"canDeleteRowValidator()\"\r\n [selectRowOnlyOne]=\"selectRowOnlyOne()\"\r\n [isFirstEditableColumn]=\"isFirstEditableColumn(column)\"\r\n [autoSaveOnChange]=\"autoSaveOnChange()\"\r\n (editRowEmitter)=\"editRow(element, column)\"\r\n (deleteRowEmitter)=\"deleteRow(element, column, i)\"\r\n (saveEditRowEmitter)=\"saveEditRow(element, column, i)\"\r\n (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n (selectRowChange)=\"selectRowChanged($event, element)\"\r\n (fieldValueChanged)=\"onFieldValueChanged(element, column, $event.value, i)\"\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)=\"clickRowAction(row)\"\r\n ></tr>\r\n @if (allowExtendRow()) {\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n class=\"extended-detail-row\"\r\n ></tr>\r\n }\r\n </table>\r\n <mat-paginator\r\n [showFirstLastButtons]=\"true\"\r\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n [length]=\"dataLength()\"\r\n ></mat-paginator>\r\n @if (allowSelectRow()) {\r\n <div class=\"st-material-table-selected-rows\">\r\n <button type=\"button\" mat-stroked-button [matMenuTriggerFor]=\"menu\">\r\n {{ selection.selected.length }}\r\n {{ stTableTranslations.getTranslations()().rowSelected }}\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n @for (row of selection.selected; track row.id) {\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n [disabled]=\"selection.selected.length <= 0\"\r\n (click)=\"removeSelectedRow($event, row)\"\r\n >\r\n <div class=\"d-flex\">\r\n {{ row[selectionFieldLabel()] }}\r\n <mat-icon class=\"delete-icon\">delete</mat-icon>\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}.st-material-table .edit-all-rows-button{width:98px}.st-material-table .delete-icon{margin-right:0;margin-left:10px}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr.extended-detail-row{height:0;cursor:default}.st-material-table table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}.st-material-table table tbody>tr.expanded-element-row td{border-bottom-width:0}.st-material-table table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr.extended-detail-row{height:0;cursor:default}table.st-material-table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}table.st-material-table tbody>tr.expanded-element-row td{border-bottom-width:0}table.st-material-table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}table.st-material-table .mat-column-active{width:48px}table.st-material-table.no-hover tbody tr{cursor:default}table.st-material-table.no-hover tbody tr.active{background-color:transparent!important}table.st-material-table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}table.st-material-table.no-hover tbody tr:hover{background-color:transparent!important}table.st-material-table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}table.st-material-table.admin-table .actions-cell{width:100px}.dark-theme table.st-material-table thead tr{background-color:#5e4803!important}.dark-theme table.st-material-table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme table.st-material-table tbody tr:hover{background-color:#ffffff08!important}.dark-theme table.st-material-table tbody tr.active{background-color:#1121114d!important}.dark-theme table.st-material-table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table table tbody tr:hover{background-color:#ffffff08!important}.dark-theme .st-material-table table tbody tr.active{background-color:#1121114d!important}.dark-theme .st-material-table table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table mat-paginator{background-color:transparent!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element p,.dark-theme .st-material-table .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .st-material-table .filter .filter-title{color:#eee!important}\n"] }]
1688
+ }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.StSnackBarService }, { type: StTablesTranslationsService }, { type: i3$2.StDialogService }], propDecorators: { paginator: [{
1706
1689
  type: ViewChild,
1707
1690
  args: [MatPaginator]
1708
1691
  }], sort: [{
1709
1692
  type: ViewChild,
1710
1693
  args: [MatSort]
1711
- }], data: [{
1712
- type: Input
1713
1694
  }] } });
1714
1695
 
1715
1696
  function mapTableDataToApi(tableOptions) {
@@ -1776,7 +1757,7 @@ class StTablesModule {
1776
1757
  ],
1777
1758
  };
1778
1759
  }
1779
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StTablesModule, deps: [{ token: i5.MatIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule }); }
1760
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StTablesModule, deps: [{ token: i3.MatIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule }); }
1780
1761
  static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: StTablesModule, declarations: [MaterialTableCaptionComponent,
1781
1762
  MaterialTableComponent,
1782
1763
  MaterialTableOrderColumnDialogComponent,
@@ -1885,7 +1866,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
1885
1866
  exports: [MaterialTableComponent, SelectTableComponent],
1886
1867
  providers: [MatDatepickerModule],
1887
1868
  }]
1888
- }], ctorParameters: () => [{ type: i5.MatIconRegistry }] });
1869
+ }], ctorParameters: () => [{ type: i3.MatIconRegistry }] });
1889
1870
 
1890
1871
  /*
1891
1872
  * Public API Surface of ngx-st-tables