ngx-st-tables 17.0.63 → 17.0.65

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 (18) hide show
  1. package/esm2022/lib/components/material-table/material-table-caption/material-table-caption.component.mjs +11 -4
  2. package/esm2022/lib/components/material-table/material-table-caption/material-table-filter-dialog/material-table-filter-dialog.component.mjs +80 -65
  3. package/esm2022/lib/components/material-table/material-table-caption/material-table-filter-dialog/material-table-filter.component.mjs +302 -0
  4. package/esm2022/lib/components/material-table/material-table.component.mjs +61 -8
  5. package/esm2022/lib/constants/default-translations.mjs +6 -2
  6. package/esm2022/lib/models/models.mjs +2 -0
  7. package/esm2022/lib/models/st-tables-translations.model.mjs +1 -1
  8. package/esm2022/lib/ngx-st-tables.module.mjs +5 -2
  9. package/fesm2022/ngx-st-tables.mjs +455 -78
  10. package/fesm2022/ngx-st-tables.mjs.map +1 -1
  11. package/lib/components/material-table/material-table-caption/material-table-caption.component.d.ts +1 -12
  12. package/lib/components/material-table/material-table-caption/material-table-filter-dialog/material-table-filter-dialog.component.d.ts +11 -12
  13. package/lib/components/material-table/material-table-caption/material-table-filter-dialog/material-table-filter.component.d.ts +27 -0
  14. package/lib/components/material-table/material-table.component.d.ts +1 -1
  15. package/lib/models/models.d.ts +14 -0
  16. package/lib/models/st-tables-translations.model.d.ts +5 -1
  17. package/lib/ngx-st-tables.module.d.ts +28 -27
  18. package/package.json +1 -1
package/fesm2022/ngx-st-tables.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { signal, Injectable, Optional, Inject, EventEmitter, Component, ViewChild, Input, Output, ChangeDetectionStrategy, input, output, model, ViewEncapsulation, NgModule } from '@angular/core';
2
+ import { signal, Injectable, Optional, Inject, EventEmitter, Component, ViewChild, Input, Output, input, output, ChangeDetectionStrategy, model, 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 from '@angular/material/table';
@@ -10,7 +10,7 @@ import * as i1 from '@angular/common';
10
10
  import { CommonModule } from '@angular/common';
11
11
  import * as i5 from '@angular/material/icon';
12
12
  import { MatIconModule } from '@angular/material/icon';
13
- import * as i7 from '@angular/material/form-field';
13
+ import * as i3$1 from '@angular/material/form-field';
14
14
  import { MatFormFieldModule } from '@angular/material/form-field';
15
15
  import * as i6 from '@angular/material/input';
16
16
  import { MatInputModule } from '@angular/material/input';
@@ -20,32 +20,32 @@ import * as i1$1 from '@angular/material/dialog';
20
20
  import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
21
21
  import * as i4$1 from '@angular/material/button';
22
22
  import { MatButtonModule } from '@angular/material/button';
23
- import * as i9 from '@angular/material/tooltip';
23
+ import * as i6$2 from '@angular/material/tooltip';
24
24
  import { MatTooltipModule } from '@angular/material/tooltip';
25
- import * as i9$1 from '@angular/material/select';
25
+ import * as i9 from '@angular/material/select';
26
26
  import { MatSelectModule } from '@angular/material/select';
27
- import * as i11 from '@angular/material/core';
27
+ import * as i6$1 from '@angular/material/core';
28
28
  import { MatNativeDateModule } from '@angular/material/core';
29
- import * as i12 from '@angular/material/datepicker';
29
+ import * as i7 from '@angular/material/datepicker';
30
30
  import { MatDatepickerModule } from '@angular/material/datepicker';
31
31
  import * as i5$1 from '@angular/cdk/drag-drop';
32
32
  import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
33
- import * as i11$1 from '@angular/material/badge';
33
+ import * as i11 from '@angular/material/badge';
34
34
  import { MatBadge } from '@angular/material/badge';
35
35
  import * as i8$1 from '@angular/material/sort';
36
36
  import { MatSort, MatSortModule } from '@angular/material/sort';
37
37
  import { SelectionModel } from '@angular/cdk/collections';
38
38
  import * as i1$2 from 'ngx-st-snack-bar';
39
39
  import { StSnackBarModule } from 'ngx-st-snack-bar';
40
- import * as i9$2 from '@angular/material/menu';
40
+ import * as i9$1 from '@angular/material/menu';
41
41
  import { MatMenuModule } from '@angular/material/menu';
42
42
  import * as i10 from '@angular/material/checkbox';
43
43
  import { MatCheckboxModule } from '@angular/material/checkbox';
44
- import * as i11$3 from '@angular/material/progress-spinner';
44
+ import * as i11$2 from '@angular/material/progress-spinner';
45
45
  import { MatProgressSpinner } from '@angular/material/progress-spinner';
46
46
  import * as i8 from '@angular/router';
47
47
  import { RouterModule } from '@angular/router';
48
- import * as i11$2 from 'ngx-st-date-format';
48
+ import * as i11$1 from 'ngx-st-date-format';
49
49
  import { StDateFormatModule } from 'ngx-st-date-format';
50
50
  import { MatExpansionModule } from '@angular/material/expansion';
51
51
  import { StQtyInputModule } from 'ngx-st-qty-input';
@@ -60,7 +60,7 @@ const DEFAULT_TRANSLATIONS = {
60
60
  reorderColumns: 'Reorder Columns',
61
61
  expandAllFilters: 'Expand all filters',
62
62
  collapseAllFilters: 'Collapse all filters',
63
- clearFilters: 'Clear Filters',
63
+ clearAllFilters: 'Clear All Filters',
64
64
  filterTitle: 'Filters',
65
65
  filter: 'Filter',
66
66
  searchFilter: 'Search',
@@ -74,6 +74,10 @@ const DEFAULT_TRANSLATIONS = {
74
74
  rowSelected: 'row selected',
75
75
  rowSelectColumnLabel: 'Row Select',
76
76
  rowActionsColumnLabel: 'Row Actions',
77
+ matchMode: 'Match Mode',
78
+ clearFilter: 'Clear Filter',
79
+ dateFrom: 'Date From',
80
+ dateTo: 'Date To',
77
81
  };
78
82
 
79
83
  class StTablesTranslationsService {
@@ -166,7 +170,7 @@ class SelectTableComponent {
166
170
  return !!this.rowSelected.find(activeRow => activeRow === row);
167
171
  }
168
172
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
169
- 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.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr td a button{color:#000}.st-material-table table tbody>tr td a mat-icon{color:#333}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr td a button{color:#000}table.st-material-table tbody>tr td a mat-icon{color:#333}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 .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 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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.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: i7.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"] }] }); }
173
+ 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.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr td a button{color:#000}.st-material-table table tbody>tr td a mat-icon{color:#333}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr td a button{color:#000}table.st-material-table tbody>tr td a mat-icon{color:#333}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 .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 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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.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$1.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"] }] }); }
170
174
  }
171
175
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectTableComponent, decorators: [{
172
176
  type: Component,
@@ -198,81 +202,393 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
198
202
  type: Output
199
203
  }] } });
200
204
 
205
+ class MaterialTableFilterComponent extends StSubscribeDestroyComponent {
206
+ constructor(stTableTranslations, fb) {
207
+ super();
208
+ this.stTableTranslations = stTableTranslations;
209
+ this.fb = fb;
210
+ this.column = input.required({});
211
+ this.filterValue = input({}, {
212
+ transform: (filterValue) => {
213
+ this.setFilterValue(filterValue);
214
+ return filterValue || {};
215
+ },
216
+ });
217
+ this.filterValueChanged = output();
218
+ this.formGroup = this.fb.group({
219
+ matchMode: {
220
+ value: 'contains',
221
+ disabled: true,
222
+ },
223
+ value: '',
224
+ dateFrom: null,
225
+ dateTo: null,
226
+ });
227
+ this.isUpdatingFromOutside = false;
228
+ }
229
+ ngOnInit() {
230
+ this.formGroup.valueChanges.subscribe(() => {
231
+ if (!this.isUpdatingFromOutside) {
232
+ this.updateAfterFormValueChanged();
233
+ }
234
+ });
235
+ // this.filtersValue.subscribe(filtersValue => {
236
+ // console.log('Filters updated child');
237
+ // });
238
+ }
239
+ setFilterValue(newFilterValue) {
240
+ if (newFilterValue) {
241
+ this.formGroup.controls.matchMode.setValue(newFilterValue.matchMode, {
242
+ emitEvent: false,
243
+ });
244
+ if (this.column().filterType === 'date') {
245
+ const tmpValue = newFilterValue.value;
246
+ this.formGroup.controls.dateFrom.setValue(tmpValue[0] ? new Date(tmpValue[0]) : null, { emitEvent: false });
247
+ this.formGroup.controls.dateTo.setValue(tmpValue[1] ? new Date(tmpValue[1]) : null, { emitEvent: false });
248
+ }
249
+ else {
250
+ this.formGroup.controls.value.setValue(newFilterValue.value || '', { emitEvent: false });
251
+ }
252
+ }
253
+ }
254
+ updateAfterFormValueChanged() {
255
+ const tmpValue = this.column().filterType === 'date'
256
+ ? [
257
+ this.formGroup.controls.dateFrom.value
258
+ ? this.formGroup.controls.dateFrom.value.toISOString()
259
+ : null,
260
+ this.formGroup.controls.dateTo.value
261
+ ? this.formGroup.controls.dateTo.value.toISOString()
262
+ : null,
263
+ ]
264
+ : this.formGroup.controls.value.value;
265
+ const newFilter = {
266
+ matchMode: this.formGroup.controls.matchMode.value,
267
+ value: tmpValue,
268
+ };
269
+ this.filterValueChanged.emit(newFilter);
270
+ // const newValue = {
271
+ // ...this.filtersValue(),
272
+ // [this.column().field]: newFilter,
273
+ // };
274
+ //
275
+ // this.filtersValue.set(newValue);
276
+ }
277
+ 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 }); }
278
+ 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: `
279
+ <form class="row" [formGroup]="formGroup" style="width: 100%;">
280
+ <div class="col-auto">
281
+ <mat-form-field appearance="outline" style="width: 120px">
282
+ <mat-label>
283
+ {{ stTableTranslations.getTranslations()().matchMode }}</mat-label
284
+ >
285
+ <input matInput type="text" [formControlName]="'matchMode'" />
286
+ </mat-form-field>
287
+ </div>
288
+
289
+ @if (
290
+ column().filterType === 'string' || column().filterType === 'number'
291
+ ) {
292
+ <div class="col">
293
+ <mat-form-field appearance="outline" style="width: 100%">
294
+ <mat-label>{{
295
+ stTableTranslations.getTranslations()().searchFilter
296
+ }}</mat-label>
297
+ <input
298
+ matInput
299
+ [type]="column().filterType === 'string' ? 'text' : 'number'"
300
+ [formControlName]="'value'"
301
+ />
302
+ </mat-form-field>
303
+ </div>
304
+ }
305
+
306
+ @if (column().filterType === 'date') {
307
+ <div class="col">
308
+ <mat-form-field appearance="outline" style="width: 170px">
309
+ <mat-label>{{
310
+ stTableTranslations.getTranslations()().dateFrom
311
+ }}</mat-label>
312
+ <input
313
+ matInput
314
+ [matDatepicker]="picker1"
315
+ [formControlName]="'dateFrom'"
316
+ />
317
+ <mat-datepicker-toggle
318
+ matIconSuffix
319
+ [for]="picker1"
320
+ ></mat-datepicker-toggle>
321
+ <mat-datepicker #picker1></mat-datepicker>
322
+ </mat-form-field>
323
+ </div>
324
+ <div class="col">
325
+ <mat-form-field appearance="outline" style="width: 170px">
326
+ <mat-label>{{
327
+ stTableTranslations.getTranslations()().dateTo
328
+ }}</mat-label>
329
+ <input
330
+ matInput
331
+ [matDatepicker]="picker2"
332
+ [formControlName]="'dateTo'"
333
+ />
334
+ <mat-datepicker-toggle
335
+ matIconSuffix
336
+ [for]="picker2"
337
+ ></mat-datepicker-toggle>
338
+ <mat-datepicker #picker2></mat-datepicker>
339
+ </mat-form-field>
340
+ </div>
341
+ }
342
+
343
+ @if (column().filterType === 'boolean') {
344
+ <div class="col">
345
+ <mat-form-field appearance="outline" style="width: 100%">
346
+ <mat-label>{{
347
+ stTableTranslations.getTranslations()().booleanPickValue
348
+ }}</mat-label>
349
+ <mat-select [formControlName]="'value'">
350
+ <mat-option value="">{{
351
+ stTableTranslations.getTranslations()().booleanNone
352
+ }}</mat-option>
353
+ <mat-option [value]="true">{{
354
+ stTableTranslations.getTranslations()().booleanYes
355
+ }}</mat-option>
356
+ <mat-option [value]="false">{{
357
+ stTableTranslations.getTranslations()().booleanNo
358
+ }}</mat-option>
359
+ </mat-select>
360
+ </mat-form-field>
361
+ </div>
362
+ }
363
+
364
+ @if (column().filterType === 'custom') {
365
+ <div class="col">
366
+ <mat-form-field appearance="outline" style="width: 100%">
367
+ <mat-label>{{
368
+ stTableTranslations.getTranslations()().customPickValue
369
+ }}</mat-label>
370
+ <mat-select [formControlName]="'value'">
371
+ <mat-option value="">{{
372
+ stTableTranslations.getTranslations()().customNone
373
+ }}</mat-option>
374
+ @for (option of column().customFilterOptions; track option) {
375
+ <mat-option [value]="option.value">
376
+ {{ option.label }}
377
+ </mat-option>
378
+ }
379
+ </mat-select>
380
+ </mat-form-field>
381
+ </div>
382
+ }
383
+ </form>
384
+ `, isInline: true, styles: [":host{width:100%}form.row{gap:8px}form.row>:is(.col-auto,.col){padding:0}\n"], dependencies: [{ kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.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: i9.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$1.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 }); }
385
+ }
386
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableFilterComponent, decorators: [{
387
+ type: Component,
388
+ args: [{ selector: 'ngx-st-material-table-filter', template: `
389
+ <form class="row" [formGroup]="formGroup" style="width: 100%;">
390
+ <div class="col-auto">
391
+ <mat-form-field appearance="outline" style="width: 120px">
392
+ <mat-label>
393
+ {{ stTableTranslations.getTranslations()().matchMode }}</mat-label
394
+ >
395
+ <input matInput type="text" [formControlName]="'matchMode'" />
396
+ </mat-form-field>
397
+ </div>
398
+
399
+ @if (
400
+ column().filterType === 'string' || column().filterType === 'number'
401
+ ) {
402
+ <div class="col">
403
+ <mat-form-field appearance="outline" style="width: 100%">
404
+ <mat-label>{{
405
+ stTableTranslations.getTranslations()().searchFilter
406
+ }}</mat-label>
407
+ <input
408
+ matInput
409
+ [type]="column().filterType === 'string' ? 'text' : 'number'"
410
+ [formControlName]="'value'"
411
+ />
412
+ </mat-form-field>
413
+ </div>
414
+ }
415
+
416
+ @if (column().filterType === 'date') {
417
+ <div class="col">
418
+ <mat-form-field appearance="outline" style="width: 170px">
419
+ <mat-label>{{
420
+ stTableTranslations.getTranslations()().dateFrom
421
+ }}</mat-label>
422
+ <input
423
+ matInput
424
+ [matDatepicker]="picker1"
425
+ [formControlName]="'dateFrom'"
426
+ />
427
+ <mat-datepicker-toggle
428
+ matIconSuffix
429
+ [for]="picker1"
430
+ ></mat-datepicker-toggle>
431
+ <mat-datepicker #picker1></mat-datepicker>
432
+ </mat-form-field>
433
+ </div>
434
+ <div class="col">
435
+ <mat-form-field appearance="outline" style="width: 170px">
436
+ <mat-label>{{
437
+ stTableTranslations.getTranslations()().dateTo
438
+ }}</mat-label>
439
+ <input
440
+ matInput
441
+ [matDatepicker]="picker2"
442
+ [formControlName]="'dateTo'"
443
+ />
444
+ <mat-datepicker-toggle
445
+ matIconSuffix
446
+ [for]="picker2"
447
+ ></mat-datepicker-toggle>
448
+ <mat-datepicker #picker2></mat-datepicker>
449
+ </mat-form-field>
450
+ </div>
451
+ }
452
+
453
+ @if (column().filterType === 'boolean') {
454
+ <div class="col">
455
+ <mat-form-field appearance="outline" style="width: 100%">
456
+ <mat-label>{{
457
+ stTableTranslations.getTranslations()().booleanPickValue
458
+ }}</mat-label>
459
+ <mat-select [formControlName]="'value'">
460
+ <mat-option value="">{{
461
+ stTableTranslations.getTranslations()().booleanNone
462
+ }}</mat-option>
463
+ <mat-option [value]="true">{{
464
+ stTableTranslations.getTranslations()().booleanYes
465
+ }}</mat-option>
466
+ <mat-option [value]="false">{{
467
+ stTableTranslations.getTranslations()().booleanNo
468
+ }}</mat-option>
469
+ </mat-select>
470
+ </mat-form-field>
471
+ </div>
472
+ }
473
+
474
+ @if (column().filterType === 'custom') {
475
+ <div class="col">
476
+ <mat-form-field appearance="outline" style="width: 100%">
477
+ <mat-label>{{
478
+ stTableTranslations.getTranslations()().customPickValue
479
+ }}</mat-label>
480
+ <mat-select [formControlName]="'value'">
481
+ <mat-option value="">{{
482
+ stTableTranslations.getTranslations()().customNone
483
+ }}</mat-option>
484
+ @for (option of column().customFilterOptions; track option) {
485
+ <mat-option [value]="option.value">
486
+ {{ option.label }}
487
+ </mat-option>
488
+ }
489
+ </mat-select>
490
+ </mat-form-field>
491
+ </div>
492
+ }
493
+ </form>
494
+ `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{width:100%}form.row{gap:8px}form.row>:is(.col-auto,.col){padding:0}\n"] }]
495
+ }], ctorParameters: () => [{ type: StTablesTranslationsService }, { type: i2.NonNullableFormBuilder }] });
496
+
201
497
  class MaterialTableFilterDialogComponent {
202
- constructor(dialogData, dialogRef, fb, changeDetectorRef, stTableTranslations) {
498
+ constructor(dialogData, dialogRef, changeDetectorRef, stTableTranslations) {
203
499
  this.dialogData = dialogData;
204
500
  this.dialogRef = dialogRef;
205
- this.fb = fb;
206
501
  this.changeDetectorRef = changeDetectorRef;
207
502
  this.stTableTranslations = stTableTranslations;
208
- this.filterColumns = [];
209
- this.formGroup = this.fb.group({});
210
- this.allVisible = true;
503
+ this.filterColumns = signal([]);
504
+ this.allVisible = signal(true);
505
+ this.filtersValue = signal({});
506
+ }
507
+ hasFilterValue(column) {
508
+ const filter = this.filtersValue()[column.field];
509
+ if (!filter?.value)
510
+ return false;
511
+ if (column.filterType === 'date') {
512
+ const dateValues = filter.value;
513
+ return !!(dateValues?.[0] || dateValues?.[1]);
514
+ }
515
+ return !!filter.value;
211
516
  }
212
517
  ngOnInit() {
213
- this.filterColumns = this.dialogData.columns
518
+ const columns = this.dialogData.columns
214
519
  .filter(column => column.filter)
215
520
  .map(col => {
216
- const valueGroup = this.fb.group({
217
- value: this.fb.control(''),
218
- matchMode: this.fb.control(MaterialTableFilterDialogComponent.getBaseMatchModeByType(col.filterType)),
219
- });
220
- valueGroup.controls.matchMode.disable();
221
- this.formGroup.addControl(col.field, valueGroup);
521
+ let filterValue = null;
522
+ if (col.filterType === 'boolean' || col.filterType === 'number') {
523
+ filterValue = null;
524
+ }
525
+ else if (col.filterType === 'string') {
526
+ filterValue = '';
527
+ }
528
+ else if (col.filterType === 'date') {
529
+ filterValue = [null, null];
530
+ }
531
+ this.filtersValue.update(current => ({
532
+ ...current,
533
+ [col.field]: {
534
+ value: filterValue,
535
+ matchMode: MaterialTableFilterDialogComponent.getBaseMatchModeByType(col.filterType),
536
+ },
537
+ }));
222
538
  return {
223
539
  ...col,
540
+ expanded: true,
224
541
  };
225
542
  });
543
+ this.filterColumns.set(columns);
226
544
  if (this.dialogData.initFilters) {
227
- const filtersKeys = Object.keys(this.dialogData.initFilters);
228
- filtersKeys.forEach(key => {
229
- if (this.formGroup.get(key)) {
230
- this.formGroup.get([key, 'matchMode']).setValue(this.dialogData.initFilters[key].matchMode);
231
- this.formGroup.get([key, 'value']).setValue(this.dialogData.initFilters[key].value);
232
- }
233
- });
545
+ this.filtersValue.set(this.dialogData.initFilters);
234
546
  }
235
547
  }
548
+ clearFilter(column) {
549
+ this.filtersValue.update(current => ({
550
+ ...current,
551
+ [column.field]: {
552
+ value: this.getDefaultFilterValue(column.filterType),
553
+ matchMode: current[column.field].matchMode,
554
+ },
555
+ }));
556
+ }
236
557
  clearAllFilters() {
237
- this.filterColumns.forEach(column => {
238
- if (this.formGroup.get(column.field)) {
239
- this.formGroup.get([column.field, 'value']).setValue('');
240
- }
558
+ this.filterColumns().forEach(column => {
559
+ this.clearFilter(column);
241
560
  });
242
- this.changeDetectorRef.markForCheck();
243
561
  }
244
562
  showAllFilters() {
245
- this.filterColumns.forEach(column => {
246
- column.expanded = true;
247
- });
248
- this.allVisible = true;
249
- this.changeDetectorRef.markForCheck();
563
+ this.filterColumns.update(columns => columns.map(column => ({ ...column, expanded: true })));
564
+ this.allVisible.set(true);
250
565
  }
251
566
  hideAllFilters() {
252
- this.filterColumns.forEach(column => {
253
- column.expanded = false;
254
- });
255
- this.allVisible = false;
256
- this.changeDetectorRef.markForCheck();
567
+ this.filterColumns.update(columns => columns.map(column => ({ ...column, expanded: false })));
568
+ this.allVisible.set(false);
257
569
  }
258
570
  saveFilters() {
259
- const filters = {};
260
- const formValues = this.formGroup.getRawValue();
261
- const filterKeys = Object.keys(formValues);
262
- filterKeys.forEach(key => {
263
- const value = formValues[key].value;
264
- const matchMode = formValues[key].matchMode;
265
- if (value !== '' && value !== null && value !== undefined) {
266
- filters[key] = {
267
- value: value,
268
- matchMode: matchMode,
269
- };
270
- }
271
- });
272
571
  this.dialogRef.close({
273
- filters: filters,
572
+ filters: this.filtersValue(),
274
573
  });
275
574
  }
575
+ filterValueChanged(column, newFilter) {
576
+ this.filtersValue.update(current => ({
577
+ ...current,
578
+ [column.field]: newFilter,
579
+ }));
580
+ }
581
+ getDefaultFilterValue(filterType) {
582
+ switch (filterType) {
583
+ case 'date':
584
+ return [null, null];
585
+ case 'boolean':
586
+ case 'number':
587
+ return null;
588
+ default:
589
+ return '';
590
+ }
591
+ }
276
592
  static getBaseMatchModeByType(filterType) {
277
593
  if (filterType === 'date') {
278
594
  return 'between';
@@ -286,16 +602,16 @@ class MaterialTableFilterDialogComponent {
286
602
  return 'contains';
287
603
  }
288
604
  }
289
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableFilterDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }, { token: i2.NonNullableFormBuilder }, { token: i0.ChangeDetectorRef }, { token: StTablesTranslationsService }], target: i0.ɵɵFactoryTarget.Component }); }
290
- 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 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 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 mat-icon-button\r\n (click)=\"clearAllFilters()\"\r\n [matTooltip]=\"stTableTranslations.getTranslations()().clearFilters\"\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 <form [formGroup]=\"formGroup\">\r\n @for (column of filterColumns; track column.field) {\r\n @switch (column.filterType || column.type || 'string') {\r\n @case ('string') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n [value]=\"'Contains'\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().searchFilter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"column.visible\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n />\r\n <button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"\r\n formGroup.controls[column.field].controls[\r\n 'value'\r\n ].setValue('')\r\n \"\r\n >\r\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('number') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"number\"\r\n [disabled]=\"column.visible\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('date') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filterChooseDate\r\n }}</mat-label>\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker\"\r\n [disabled]=\"column.visible\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n />\r\n <mat-datepicker-toggle\r\n matIconSuffix\r\n [for]=\"picker\"\r\n ></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('boolean') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().booleanPickValue\r\n }}</mat-label>\r\n <mat-select\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n >\r\n <mat-option value=\"\">{{\r\n stTableTranslations.getTranslations()().booleanNone\r\n }}</mat-option>\r\n <mat-option [value]=\"true\">{{\r\n stTableTranslations.getTranslations()().booleanYes\r\n }}</mat-option>\r\n <mat-option [value]=\"false\">{{\r\n stTableTranslations.getTranslations()().booleanNo\r\n }}</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('custom') {\r\n @if (column.customFilterOptions) {}\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().customPickValue\r\n }}</mat-label>\r\n <mat-select\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n >\r\n <mat-option value=\"\">{{\r\n stTableTranslations.getTranslations()().customNone\r\n }}</mat-option>\r\n @for (option of column.customFilterOptions; 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 </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n }\r\n </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n <button mat-flat-button mat-dialog-close>\r\n {{ stTableTranslations.getTranslations()().cancel }}\r\n </button>\r\n <button mat-flat-button color=\"accent\" (click)=\"saveFilters()\">\r\n {{ stTableTranslations.getTranslations()().save }}\r\n </button>\r\n </div>\r\n</mat-dialog-actions>\r\n\r\n<ng-template #filterHeader let-column>\r\n <div\r\n class=\"filter-title row justify-content-between\"\r\n [ngClass]=\"{\r\n 'value-set': formGroup.controls[column.field].controls['value'].value\r\n }\"\r\n >\r\n <p>\r\n {{ column.header }}\r\n </p>\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</ng-template>\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}.filter .filter-title mat-icon{cursor:pointer}.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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.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: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.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: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i12.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i12.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i12.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
605
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableFilterDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }, { token: i0.ChangeDetectorRef }, { token: StTablesTranslationsService }], target: i0.ɵɵFactoryTarget.Component }); }
606
+ 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 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 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 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 mat-flat-button mat-dialog-close>\r\n {{ stTableTranslations.getTranslations()().cancel }}\r\n </button>\r\n <button mat-flat-button color=\"accent\" (click)=\"saveFilters()\">\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: i1.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$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$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 }); }
291
607
  }
292
608
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableFilterDialogComponent, decorators: [{
293
609
  type: Component,
294
- 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 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 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 mat-icon-button\r\n (click)=\"clearAllFilters()\"\r\n [matTooltip]=\"stTableTranslations.getTranslations()().clearFilters\"\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 <form [formGroup]=\"formGroup\">\r\n @for (column of filterColumns; track column.field) {\r\n @switch (column.filterType || column.type || 'string') {\r\n @case ('string') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n [value]=\"'Contains'\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().searchFilter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"column.visible\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n />\r\n <button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"\r\n formGroup.controls[column.field].controls[\r\n 'value'\r\n ].setValue('')\r\n \"\r\n >\r\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('number') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"number\"\r\n [disabled]=\"column.visible\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('date') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filterChooseDate\r\n }}</mat-label>\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker\"\r\n [disabled]=\"column.visible\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n />\r\n <mat-datepicker-toggle\r\n matIconSuffix\r\n [for]=\"picker\"\r\n ></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('boolean') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().booleanPickValue\r\n }}</mat-label>\r\n <mat-select\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n >\r\n <mat-option value=\"\">{{\r\n stTableTranslations.getTranslations()().booleanNone\r\n }}</mat-option>\r\n <mat-option [value]=\"true\">{{\r\n stTableTranslations.getTranslations()().booleanYes\r\n }}</mat-option>\r\n <mat-option [value]=\"false\">{{\r\n stTableTranslations.getTranslations()().booleanNo\r\n }}</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('custom') {\r\n @if (column.customFilterOptions) {}\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().customPickValue\r\n }}</mat-label>\r\n <mat-select\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n >\r\n <mat-option value=\"\">{{\r\n stTableTranslations.getTranslations()().customNone\r\n }}</mat-option>\r\n @for (option of column.customFilterOptions; 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 </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n }\r\n </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n <button mat-flat-button mat-dialog-close>\r\n {{ stTableTranslations.getTranslations()().cancel }}\r\n </button>\r\n <button mat-flat-button color=\"accent\" (click)=\"saveFilters()\">\r\n {{ stTableTranslations.getTranslations()().save }}\r\n </button>\r\n </div>\r\n</mat-dialog-actions>\r\n\r\n<ng-template #filterHeader let-column>\r\n <div\r\n class=\"filter-title row justify-content-between\"\r\n [ngClass]=\"{\r\n 'value-set': formGroup.controls[column.field].controls['value'].value\r\n }\"\r\n >\r\n <p>\r\n {{ column.header }}\r\n </p>\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</ng-template>\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}.filter .filter-title mat-icon{cursor:pointer}.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"] }]
610
+ 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 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 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 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 mat-flat-button mat-dialog-close>\r\n {{ stTableTranslations.getTranslations()().cancel }}\r\n </button>\r\n <button mat-flat-button color=\"accent\" (click)=\"saveFilters()\">\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"] }]
295
611
  }], ctorParameters: () => [{ type: undefined, decorators: [{
296
612
  type: Inject,
297
613
  args: [MAT_DIALOG_DATA]
298
- }] }, { type: i1$1.MatDialogRef }, { type: i2.NonNullableFormBuilder }, { type: i0.ChangeDetectorRef }, { type: StTablesTranslationsService }] });
614
+ }] }, { type: i1$1.MatDialogRef }, { type: i0.ChangeDetectorRef }, { type: StTablesTranslationsService }] });
299
615
 
300
616
  class MaterialTableOrderColumnDialogComponent {
301
617
  constructor(dialogData, dialogRef, stTablesTranslations) {
@@ -379,7 +695,7 @@ class MaterialTableCaptionComponent extends StSubscribeDestroyComponent {
379
695
  initFilters: this.filters,
380
696
  columns: this.columns,
381
697
  },
382
- maxWidth: '450px',
698
+ maxWidth: '550px',
383
699
  width: '100%',
384
700
  autoFocus: false,
385
701
  })
@@ -438,11 +754,18 @@ class MaterialTableCaptionComponent extends StSubscribeDestroyComponent {
438
754
  }
439
755
  setActiveFiltersCount() {
440
756
  const filtersKeys = Object.keys(this.filters);
441
- this.activeFiltersCount =
442
- filtersKeys.filter(key => this.filters[key]).length || 0;
757
+ this.activeFiltersCount = filtersKeys.filter(key => {
758
+ const filterValue = this.filters[key]?.value;
759
+ if (Array.isArray(filterValue)) {
760
+ // Dla filtrów typu date (które są tablicami)
761
+ return filterValue.some(value => value !== null && value !== '');
762
+ }
763
+ // Dla pozostałych typów filtrów
764
+ return filterValue !== null && filterValue !== '';
765
+ }).length;
443
766
  }
444
767
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableCaptionComponent, deps: [{ token: StTablesTranslationsService }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
445
- 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 }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { captionDataChanged: "captionDataChanged", resetTableSettings: "resetTableSettings" }, 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() || showFilterButton || showCreateButton()),\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 mat-icon-button (click)=\"resetTable()\">\r\n <mat-icon class=\"reorder-icon\">refresh</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (allowReorderColumns()) {\r\n <button mat-icon-button (click)=\"openReorderColumnsDialog()\">\r\n <mat-icon class=\"reorder-icon\">low_priority</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n @if (showGlobalSearch() || showFilterButton || showCreateButton()) {\r\n <div class=\"col-auto d-flex align-items-center gap-1\">\r\n @if (showFilterButton) {\r\n <!-- @if (activeFiltersCount) {-->\r\n <!-- <button-->\r\n <!-- mat-icon-button-->\r\n <!-- (click)=\"clearAllFilters()\"-->\r\n <!-- [matTooltip]=\"'Clear Filters'\"-->\r\n <!-- >-->\r\n <!-- <mat-icon>filter_alt_off</mat-icon>-->\r\n <!-- </button>-->\r\n <!-- }-->\r\n\r\n <button mat-icon-button (click)=\"openFilterDialog()\">\r\n <mat-icon\r\n [matBadge]=\"activeFiltersCount\"\r\n [matBadgeHidden]=\"!activeFiltersCount\"\r\n [matBadgeSize]=\"'small'\"\r\n matBadgePosition=\"before\"\r\n >filter_alt</mat-icon\r\n >\r\n </button>\r\n }\r\n\r\n @if (showGlobalSearch()) {\r\n <mat-form-field appearance=\"outline\" 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 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 (showCreateButton()) {\r\n <button\r\n color=\"primary\"\r\n mat-flat-button\r\n (click)=\"createButtonAction()()\"\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: "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: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.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.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: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i9$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i11.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i11$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
768
+ 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 }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { captionDataChanged: "captionDataChanged", resetTableSettings: "resetTableSettings" }, 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() || showFilterButton || showCreateButton()),\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 mat-icon-button (click)=\"resetTable()\">\r\n <mat-icon class=\"reorder-icon\">refresh</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (allowReorderColumns()) {\r\n <button mat-icon-button (click)=\"openReorderColumnsDialog()\">\r\n <mat-icon class=\"reorder-icon\">low_priority</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n @if (showGlobalSearch() || showFilterButton || showCreateButton()) {\r\n <div class=\"col-auto d-flex align-items-center gap-1\">\r\n @if (showFilterButton) {\r\n <!-- @if (activeFiltersCount) {-->\r\n <!-- <button-->\r\n <!-- mat-icon-button-->\r\n <!-- (click)=\"clearAllFilters()\"-->\r\n <!-- [matTooltip]=\"'Clear Filters'\"-->\r\n <!-- >-->\r\n <!-- <mat-icon>filter_alt_off</mat-icon>-->\r\n <!-- </button>-->\r\n <!-- }-->\r\n\r\n <button mat-icon-button (click)=\"openFilterDialog()\">\r\n <mat-icon\r\n [matBadge]=\"activeFiltersCount\"\r\n [matBadgeHidden]=\"!activeFiltersCount\"\r\n [matBadgeSize]=\"'small'\"\r\n matBadgePosition=\"before\"\r\n >filter_alt</mat-icon\r\n >\r\n </button>\r\n }\r\n\r\n @if (showGlobalSearch()) {\r\n <mat-form-field appearance=\"outline\" 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 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 (showCreateButton()) {\r\n <button\r\n color=\"primary\"\r\n mat-flat-button\r\n (click)=\"createButtonAction()()\"\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: "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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.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.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: i9.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: i9.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i11.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
446
769
  }
447
770
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableCaptionComponent, decorators: [{
448
771
  type: Component,
@@ -499,7 +822,7 @@ class MaterialTableRowCellComponent {
499
822
  this.changeDetectorRef.markForCheck();
500
823
  }
501
824
  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 }); }
502
- 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 }, rowDataCopy: { classPropertyName: "rowDataCopy", publicName: "rowDataCopy", 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 } }, outputs: { saveEditRowEmitter: "saveEditRowEmitter", cancelEditRowEmitter: "cancelEditRowEmitter", editRowEmitter: "editRowEmitter", selectRowChange: "selectRowChange" }, ngImport: i0, template: "@switch (column().type || 'string') {\r\n @case ('custom-template') {\r\n <ng-container\r\n [ngTemplateOutlet]=\"column().customTemplate!\"\r\n [ngTemplateOutletContext]=\"{ data: rowData() }\"\r\n ></ng-container>\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)=\"$event.stopPropagation(); action.action!(rowData())\"\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 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 {{ rowData()[column().field] | stDateTimeFormatPipe }}\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 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 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 mat-icon-button\r\n color=\"primary\"\r\n (click)=\"editRow()\"\r\n [matTooltip]=\"'Edit row'\"\r\n >\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n @case ('actions-row-selecting') {\r\n <mat-checkbox\r\n color=\"primary\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"selectRow($event)\"\r\n [checked]=\"rowIsSelected()\"\r\n >\r\n </mat-checkbox>\r\n }\r\n}\r\n\r\n<ng-template #baseFieldCell let-column>\r\n @if (rowEditing && column.allowEditColumn) {\r\n <mat-form-field appearance=\"outline\">\r\n @if (column.type === 'string') {\r\n <input matInput [(ngModel)]=\"rowDataCopy()![column.field]\" />\r\n }\r\n @if (column.type === 'number') {\r\n <input\r\n matInput\r\n type=\"number\"\r\n [(ngModel)]=\"rowDataCopy()![column.field]\"\r\n />\r\n }\r\n @if (column.type === 'boolean') {\r\n <mat-checkbox [(ngModel)]=\"rowDataCopy()![column.field]\"></mat-checkbox>\r\n }\r\n </mat-form-field>\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: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.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: i7.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: i9.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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$2.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$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9$2.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.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: "pipe", type: i11$2.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
825
+ 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 }, rowDataCopy: { classPropertyName: "rowDataCopy", publicName: "rowDataCopy", 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 } }, outputs: { saveEditRowEmitter: "saveEditRowEmitter", cancelEditRowEmitter: "cancelEditRowEmitter", editRowEmitter: "editRowEmitter", selectRowChange: "selectRowChange" }, ngImport: i0, template: "@switch (column().type || 'string') {\r\n @case ('custom-template') {\r\n <ng-container\r\n [ngTemplateOutlet]=\"column().customTemplate!\"\r\n [ngTemplateOutletContext]=\"{ data: rowData() }\"\r\n ></ng-container>\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)=\"$event.stopPropagation(); action.action!(rowData())\"\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 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 {{ rowData()[column().field] | stDateTimeFormatPipe }}\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 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 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 mat-icon-button\r\n color=\"primary\"\r\n (click)=\"editRow()\"\r\n [matTooltip]=\"'Edit row'\"\r\n >\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n @case ('actions-row-selecting') {\r\n <mat-checkbox\r\n color=\"primary\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"selectRow($event)\"\r\n [checked]=\"rowIsSelected()\"\r\n >\r\n </mat-checkbox>\r\n }\r\n}\r\n\r\n<ng-template #baseFieldCell let-column>\r\n @if (rowEditing && column.allowEditColumn) {\r\n <mat-form-field appearance=\"outline\">\r\n @if (column.type === 'string') {\r\n <input matInput [(ngModel)]=\"rowDataCopy()![column.field]\" />\r\n }\r\n @if (column.type === 'number') {\r\n <input\r\n matInput\r\n type=\"number\"\r\n [(ngModel)]=\"rowDataCopy()![column.field]\"\r\n />\r\n }\r\n @if (column.type === 'boolean') {\r\n <mat-checkbox [(ngModel)]=\"rowDataCopy()![column.field]\"></mat-checkbox>\r\n }\r\n </mat-form-field>\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: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.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$1.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: i6$2.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9$1.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.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: "pipe", type: i11$1.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
503
826
  }
504
827
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableRowCellComponent, decorators: [{
505
828
  type: Component,
@@ -618,9 +941,31 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
618
941
  else if (column.type === 'boolean') {
619
942
  column.filterType = 'boolean';
620
943
  }
944
+ else {
945
+ column.filterType = 'string';
946
+ }
621
947
  }
622
948
  });
623
949
  this.loadLocalStorageData();
950
+ //validate filters
951
+ const filterKeys = Object.keys(this.initFilters);
952
+ const newFilters = {};
953
+ if (filterKeys.length > 0) {
954
+ filterKeys.forEach(key => {
955
+ const col = this.initColumns().find(column => column.field === key);
956
+ if (col) {
957
+ newFilters[key] = {
958
+ value: this.initFilters[key].value || '',
959
+ matchMode: MaterialTableFilterDialogComponent.getBaseMatchModeByType(col.filterType),
960
+ };
961
+ }
962
+ });
963
+ }
964
+ if (JSON.stringify(newFilters) !== JSON.stringify(this.initFilters)) {
965
+ this.initFilters = newFilters;
966
+ this.localStorageData.filters = newFilters;
967
+ this.updateDataToLocalStorage();
968
+ }
624
969
  this.setDisplayedColumns();
625
970
  }
626
971
  ngAfterViewInit() {
@@ -730,13 +1075,43 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
730
1075
  let searchOkGlobal = true;
731
1076
  searchTermsKeys.forEach((key) => {
732
1077
  if (key !== 'stGlobalSearch' &&
733
- this.selectedColumnsString.includes(key)) {
734
- searchOk =
735
- searchOk &&
736
- data[key]
737
- .toString()
738
- .toLowerCase()
739
- .indexOf(searchTerms[key].value.toString().toLowerCase()) !== -1;
1078
+ this.selectedColumnsString.includes(key) &&
1079
+ searchTerms[key].value) {
1080
+ if (Array.isArray(searchTerms[key].value)) {
1081
+ const dateFrom = searchTerms[key].value[0];
1082
+ const dateTo = searchTerms[key].value[1];
1083
+ if (dateFrom || dateTo) {
1084
+ const tmpColumn = this.columns.find(col => col.field === key);
1085
+ if (tmpColumn && tmpColumn.type === 'date') {
1086
+ const dateFromValue = dateFrom ? new Date(dateFrom) : null;
1087
+ const dateToValue = dateTo
1088
+ ? new Date(new Date(dateTo).setDate(new Date(dateTo).getDate() + 1))
1089
+ : null;
1090
+ const tableData = new Date(data[key]);
1091
+ if (dateFromValue && dateToValue) {
1092
+ searchOk =
1093
+ searchOk &&
1094
+ tableData >= dateFromValue &&
1095
+ tableData <= dateToValue;
1096
+ }
1097
+ else if (dateFromValue) {
1098
+ searchOk = searchOk && tableData >= dateFromValue;
1099
+ }
1100
+ else if (dateToValue) {
1101
+ searchOk = searchOk && tableData <= dateToValue;
1102
+ }
1103
+ }
1104
+ }
1105
+ }
1106
+ else {
1107
+ searchOk =
1108
+ searchOk &&
1109
+ data[key]
1110
+ .toString()
1111
+ .toLowerCase()
1112
+ .indexOf(searchTerms[key].value.toString().toLowerCase()) !==
1113
+ -1;
1114
+ }
740
1115
  }
741
1116
  });
742
1117
  if (searchTerms.stGlobalSearch) {
@@ -912,7 +1287,7 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
912
1287
  };
913
1288
  }
914
1289
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.StSnackBarService }, { token: StTablesTranslationsService }], target: i0.ɵɵFactoryTarget.Component }); }
915
- 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 }, rowEditing: { classPropertyName: "rowEditing", publicName: "rowEditing", isSignal: true, isRequired: false, transformFunction: null }, rowSelecting: { classPropertyName: "rowSelecting", publicName: "rowSelecting", isSignal: true, isRequired: false, transformFunction: null }, selectionFieldLabel: { classPropertyName: "selectionFieldLabel", publicName: "selectionFieldLabel", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, createButtonAction: { classPropertyName: "createButtonAction", publicName: "createButtonAction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { initColumns: "initColumnsChange", loadData: "loadData", saveNewRow: "saveNewRow", selectRowChange: "selectRowChange" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"st-material-table\">\r\n @if (isLoading()) {\r\n <div class=\"loading-spinner\">\r\n <mat-spinner color=\"accent\"></mat-spinner>\r\n </div>\r\n }\r\n\r\n @if (showTable) {\r\n <st-material-table-caption\r\n [tableTitle]=\"tableTitle()\"\r\n [allowPickColumns]=\"allowPickColumns()\"\r\n [showGlobalSearch]=\"showGlobalSearch()\"\r\n [allowReorderColumns]=\"allowReorderColumns()\"\r\n [columns]=\"columns\"\r\n [initFilters]=\"initFilters\"\r\n [initGlobalSearch]=\"initGlobalSearch\"\r\n [showCreateButton]=\"showCreateButton()\"\r\n [createButtonLabel]=\"createButtonLabel()\"\r\n [createButtonAction]=\"createButtonAction()\"\r\n (captionDataChanged)=\"captionDataChanged($event)\"\r\n (resetTableSettings)=\"resetTableSettings()\"\r\n ></st-material-table-caption>\r\n }\r\n\r\n <table\r\n [ngClass]=\"{ 'no-hover': !rowClickAction() }\"\r\n mat-table\r\n [dataSource]=\"tableSource\"\r\n matSort\r\n >\r\n @for (column of selectedColumns; track column) {\r\n <ng-container [matColumnDef]=\"column.field\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n mat-sort-header\r\n [disabled]=\"!column.sort\"\r\n >\r\n @if (column.type === 'actions-row-selecting') {\r\n <mat-checkbox\r\n color=\"primary\"\r\n (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n >\r\n </mat-checkbox>\r\n } @else {\r\n {{ column.header }}\r\n }\r\n </th>\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n >\r\n <st-material-table-row-cell\r\n [column]=\"column\"\r\n [rowData]=\"element\"\r\n [rowDataCopy]=\"activeRowsEditing[element.id]\"\r\n [rowEditing]=\"!!activeRowsEditing[element.id]\"\r\n [rowIsSelected]=\"selection.isSelected(element)\"\r\n (editRowEmitter)=\"editRow(element, column)\"\r\n (saveEditRowEmitter)=\"saveEditRow(element, column)\"\r\n (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n (selectRowChange)=\"selectRowChanged($event, element)\"\r\n ></st-material-table-row-cell>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: selectedColumnsString\"\r\n (click)=\"rowClickAction() ? rowClickAction()!(row) : null\"\r\n ></tr>\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 (rowSelecting()) {\r\n <div class=\"st-material-table-selected-rows\">\r\n <button mat-stroked-button [matMenuTriggerFor]=\"menu\">\r\n {{ selection.selected.length }}\r\n {{ stTableTranslations.getTranslations()().rowSelected }}\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n @for (row of selection.selected; track row) {\r\n <button mat-menu-item (click)=\"removeSelectedRow(row)\">\r\n <div class=\"d-flex\">\r\n {{ row[selectionFieldLabel()]\r\n }}<mat-icon style=\"margin-right: 0; margin-left: 10px\"\r\n >delete</mat-icon\r\n >\r\n </div>\r\n </button>\r\n }\r\n </mat-menu>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:2rem}.st-material-table .st-material-table-selected-rows{position:absolute;bottom:12px;left:5px}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr td a button{color:#000}.st-material-table table tbody>tr td a mat-icon{color:#333}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr td a button{color:#000}table.st-material-table tbody>tr td a mat-icon{color:#333}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 .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 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: i4$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i8$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$2.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$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9$2.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.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: ["showGlobalSearch", "tableTitle", "allowPickColumns", "allowReorderColumns", "initGlobalSearch", "initFilters", "showCreateButton", "createButtonLabel", "createButtonAction", "columns"], outputs: ["captionDataChanged", "resetTableSettings"] }, { kind: "component", type: MaterialTableRowCellComponent, selector: "st-material-table-row-cell", inputs: ["column", "rowData", "rowDataCopy", "rowEditing", "rowIsSelected"], outputs: ["saveEditRowEmitter", "cancelEditRowEmitter", "editRowEmitter", "selectRowChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1290
+ 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 }, rowEditing: { classPropertyName: "rowEditing", publicName: "rowEditing", isSignal: true, isRequired: false, transformFunction: null }, rowSelecting: { classPropertyName: "rowSelecting", publicName: "rowSelecting", isSignal: true, isRequired: false, transformFunction: null }, selectionFieldLabel: { classPropertyName: "selectionFieldLabel", publicName: "selectionFieldLabel", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, createButtonAction: { classPropertyName: "createButtonAction", publicName: "createButtonAction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { initColumns: "initColumnsChange", loadData: "loadData", saveNewRow: "saveNewRow", selectRowChange: "selectRowChange" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"st-material-table\">\r\n @if (isLoading()) {\r\n <div class=\"loading-spinner\">\r\n <mat-spinner color=\"accent\"></mat-spinner>\r\n </div>\r\n }\r\n\r\n @if (showTable) {\r\n <st-material-table-caption\r\n [tableTitle]=\"tableTitle()\"\r\n [allowPickColumns]=\"allowPickColumns()\"\r\n [showGlobalSearch]=\"showGlobalSearch()\"\r\n [allowReorderColumns]=\"allowReorderColumns()\"\r\n [columns]=\"columns\"\r\n [initFilters]=\"initFilters\"\r\n [initGlobalSearch]=\"initGlobalSearch\"\r\n [showCreateButton]=\"showCreateButton()\"\r\n [createButtonLabel]=\"createButtonLabel()\"\r\n [createButtonAction]=\"createButtonAction()\"\r\n (captionDataChanged)=\"captionDataChanged($event)\"\r\n (resetTableSettings)=\"resetTableSettings()\"\r\n ></st-material-table-caption>\r\n }\r\n\r\n <table\r\n [ngClass]=\"{ 'no-hover': !rowClickAction() }\"\r\n mat-table\r\n [dataSource]=\"tableSource\"\r\n matSort\r\n >\r\n @for (column of selectedColumns; track column) {\r\n <ng-container [matColumnDef]=\"column.field\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n mat-sort-header\r\n [disabled]=\"!column.sort\"\r\n >\r\n @if (column.type === 'actions-row-selecting') {\r\n <mat-checkbox\r\n color=\"primary\"\r\n (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n >\r\n </mat-checkbox>\r\n } @else {\r\n {{ column.header }}\r\n }\r\n </th>\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n >\r\n <st-material-table-row-cell\r\n [column]=\"column\"\r\n [rowData]=\"element\"\r\n [rowDataCopy]=\"activeRowsEditing[element.id]\"\r\n [rowEditing]=\"!!activeRowsEditing[element.id]\"\r\n [rowIsSelected]=\"selection.isSelected(element)\"\r\n (editRowEmitter)=\"editRow(element, column)\"\r\n (saveEditRowEmitter)=\"saveEditRow(element, column)\"\r\n (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n (selectRowChange)=\"selectRowChanged($event, element)\"\r\n ></st-material-table-row-cell>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: selectedColumnsString\"\r\n (click)=\"rowClickAction() ? rowClickAction()!(row) : null\"\r\n ></tr>\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 (rowSelecting()) {\r\n <div class=\"st-material-table-selected-rows\">\r\n <button mat-stroked-button [matMenuTriggerFor]=\"menu\">\r\n {{ selection.selected.length }}\r\n {{ stTableTranslations.getTranslations()().rowSelected }}\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n @for (row of selection.selected; track row) {\r\n <button mat-menu-item (click)=\"removeSelectedRow(row)\">\r\n <div class=\"d-flex\">\r\n {{ row[selectionFieldLabel()]\r\n }}<mat-icon style=\"margin-right: 0; margin-left: 10px\"\r\n >delete</mat-icon\r\n >\r\n </div>\r\n </button>\r\n }\r\n </mat-menu>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:2rem}.st-material-table .st-material-table-selected-rows{position:absolute;bottom:12px;left:5px}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr td a button{color:#000}.st-material-table table tbody>tr td a mat-icon{color:#333}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr td a button{color:#000}table.st-material-table tbody>tr td a mat-icon{color:#333}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 .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 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: i4$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i8$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9$1.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.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: ["showGlobalSearch", "tableTitle", "allowPickColumns", "allowReorderColumns", "initGlobalSearch", "initFilters", "showCreateButton", "createButtonLabel", "createButtonAction", "columns"], outputs: ["captionDataChanged", "resetTableSettings"] }, { kind: "component", type: MaterialTableRowCellComponent, selector: "st-material-table-row-cell", inputs: ["column", "rowData", "rowDataCopy", "rowEditing", "rowIsSelected"], outputs: ["saveEditRowEmitter", "cancelEditRowEmitter", "editRowEmitter", "selectRowChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
916
1291
  }
917
1292
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableComponent, decorators: [{
918
1293
  type: Component,
@@ -949,7 +1324,8 @@ class StTablesModule {
949
1324
  MaterialTableOrderColumnDialogComponent,
950
1325
  MaterialTableFilterDialogComponent,
951
1326
  MaterialTableRowCellComponent,
952
- SelectTableComponent], imports: [CommonModule,
1327
+ SelectTableComponent,
1328
+ MaterialTableFilterComponent], imports: [CommonModule,
953
1329
  MatButtonModule,
954
1330
  MatIconModule,
955
1331
  MatTableModule,
@@ -1013,6 +1389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
1013
1389
  MaterialTableFilterDialogComponent,
1014
1390
  MaterialTableRowCellComponent,
1015
1391
  SelectTableComponent,
1392
+ MaterialTableFilterComponent,
1016
1393
  ],
1017
1394
  imports: [
1018
1395
  CommonModule,